在 ES6 中，迭代器是指一种能够提供一个有序序列访问接口的对象。而生成器则是一个更具有可定制性和弹性的迭代器，它允许我们通过编写简单的函数来快速创建迭代器。
本文将介绍 ES6 中使用迭代器和生成器的基本概念、使用方法以及注意事项，帮助读者更好地掌握这个重要的功能。
迭代器基础
迭代器并不是 ES6 中新增的概念，早在 ES5 中就已经存在了。在 ES5 中，我们可以通过实现 next 方法来创建一个迭代器：
var myArray = [1, 2, 3, 4, 5];
var iterator = {
index: 0,
next: function() {
if (this.index < myArray.length) {
return { value: myArray[this.index++], done: false };
} else {
return { done: true };
}
}
};
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: 4, done: false }
console.log(iterator.next()); // { value: 5, done: false }
console.log(iterator.next()); // { done: true }在 ES6 中，我们可以使用 Symbol.iterator 来创建迭代器。一个实现了 Symbol.iterator 方法的对象会被视为可迭代的，可以使用 for-of 循环进行遍历：
var myArray = [1, 2, 3, 4, 5];
var iterator = {
index: 0,
[Symbol.iterator]: function() {
return {
index: 0,
next: function() {
if (this.index < myArray.length) {
return { value: myArray[this.index++], done: false };
} else {
return { done: true };
}
}
}
}
};
for (var item of iterator) {
console.log(item);
}
// 1
// 2
// 3
// 4
// 5上面的代码中，我们返回了一个实现了 next 方法的对象，它的结构和 ES5 中的迭代器实现是一致的，只不过我们把它封装在了 Symbol.iterator 方法中。
需要注意的是，如果我们想要使用 for-of 循环遍历一个对象，它必须实现了 Symbol.iterator 方法。否则，这个对象将不会被视为可迭代的。
生成器基础
生成器可以看作是一种特殊的函数，它允许我们通过编写简单的代码来快速创建迭代器。生成器使用 function* 句法来定义，其中包含了一个或多个由 yield 语句组成的代码块。
下面是一个简单的生成器示例，它会生成一个从 1 开始，每次自增 1 的无限循环序列：
function* infinite() {
var i = 1;
while (true) {
yield i++;
}
}
var iterator = infinite();
console.log(iterator.next().value); // 1
console.log(iterator.next().value); // 2
console.log(iterator.next().value); // 3
console.log(iterator.next().value); // 4和迭代器一样，我们可以使用 Symbol.iterator 方法来将生成器视为可迭代的对象：
function* infinite() {
var i = 1;
while (true) {
yield i++;
}
}
var iterator = {
[Symbol.iterator]: infinite
};
for (var item of iterator) {
if (item > 5) {
break;
}
console.log(item);
}
// 1
// 2
// 3
// 4
// 5注意，在上面的代码中，我们直接将 infinite 函数作为 Symbol.iterator 方法的返回值。这里我们不需要显式地创建一个新的对象。
生成器的高级用法
生成器提供了很多高级用法，例如可以使用 yield* 语句来代理对另一个迭代器或生成器的访问：
function* generate() {
yield* [1, 2, 3];
yield* 'abc';
yield* [4, 5, 6];
}
var iterator = generate();
console.log(iterator.next().value); // 1
console.log(iterator.next().value); // 2
console.log(iterator.next().value); // 3
console.log(iterator.next().value); // "a"
console.log(iterator.next().value); // "b"
console.log(iterator.next().value); // "c"
console.log(iterator.next().value); // 4
console.log(iterator.next().value); // 5
console.log(iterator.next().value); // 6在上面的代码中，我们定义了一个 generate 函数，它使用了三个 yield* 语句来代理对不同序列的访问。执行 generate 函数会产生一个包含了所有序列元素的迭代器。
另外，我们还可以使用 return 语句来终止生成器的执行并返回一个值：
function* generate() {
yield 1;
yield 2;
return 3;
yield 4;
}
var iterator = generate();
console.log(iterator.next().value); // 1
console.log(iterator.next().value); // 2
console.log(iterator.next().value); // 3
console.log(iterator.next().done); // true在上面的代码中，我们使用了 return 语句来终止了生成器的执行，并返回了一个值。在调用 next 方法时，done 属性会变成 true，表示生成器已经结束。
总结
本文介绍了 ES6 中迭代器和生成器的基本概念、使用方法以及高级用法。通过掌握这些知识点，我们可以更加灵活地处理迭代序列，有助于提高编程效率和代码质量。
需要注意的是，在使用迭代器和生成器时，我们需要保证代码的可读性和稳定性。尽管使用生成器可以让代码看起来更简洁，但过分的语法糖也可能导致代码逻辑不明确、难以调试。因此，在实际开发中我们需要权衡各种因素，选择最为适合的解决方案。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65accbcdadd4f0e0ff65e513