以下是 ECMAScript 6（ES6）中一些主要的知识点及其用法：
---
**1. 变量声明**
**1.1 let 和 const**
- **用法**:
- `let` 用于声明块作用域的变量，变量可以重新赋值。
- `const` 用于声明常量，变量不可更改。
- **示例**:
```javascript
let name = 'Alice';
name = 'Bob'; // 正确
const PI = 3.14159;
PI = 2; // 错误，常量不可修改
```
**1.2 块作用域**
- **用法**:
在 `let` 和 `const` 中，变量只能在声明的块中访问。
- **示例**:
```javascript
{
let x = 10;
}
console.log(x); // ReferenceError: x is not defined
```
**2. 函数**
**2.1 箭头函数（Arrow Functions）**
- **用法**:
简化函数表达式， lexical `this` 绑定。
- **示例**:
```javascript
const sum = (a, b) => a + b;
console.log(sum(2, 3)); // 输出：5
```
**2.2 默认参数**
- **用法**:
为函数参数设置默认值。
- **示例**:
```javascript
function greet(name = 'guest') {
console.log(`Hello, ${name}!`);
}
greet(); // 输出：Hello, guest!
```
**2.3 剩余参数**
- **用法**:
将多个参数合并为数组。
- **示例**:
```javascript
function sum(...nums) {
return nums.reduce((acc, num) => acc + num, 0);
}
console.log(sum(1, 2, 3)); // 输出：6
```
**2.4 函数表达式中的理解属性**
- **用法**:
简化函数表达式，避免重复写属性名。
- **示例**:
```javascript
const user = {
name: 'John',
age: 30,
greet() {
console.log('Hello!');
}
};
```
---
**3. 数组**
**3.1 数组解构**
- **用法**:
快速提取数组中的值并赋值给变量。
- **示例**:
```javascript
const arr = [1, 2, 3];
const [a, b] = arr;
console.log(a, b); // 输出：1 2
```
**3.2 展开运算符**
- **用法**:
展开数组中的元素。
- **示例**:
```javascript
const arr1 = [1, 2];
const arr2 = [3, 4];
const combined = [...arr1, ...arr2];
console.log(combined); // 输出：[1, 2, 3, 4]
```
、 **3.3 find() 和 findIndex()**
- **用法**:
在数组中查找满足条件的元素。
- **示例**:
```javascript
const arr = [1, 2, 3, 4];
const result = arr.find((num) => num > 2);
console.log(result); // 输出：3
```
**3.4 数组的 for...of 循环**
- **用法**:
遍历数组或其他可迭代对象。
- **示例**:
```javascript
const arr = [1, 2, 3];
for (const num of arr) {
console.log(num);
}
// 输出：
// 1
// 2
// 3
```
---
**4. 对象**
**4.1 对象字面量增强**
- **用法**:
简化对象属性的定义。
- **示例**:
```javascript
const name = 'John';
const age = 30;
const user = { name, age };
console.log(user); // 输出：{ name: 'John', age: 30 }
```
**4.2 对象解构**
- **用法**:
从对象中提取属性并赋值给变量。
- **示例**:
```javascript
const user = { name: 'John', age: 30 };
const { name, age } = user;
console.log(name, age); // 输出：John 30
```
**4.3 对象的 Symbol 类型**
- **用法**:
创建唯一的属性键。
- **示例**:
```javascript
const key = Symbol('key');
const obj = {};
obj[key] = 'value';
console.log(obj[key]); // 输出：value
```
**4.4 Proxy**
- **用法**:
创建一个代理对象，控制对目标对象的访问。
- **示例**:
```javascript
const target = {};
const proxy = new Proxy(target, {
get: (obj, prop) => {
return obj[prop] ?? '属性不存在';
}
});
console.log(proxy.name); // 输出：属性不存在
```
**4.5 模块化**
- **用法**:
导入和导出模块。
- **示例**:
```javascript
// math.js
export function add(a, b) {
return a + b;
}
// main.js
import { add } from './math.js';
console.log(add(1, 2)); // 输出：3
```
---
**5. 异步操作**
**5.1 Promise**
- **用法**:
处理异步操作，代替回调函数。
- **示例**:
```javascript
const promise = new Promise((resolve, reject) => {
setTimeout(() => resolve('异步操作完成'), 2000);
});
promise.then((result) => console.log(result)); // 输出：异步操作完成
```
**5.2 async/await**
- **用法**:
简化 Promise 的使用，使代码看起来像同步代码。
- **示例**:
```javascript
async function asyncFunc() {
const result = await new Promise((resolve) => {
setTimeout(() => resolve('完成'), 1000);
});
console.log(result); // 输出：完成
}
asyncFunc();
```
---
**6. 类**
**6.1 类的定义**
- **用法**:
使用 `class` 关键字定义类。
- **示例**:
```javascript
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
console.log(`Hello, my name is ${this.name}!`);
}
}
const p = new Person('Alice', 25);
p.greet(); // 输出：Hello, my name is Alice!
```
**6.2 类的继承**
- **用法**:
使用 `extends` 关键字实现继承。
- **示例**:
```javascript
class Animal {
constructor(name) {
this.name = name;
}
eat() {
console.log(`${this.name} is eating.`);
}
}
class Dog extends Animal {
constructor(name, breed) {
super(name);
this.breed = breed;
}
bark() {
console.log(`${this.name} is barking.`);
}
}
const dog = new Dog('Buddy', 'Golden Retriever');
dog.eat(); // 输出：Buddy is eating.
```
**6.3 静态方法**
- **用法**:
定义属于类本身的方法。
- **示例**:
```javascript
class MathUtil {
static add(a, b) {
return a + b;
}
}
console.log(MathUtil.add(1, 2)); // 输出：3
```
**6.4 Getter 和 Setter**
- **用法**:
控制属性的访问和修改。
- **示例**:
```javascript
class Person {
constructor(name) {
this._name = name;
}
get name() {
return this._name;
}
set name(value) {
this._name = value.toUpperCase();
}
}
const p = new Person('john');
console.log(p.name); // 输出：john
p.name = 'alice';
console.log(p.name); // 输出：ALICE
```
---
**7. Set 和 Map**
**7.1 Set**
- **用法**:
存储唯一的集合。
- **示例**:
```javascript
const s = new Set();
s.add(1);
s.add(1); // 重复添加不会报错
console.log(s.size); // 输出：1
console.log(s.has(1)); // 输出：true
```
**7.2 Map**
- **用法**:
存储键值对。
- **示例**:
```javascript
const m = new Map();
m.set('name', 'John');
console.log(m.get('name')); // 输出：John
console.log(m.has('name')); // 输出：true
```
---
**8. 异步迭代器和 for...await**
- **用法**:
遍历异步生成的序列。
- **示例**:
```javascript
async function* asyncGenerator() {
yield 1;
await new Promise(resolve => setTimeout(resolve, 1000));
yield 2;
await new Promise(resolve => setTimeout(resolve, 1000));
yield 3;
}
async function main() {
for await (const num of asyncGenerator()) {
console.log(num);
}
}
main(); // 输出：1, 2, 3（每隔一秒输出一次）
```
---
**9. Promise.all 和 Promise.race**
- **用法**:
处理多个 Promise。
- **示例**:
```javascript
Promise.all([Promise.resolve(1), Promise.resolve(2)])
.then(results => console.log(results)); // 输出：[1, 2]
Promise.race([Promise.resolve(1), Promise.resolve(2)])
.then(result => console.log(result)); // 输出：1
```
---
**10. 解构赋值**
- **用法**:
从数组或对象中提取值并赋值给变量。
- **示例**:
```javascript
const arr = [1, 2, 3];
const [a, b, c] = arr;
console.log(a, b, c); // 输出：1 2 3
```
---
**11. 迭代协议（Iterator Protocol）**
- **用法**:
定义对象的迭代行为。
- **示例**:
```javascript
const iterable = {
[Symbol.iterator]() {
let i = 0;
return {
next() {
if (i < 3) {
return { value: i++, done: false };
}
return { value: undefined, done: true };
}
};
}
};
for (const num of iterable) {
console.log(num); // 输出：0, 1, 2
}
```
---
**12. 生成器（Generator）**
- **用法**:
使用 `function*` 创建生成器函数，实现协程。
- **示例**:
```javascript
function* generatorFunc() {
yield 1;
yield 2;
return 3;
}
const gen = generatorFunc();
console.log(gen.next().value); // 输出：1
console.log(gen.next().value); // 输出：2
console.log(gen.next().value); // 输出：3
```
---
**13. 子类化内置对象**
- **用法**:
扩展内置对象（如 Array）。
- **示例**:
```javascript
class MyArray extends Array {
constructor(...args) {
super(...args);
}
sum() {
return this.reduce((acc, num) => acc + num, 0);
}
}
const arr = new MyArray(1, 2, 3);
console.log(arr.sum()); // 输出：6
```
---
**14. 对象的 \[\[OwnPropertyKeys]]**
- **用法**:
自定义对象的属性枚举。
- **示例**:
```javascript
const obj = {};
Object.defineProperty(obj, 'a', { value: 1, enumerable: true });
Object.defineProperty(obj, 'b', { value: 2, enumerable: false });
console.log(Object.keys(obj)); // 输出：['a']
```
---
这些是 ES6 中的一些主要知识点及其用法，涵盖了变量声明、函数、数组、对象、类、异步操作等多个方面。通过这些特性，可以让 JavaScript 代码更加简洁、可读和高效。