JavaScript ES6 新特性（二）

1. Map 和 Set

1.1 Map

Map 是一种键值对的集合，它允许使用任何数据类型作为键。在 Map 中，键值对是有序的，且键可以是对象、字符串或其他数据类型。

const map = new Map();
map.set("name", "Alice");
map.set(1, "one");
console.log(map.get("name")); // Alice
console.log(map.has(1)); // true
console.log(map.size); // 2
JAVASCRIPT

1.2 Set

Set 是一种值的集合，其中值是唯一的。与 Map 不同，Set 仅存储值，没有键。Set 允许我们快速过滤重复的元素。

const set = new Set([1, 2, 3, 3, 4]);
console.log(set); // Set { 1, 2, 3, 4 }
set.add(5);
set.delete(1);
console.log(set.has(1)); // false
JAVASCRIPT

2. Symbol

Symbol 是 ES6 中引入的一种新的基本数据类型，表示独一无二的值。它通常用于定义对象的私有属性，避免属性名冲突。

const id = Symbol("id");
const user = {
    name: "Alice",
    [id]: 1234
};
console.log(user[id]); // 1234
JAVASCRIPT

通过使用 Symbol，我们可以创建不可重复的属性名称，防止对象属性被意外覆盖或访问。

3. 迭代器（Iterators）和生成器（Generators）

3.1 迭代器

迭代器是一种对象，符合特定的迭代协议。实现了 next() 方法，每次调用返回一个 { value, done } 对象。所有数组、Map 和 Set 等数据结构都实现了迭代器。

const array = [1, 2, 3];
const iterator = array[Symbol.iterator]();

console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: undefined, done: true }
JAVASCRIPT

3.2 生成器（Generators）

生成器是一种特殊的函数，使用 function* 语法定义，允许在执行过程中暂停和恢复。生成器返回一个迭代器对象，并可以通过 yield 关键字一次返回一个值。

function* generateSequence() {
    yield 1;
    yield 2;
    yield 3;
}

const generator = generateSequence();
console.log(generator.next().value); // 1
console.log(generator.next().value); // 2
console.log(generator.next().value); // 3
JAVASCRIPT

生成器可以通过 yield 实现按需生产值，使其特别适合处理数据流或无限序列。

4. for...of 循环

for...of 循环是一种新的迭代方式，允许我们遍历任何可迭代对象（例如数组、Map 和 Set 等）。它比 for...in 更适合数组和可迭代对象，因为它直接获取值而不是索引或键。

const array = [10, 20, 30];
for (const value of array) {
    console.log(value); // 10, 20, 30
}
JAVASCRIPT

与 for...in 循环不同的是，for...of 不适用于普通对象，而适用于实现了 Symbol.iterator 接口的对象。

5. 扩展内建对象的新方法

5.1 数组方法

ES6 为数组添加了许多新方法，常用方法包括：

• Array.from(): 将类数组对象或可迭代对象转换为数组。

console.log(Array.from("hello")); // ["h", "e", "l", "l", "o"]
JAVASCRIPT

• Array.of(): 创建包含指定元素的数组。

console.log(Array.of(1, 2, 3)); // [1, 2, 3]
JAVASCRIPT

• find(): 返回第一个满足测试条件的元素。

const arr = [5, 12, 8, 130, 44];
const found = arr.find(element => element > 10);
console.log(found); // 12
JAVASCRIPT

• findIndex(): 返回第一个满足测试条件的元素索引。

const index = arr.findIndex(element => element > 10);
console.log(index); // 1
JAVASCRIPT

• includes(): 判断数组是否包含某个值。

const array = [1, 2, 3];
console.log(array.includes(2)); // true
JAVASCRIPT

5.2 字符串方法

ES6 添加了一些有用的字符串方法来简化字符串操作：

• startsWith(): 判断字符串是否以指定的子字符串开头。

const str = "Hello world";
console.log(str.startsWith("Hello")); // true
JAVASCRIPT

• endsWith(): 判断字符串是否以指定的子字符串结尾。

console.log(str.endsWith("world")); // true
JAVASCRIPT

• includes(): 判断字符串是否包含指定的子字符串。

console.log(str.includes("lo wo")); // true
JAVASCRIPT

• repeat(): 返回重复指定次数的新字符串。

console.log("ha".repeat(3)); // "hahaha"
JAVASCRIPT

6. Proxy 和 Reflect

6.1 Proxy

Proxy 是 ES6 提供的用于创建对象代理的机制，允许拦截并定义基本操作（如属性查找、赋值、枚举、函数调用等）的行为。通过 Proxy，我们可以更精确地控制对对象的访问和操作。

const handler = {
    get(target, property) {
        return property in target ? target[property] : "属性不存在";
    }
};

const person = { name: "Alice" };
const proxyPerson = new Proxy(person, handler);

console.log(proxyPerson.name); // Alice
console.log(proxyPerson.age); // 属性不存在
JAVASCRIPT

6.2 Reflect

Reflect 是一个内置对象，提供了许多与对象拦截操作相关的方法。与 Proxy 配合使用时，Reflect 提供了更简洁的语法，并将操作标准化。

const person = { name: "Alice" };
Reflect.set(person, "age", 25);
console.log(person.age); // 25
JAVASCRIPT

7. Promise.all() 和 Promise.race()

ES6 为 Promise 对象添加了两个重要的方法：Promise.all() 和 Promise.race()。

7.1 Promise.all()

Promise.all() 接收一个 Promise 数组，当所有 Promise 都完成时，它会返回一个包含所有 Promise 结果的数组；若其中任何一个 Promise 失败，它将立即返回失败结果。

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
    setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then(values => {
    console.log(values); // [3, 42, "foo"]
});
JAVASCRIPT

7.2 Promise.race()

Promise.race() 也接收一个 Promise 数组，但它返回第一个完成的 Promise 结果，无论该 Promise 成功还是失败。

const promise1 = new Promise((resolve, reject) => {
    setTimeout(resolve, 500, 'one');
});
const promise2 = new Promise((resolve, reject) => {
    setTimeout(resolve, 100, 'two');
});

Promise.race([promise1, promise2]).then(value => {
    console.log(value); // "two"
});
JAVASCRIPT