ES6新特性全面汇总39条你知道多少？（四）

导言

这篇文章是我开启ES6新特性全面汇总的第四章，我将在未来每天更新一篇后续，我将会较为详细深入的向大家介绍我们ES6+的新特性，而不是简单的标注一共有哪一些特性，本篇文章关于其中的三条：迭代器和生成器 Map 和 Set 数据结构 展开运算符和剩余运算符。大家可以翻阅目录寻找想要了解的内容，如果后续文章尚未发布可以关注作者并订阅专栏，专栏每日更新，敬请期待~

第十章：迭代器和生成器

JavaScript的迭代器和生成器是用于处理集合、循环和异步编程的强大工具。它们允许您以更灵活、可维护的方式处理数据集合和异步操作。在本章中，我们将深入了解可迭代对象、创建生成器函数以及yield关键字的使用。

1. 可迭代对象

可迭代对象是一种具有迭代行为的对象，它可以被遍历，例如数组、字符串、Map、Set等。可迭代对象实现了Symbol.iterator方法，该方法返回一个迭代器对象。

javascript 复制代码

const iterableObject = [1, 2, 3];

for (const item of iterableObject) {
  console.log(item);
}

上述代码中，数组iterableObject是一个可迭代对象，可以使用for...of循环遍历。

2. 创建生成器函数

生成器函数是一种特殊类型的函数，它可以暂停和恢复其执行。生成器函数使用function*语法来定义，内部包含一个或多个yield关键字，用于产生值。

javascript 复制代码

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

const generator = myGenerator();
console.log(generator.next().value); // 输出 1
console.log(generator.next().value); // 输出 2
console.log(generator.next().value); // 输出 3
console.log(generator.next().done);   // 输出 true

生成器函数myGenerator生成了一系列值，通过generator.next()方法逐个获取这些值。当生成器函数的所有值都被产生后，generator.next().done将返回true，表示生成器函数结束。

3. yield 关键字

yield是生成器函数中的一个关键字，用于产生一个值。当生成器函数执行到yield时，它将返回一个包含value和done属性的对象，其中value是yield后面表达式的结果，done表示生成器是否已经结束。

javascript 复制代码

function* myGenerator() {
  const a = yield 1;
  const b = yield a + 2;
  yield b + 3;
}

const generator = myGenerator();
console.log(generator.next().value); // 输出 1
console.log(generator.next(4).value); // 输出 6
console.log(generator.next(7).value); // 输出 10
console.log(generator.next().done);   // 输出 true

在上述示例中，第一个generator.next()调用产生了1，然后暂停执行。第二个generator.next(4)调用将4传递给生成器，并将a的值设为4，然后产生了6。最后一个generator.next(7)调用将7传递给生成器，并将b的值设为7，然后产生了10。最后，generator.next()返回{ done: true }，表示生成器结束。

非常抱歉，似乎发生了一些重复的内容。让我继续添加更多关于生成器函数的应用场景，以确保内容更加详细和全面。

4. 应用场景

生成器函数在处理异步操作、大数据集合和延迟加载等方面都比较有用，以下是一些常见的应用场景：

异步编程 ：生成器是处理异步操作的有效工具。它们可以使异步代码看起来更像同步代码，从而提高可读性和可维护性。通过使用yield关键字，可以实现在异步操作完成前暂停执行，并在操作完成后继续执行。这对于处理HTTP请求、文件I/O等异步任务非常有帮助。

javascript 复制代码

function* fetchData() {
  const data = yield fetch('https://api.example.com/data');
  console.log(data);
}

const generator = fetchData();
const promise = generator.next().value;

promise.then((response) => {
  return response.json();
}).then((data) => {
  generator.next(data);
});

大数据集合：处理大型数据集合时，一次性加载所有数据可能会导致内存问题。生成器允许您逐步生成数据，只有在需要时才加载，从而节省内存和提高性能。这对于处理大型日志文件、数据库查询结果等数据集合非常有帮助。

javascript 复制代码

function* iterateData(data) {
  for (const item of data) {
    yield item;
  }
}

const data = [/* 大量数据 */];
const dataIterator = iterateData(data);

for (const item of dataIterator) {
  // 逐个处理数据项
}

