JavaScript ES6+ 语法速通
一、ES6 基础语法
1. let 和 const 声明变量
let：块级作用域，可以重新赋值。const：块级作用域，声明常量，不能重新赋值。
let name = 'Li Hua';
name = 'Li Ming'; // 可修改const age = 21;
// age = 22; // 报错，const 不能重新赋值
2. 模板字符串
使用反引号 `，支持 字符串插值 和 多行字符串。
const name = 'Li Hua';
const age = 21;const message = `Hello, my name is ${name}. I'm ${age} years old.`;
console.log(message);const multiLine = `这是一行
这又是另一行`;
console.log(multiLine);
3. 解构赋值
- 数组解构：
const [a, b, c] = [1, 2, 3];
console.log(a, b, c); // 1, 2, 3
- 对象解构：
const person = { name: 'Li Hua', age: 21 };
const { name, age } = person;
console.log(name, age); // 'Li Hua', 21
- 默认值：
const { city = 'Wuhan' } = {};
console.log(city); // 'Wuhan'
4. 箭头函数
箭头函数简化写法，并且不会绑定 this。
const sum = (a, b) => a + b;
console.log(sum(3, 4)); // 7const square = n => n * n;
console.log(square(5)); // 25
5. 扩展运算符 ...
- 数组展开：
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
console.log(arr2); // [1, 2, 3, 4, 5]
- 对象合并：
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };
console.log(obj2); // { a: 1, b: 2, c: 3 }
- 函数参数：
function sum(...numbers) {return numbers.reduce((a, b) => a + b, 0);
}
console.log(sum(1, 2, 3, 4)); // 10
6. 默认参数
function greet(name = 'Guest') {console.log(`Hello, ${name}!`);
}
greet(); // 'Hello, Guest!'
greet('Li Hua'); // 'Hello, Li Hua!'
7. for…of 遍历
const arr = [1, 2, 3];
for (const num of arr) {console.log(num);
}
8. Promise 和异步操作
const fetchData = new Promise((resolve, reject) => {setTimeout(() => resolve('数据加载成功'), 2000);
});fetchData.then(data => console.log(data)).catch(err => console.log(err));
二、ES7+ 高级语法
1. ES7：includes 方法
const arr = [1, 2, 3];
console.log(arr.includes(2)); // true
console.log(arr.includes(5)); // false
2. ES8：Async/Await
function delay(ms) {return new Promise(resolve => setTimeout(resolve, ms));
}async function loadData() {console.log('开始加载...');await delay(2000);console.log('数据加载成功');
}loadData();
3. ES9：对象的 Rest 和 Spread
- Rest 参数：
const { a, ...rest } = { a: 1, b: 2, c: 3 };
console.log(rest); // { b: 2, c: 3 }
- 对象展开：
const obj = { ...{ a: 1 }, b: 2 };
console.log(obj); // { a: 1, b: 2 }
4. ES10：Optional Catch Binding
try {throw new Error('出错了');
} catch {console.log('捕获异常');
}
5. ES11：可选链操作符 ?.
const user = { name: 'Li Hua', address: { city: 'Wuhan' } };
console.log(user.address?.city); // 'Wuhan'
console.log(user.contact?.phone); // undefined
6. ES12：逻辑赋值运算符
let a = null;
a ??= 'default';
console.log(a); // 'default'let b = 5;
b &&= 10;
console.log(b); // 10