在 JavaScript ES6 中，Iterators 和 Generators 是两个非常有用的概念和技术，它们可以使我们的代码更加简洁、优雅、可读性更强，并且还可以提供更好的性能和灵活性。本文将详细介绍 Iterators 和 Generators 的概念、用法、示例代码以及一些指导意义。
概念介绍
迭代器（Iterators）：是一种数据结构，它提供了一种遍历数据集合的通用接口，也就是说，我们可以通过迭代器来依次访问集合中的每一个元素，而不必关心这些元素的具体类型和内部结构。
生成器（Generators）：是一种特殊的函数，它可以在遍历时动态生成值序列，并且可以暂停和恢复执行状态，从而可以更加灵活和高效地生成大量的数据。
用法和示例代码
迭代器
在 JavaScript 中，我们可以使用迭代器来遍历以下三种数据类型的集合：
- 数组（Array）
- 字符串（String）
- 映射（Map）
而在 ES6 中，我们可以使用 for...of 循环来遍历迭代器，例如：
// www.javascriptcn.com code example
const arr = [1, 2, 3, 4, 5];
const it = arr[Symbol.iterator]();
for (const item of it) {
console.log(item);
}
// Output:
// 1
// 2
// 3
// 4
// 5在上面的示例中，我们首先定义了一个包含 5 个元素的数组 arr，然后通过 arr[Symbol.iterator]() 方法来获取数组的迭代器对象 it，最后使用 for...of 循环来遍历迭代器，并将每个元素打印到控制台中。
除了遍历数组之外，我们还可以使用迭代器来遍历字符串和映射，例如：
// www.javascriptcn.com code example
const str = "Hello World!";
const strIt = str[Symbol.iterator]();
for (const char of strIt) {
console.log(char);
}
// Output:
// H
// e
// l
// l
// o
//
// W
// o
// r
// l
// d
// !
const map = new Map([
["key1", "value1"],
["key2", "value2"],
["key3", "value3"]
]);
const mapIt = map[Symbol.iterator]();
for (const [key, value] of mapIt) {
console.log(`${key}: ${value}`);
}
// Output:
// key1: value1
// key2: value2
// key3: value3在上面的示例中，我们分别使用迭代器来遍历字符串和映射，并分别打印每个字符和每个键值对到控制台中。
值得注意的是，我们还可以使用 Array.from() 方法来将迭代器转换为数组，例如：
const str = "Hello World!"; const strIt = str[Symbol.iterator](); const chars = Array.from(strIt); console.log(chars); // Output: ["H", "e", "l", "l", "o", " ", "W", "o", "r", "l", "d", "!"]
在上面的示例中，我们首先定义了一个字符串 str 和它的迭代器对象 strIt，然后使用 Array.from() 方法来将迭代器转换为数组，并将结果保存到 chars 变量中，最后将结果打印到控制台中。
生成器
在 JavaScript 中，我们可以使用生成器来创建一个可以生成多个值的函数，例如：
// www.javascriptcn.com code example
function* generateNumbers() {
let i = 0;
while (true) {
yield i++;
}
}
const numbers = generateNumbers();
console.log(numbers.next().value);
// Output: 0
console.log(numbers.next().value);
// Output: 1
console.log(numbers.next().value);
// Output: 2
console.log(numbers.next().value);
// Output: 3
console.log(numbers.next().value);
// Output: 4
// ...在上面的示例中，我们首先定义了一个生成器函数 generateNumbers()，它使用 yield 关键字来暂停函数的执行，并返回一个值。然后我们定义了一个 numbers 变量，并将函数调用的结果保存到其中，接着我们使用 numbers.next() 方法来获取生成器函数的返回值，并将其中的 value 属性打印到控制台中，最终生成器函数会无限循环地返回自增的数字序列。
与迭代器不同的是，生成器函数可以在函数执行中间暂停并返回一个值，还可以在下一次调用时恢复函数的执行状态，这使得我们可以更加灵活和高效地生成大量的数据。
除了生成数字序列之外，我们还可以使用生成器来生成协程、异步操作、数据结构等等，例如：
// www.javascriptcn.com code example
function* range(start, end, step = 1) {
for (let i = start; i < end; i += step) {
yield i;
}
}
const numbers = range(0, 10, 2);
console.log(Array.from(numbers));
// Output: [0, 2, 4, 6, 8]
function* map(iterable, mapper) {
for (const item of iterable) {
yield mapper(item);
}
}
const arr = [1, 2, 3, 4, 5];
const doubled = map(arr, (x) => x * 2);
console.log(Array.from(doubled));
// Output: [2, 4, 6, 8, 10]在上面的示例中，我们分别定义了两个生成器函数 range() 和 map()，它们分别用于生成数字序列和映射数据集合，并将结果暴露给外部代码进行处理。
指导意义
在实际开发中，Iterators 和 Generators 可以帮助我们优化代码结构、提高运行效率和可维护性，并且能够提供更灵活的数据处理和操作方式。因此，在使用和设计数据结构时，我们应该考虑到它们提供的迭代器和生成器接口，并尝试使用它们来简化代码，提高代码质量。
具体来说，我们应该注意以下几点：
- 在需要遍历集合时，优先考虑使用迭代器接口，而不是显式遍历集合。
- 在需要生成大量数据时，优先考虑使用生成器函数，而不是实现复杂的逻辑和算法。
- 在设计数据结构时，应该优先考虑添加迭代器和生成器接口，以提高数据的可维护性和代码质量。
- 在使用迭代器和生成器时，应该仔细考虑生成的数据类型和格式，并尽量避免生成过于庞大和复杂的数据集合。
总之，在日常开发中，我们应该充分发挥迭代器和生成器的优势和特色，并尽可能地使用它们来简化代码和提高可读性、可维护性和性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67cfca31e46428fe9ebc6ac3