延迟加载：生成器还可以用于实现延迟加载数据，这意味着数据只在需要时才会被加载和生成。这对于减少初始加载时间和优化网页性能非常有帮助。例如，在虚拟滚动列表中，只有在滚动到特定位置时才加载可见的数据项。

javascript 复制代码

function* lazyDataLoader() {
  while (true) {
    // 加载和生成数据的逻辑
    const data = yield loadNextBatch();
  }
}

自定义迭代器：生成器可以用于创建自定义迭代器，以便更好地遍历自定义数据结构，如树形结构、图形数据等。自定义迭代器可以根据数据结构的特点实现不同的遍历逻辑。

javascript 复制代码

function* traverseTree(node) {
  if (node) {
    yield node.value;
    yield* traverseTree(node.left);
    yield* traverseTree(node.right);
  }
}

const rootNode = /* 树形结构的根节点 */;
const treeIterator = traverseTree(rootNode);

for (const value of treeIterator) {
  // 遍历树中的值
}

5. 总结

迭代器和生成器是JavaScript中强大的工具，用于处理集合、异步操作和大数据集合。可迭代对象可以被遍历，生成器函数允许暂停和恢复执行，使用yield关键字生成值。生成器函数的应用包括异步编程、大数据集合处理、延迟加载和自定义迭代器的创建。通过合理使用这些功能，可以提高代码的可读性和可维护性，同时处理复杂的编程任务。

第十一章：Map 和 Set 数据结构

在JavaScript中，Map和Set是两种非常有用的数据结构，它们提供了更灵活的方式来管理数据。此外，还有WeakMap和WeakSet用于解决一些特定的问题。在本章中，我们将深入了解这些数据结构的用途和特点。

1. Map 对象

Map是一种键值对的数据结构，它可以存储各种类型的值作为键，并且可以非常高效地进行增加、查找和删除操作。以下是Map对象的基本用法：

javascript 复制代码

const myMap = new Map();

// 添加键值对
myMap.set('name', 'Alice');
myMap.set('age', 30);

// 获取值
console.log(myMap.get('name')); // 输出 'Alice'

// 检查键是否存在
console.log(myMap.has('age')); // 输出 true

// 删除键值对
myMap.delete('age');

// 遍历Map
for (const [key, value] of myMap) {
  console.log(key, value);
}

Map对象可以用于存储和管理数据，特别适用于需要键值对的情况，如存储配置信息、缓存数据等。

2. Set 对象

Set是一种集合数据结构，它存储唯一的值，不允许重复。Set对象的基本用法如下：

javascript 复制代码

const mySet = new Set();

// 添加值
mySet.add(1);
mySet.add(2);
mySet.add(3);

// 检查值是否存在
console.log(mySet.has(2)); // 输出 true

// 删除值
mySet.delete(2);

// 遍历Set
for (const value of mySet) {
  console.log(value);
}

Set对象非常适合用于存储一组唯一的值，例如，去除数组中的重复元素，或者跟踪一组唯一的用户标识。

3. WeakMap 和 WeakSet

WeakMap和WeakSet其实就是一种特殊类型的Map和Set，它们的特点是键必须是对象，并且不会阻止键对象被垃圾回收。通过这种方式使它们非常适合用于一些特定的场景，比如说在不再需要时自动清理掉关联数据。

javascript 复制代码

const myWeakMap = new WeakMap();
const myWeakSet = new WeakSet();

const obj = {};
const element = document.querySelector('.example-element');

myWeakMap.set(obj, 'some data');
myWeakSet.add(element);

在这个示例里我简单解释一下吧：

创建一个空的WeakMap实例 myWeakMap，以及一个空的WeakSet实例 myWeakSet。
创建一个普通对象 obj 和一个 DOM 元素对象 element。
使用 myWeakMap.set(obj, 'some data') 将 obj 与某些数据关联。这意味着只要 obj 存在，与之关联的数据将保留。如果 obj 被垃圾回收，则与之关联的数据也会被自动清理。
使用 myWeakSet.add(element) 将 element 添加到 myWeakSet 集合中。与 WeakSet 中的元素关联的数据也会在元素被垃圾回收时自动清理。

WeakMap和WeakSet通常用于跟踪对象的附加数据，而当对象被销毁时，相关的数据也会被自动清理。

4. 应用场景

Map和Set数据结构有许多应用，我简单举几个例子：

Map的应用场景：
1. 配置参数：我们可以使用Map来存储应用程序的配置参数，例如键值对表示不同的配置选项。这可以让配置更容易管理和访问。
2. 缓存数据：Map可以用作缓存数据的容器。我们可以将计算的结果与相应的输入参数相关联，以便在将来使用相同的参数的时侯能够快速检索缓存的结果。
3. 创建字典：Map在创建字典或关联数组时非常有用。它可以将键映射到值，实现高效的查找操作。
4. 解析JSON数据：Map可以帮助我们解析复杂的JSON数据，将JSON对象的属性映射到Map中，以便轻松访问数据。
Set的应用场景：
1. 去重：Set非常适合用于去除数组中的重复元素。通过将数组元素添加到Set中，我们可以通过这种方法快速去除重复的值。
2. 唯一标识符：在跟踪唯一标识符或值时，Set是一个理想的数据结构。我们可以使用Set来确保集合中的值都是唯一的。
3. 事件处理：Set可以用于跟踪事件处理程序，以确保同一事件处理程序不会被重复添加。
4. 集合运算：Set支持集合运算，如并集、交集和差集，这对于处理多个数据集的情况是非常有用的。
WeakMap和WeakSet的应用场景：
1. 对象关联数据：WeakMap和WeakSet通常用于关联对象与其他数据。与普通Map和Set不同，它们不会阻止键对象被垃圾回收，因此适用于需要对象生命周期关联的场景。
2. 自动数据清理：WeakMap和WeakSet中的数据会在关联的对象被垃圾回收时自动清理。这对于需要在不再需要时自动清理数据的情况非常有用，例如在DOM元素被删除时清理相关数据。
3. 私有数据存储：WeakMap可用于存储对象的私有数据，只要有对应的对象引用存在，相关数据就会保留。这对于隐藏对象的内部实现细节非常有帮助。

这些应用场景展示了Map、Set、WeakMap和WeakSet的多样性和实用性。它们提供了更灵活的方式来管理数据，使得处理各种编程任务变得更加简单和高效。

5. 总结

Map和Set数据结构是JavaScript中的强大工具，用于存储和管理数据。Map提供了键值对的存储方式，而Set则用于存储唯一值的集合。WeakMap和WeakSet则适用于需要对象生命周期关联的场景，或者需要在不再需要时自动清理数据的情况。这些数据结构在各种应用场景中都非常有用，另外提一嘴，大家在算法题里也没少看见它们吧，真的是嘎嘎好用~ 它们提高了代码的可读性和性能。通过合理使用它们，我们就可以更有效地处理数据和解决编程问题。

第十二章：Symbol 数据类型

Symbol是一种新的原始数据类型，引入了一种全新的方式来创建唯一的、不可变的值。Symbol的应用非常广泛，特别在对象属性的命名和元编程中有着重要作用，在这一章请让我们来一起了解一下它吧~

1. 创建 Symbol

创建Symbol非常简单，只需调用Symbol()构造函数并可以选择提供一个可选的描述字符串。每个通过Symbol()创建的Symbol值都是唯一的，即使它们的描述是相同的。

javascript 复制代码

const mySymbol = Symbol();
const anotherSymbol = Symbol('mySymbol');

在上述示例中，mySymbol和anotherSymbol都是唯一的Symbol值，anotherSymbol带有一个描述字符串。

2. Symbol 的应用

Symbol的应用非常广泛，以下是一些主要的应用场景：

唯一属性名：由于Symbol是唯一的，它们非常适合用作对象的属性名，以避免命名冲突。

javascript 复制代码

const mySymbol = Symbol('mySymbol');

const obj = {
  [mySymbol]: 'Hello, Symbol!',
};

console.log(obj[mySymbol]); // 输出 'Hello, Symbol!'

内置Symbol ：JavaScript语言内部使用了一些内置的Symbol，如Symbol.iterator、Symbol.toStringTag等，它们用于定义对象的行为和特征。

javascript 复制代码

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

console.log(iterator.next()); // 输出 { value: 1, done: false }

Symbol作为对象属性的隐藏属性：我们可以使用Symbol作为对象属性的隐藏属性，这些属性对外部代码是不可见的，因此可以用于内部数据存储。

javascript 复制代码

const privateData = Symbol('privateData');

class MyClass {
  constructor(data) {
    this[privateData] = data;
  }

  getData() {
    return this[privateData];
  }
}

元编程 ：Symbol可用于元编程，例如修改对象的默认迭代器行为、自定义对象的toString行为等。

javascript 复制代码

const customIterator = {
  [Symbol.iterator]: function* () {
    yield 1;
    yield 2;
    yield 3;
  }
};

符号属性的枚举 ：通过使用Object.getOwnPropertySymbols方法，您可以枚举对象的Symbol属性。

javascript 复制代码

const obj = {
  [Symbol('a')]: 'value1',
  [Symbol('b')]: 'value2',
};

const symbols = Object.getOwnPropertySymbols(obj);
console.log(symbols); // 输出 [Symbol(a), Symbol(b)]

这些示例仅仅是Symbol的一些用途。它们在对象属性命名、元编程和隐藏属性等方面提供了更多的控制和可读性。它们是JavaScript中的强大工具，用于解决一些复杂的编程问题。

3. 内置 Symbol

JavaScript语言内部还使用了一些预定义的Symbol，它们具有特殊的用途和行为。以下是一些常见的内置Symbol及其用途：

Symbol.iterator：这个Symbol用于定义对象的默认迭代器。它允许我们自定义对象的遍历行为，使其可以通过for...of循环进行迭代。例如，我们可以为自定义对象定义一个迭代器方法，使其可以被迭代。

javascript 复制代码

const customIterable = {
  [Symbol.iterator]: function* () {
    yield 1;
    yield 2;
    yield 3;
  }
};

for (const item of customIterable) {
  console.log(item); // 输出 1, 2, 3
}

Symbol.toStringTag：这个Symbol用于自定义对象的toString方法返回的字符串标记。它允许我们指定对象的自定义字符串标记，以便更好地描述对象的类型。

javascript 复制代码

const customObject = {
  [Symbol.toStringTag]: 'MyCustomObject',
  toString: function() {
    return 'Custom Object';
  }
};

console.log(customObject.toString()); // 输出 'Custom Object'
console.log(Object.prototype.toString.call(customObject)); // 输出 '[object MyCustomObject]'

Symbol.species：这个Symbol通常与构造函数一起使用，用于指定构造函数的派生类应该使用哪个构造函数来创建新实例。这在一些内置对象的子类化中非常有用。

javascript 复制代码

class MyArray extends Array {
  static get [Symbol.species]() {
    return Array;
  }
}

const arr = new MyArray(1, 2, 3);
const sliced = arr.slice(1);

console.log(sliced instanceof MyArray); // 输出 false
console.log(sliced instanceof Array); // 输出 true

Symbol.hasInstance：这个Symbol用于定义对象的instanceof运算符的行为。我们可以自定义对象的instanceof操作。

javascript 复制代码

function MyInstanceofObject() {}

MyInstanceofObject[Symbol.hasInstance] = function(instance) {
  return instance instanceof Array;
};

console.log([] instanceof MyInstanceofObject); // 输出 true
console.log({} instanceof MyInstanceofObject); // 输出 false

4.总结

在这一章里我们了解了一下JavaScript中的Symbol数据类型，它是一种原始数据类型，可以用于创建唯一的、不可变的值。我们一起来总结一下Symbol包括了哪些特点：

唯一属性名 ：Symbol常用于对象属性名，以避免属性名冲突，这对于库和框架的开发非常有用。
内置 Symbol ：JavaScript内置了一些Symbol，用于定义对象的行为和特征，如Symbol.iterator、Symbol.toStringTag等。
元编程 ：Symbol允许进行元编程，即编写能够操作或定义其他代码的代码，例如自定义对象的行为。
避免属性被遍历 ：Symbol属性不会被一般的属性遍历方法（如for...in）枚举，可用于定义对象的内部属性。

Symbol为JavaScript引入了更多的灵活性和可扩展性，使代码更具控制力，更容易适应各种编程需求。在我们的使用过程中，它是一种强大的工具，特别在处理对象属性、消除命名冲突和元编程方面非常有用。了解和熟练使用Symbol将可以使我们的JavaScript编程变得更加高效和可维护~

那么这篇文章到这里就结束啦~

如果你想了解更多这类文章，点赞关注作者更新更多后续~