ES6 是 JavaScript 语言的一个重大升级，其中引入了迭代器和生成器的概念。在前端开发中，对迭代器和生成器的掌握，可以极大地提高代码的可读性和可维护性。
迭代器
迭代器是一种让对象能够按照某种顺序依次访问每一个元素的方法。ES6 中，迭代器是一个对象，它能够遍历一个集合，并访问集合中的每个元素，而不暴露集合的内部结构。
迭代器对象必须实现一个 next() 方法，该方法返回一个包含 value 和 done 两个属性的对象。value 表示当前元素的值，done 表示是否已经迭代完所有元素。
下面是一个简单的例子，实现了一个数组的迭代器：
// javascriptcn.com 代码示例
const arr = [1, 2, 3, 4, 5];
function createIterator(array) {
let idx = 0;
return {
next() {
return idx < array.length
? { value: array[idx++], done: false }
: { value: undefined, done: true };
}
};
}
const iterator = createIterator(arr);
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()); // { value: undefined, done: true }生成器
生成器是一种用于生成迭代器的函数。ES6 中，使用关键字 function* 声明生成器函数，生成器函数会返回一个迭代器对象。在生成器函数中，使用 yield 关键字可以将具有特定值的元素返回给迭代器的调用者。
生成器函数可以暂停和恢复其执行状态，这使得生成器函数可以更加灵活地控制迭代过程。例如，可以使用 yield 暂停生成器函数的执行，直到迭代器调用 next() 方法。
下面是一个简单的例子，演示如何使用生成器函数生成一个斐波那契数列：
// javascriptcn.com 代码示例
function* fibonacci() {
let [pre, cur] = [0, 1];
while (true) {
[pre, cur] = [cur, pre + cur];
yield cur;
}
}
const iterator = fibonacci();
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: 5, done: false }
console.log(iterator.next()); // { value: 8, done: false }总结
ES6 中引入的迭代器和生成器是非常强大同时易于使用的工具。它们可以让我们更加高效地遍历集合类型的数据。在前端开发中，我们可以将其应用于数组、映射等集合类型的数据结构中，以更好地组织和管理代码。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652c987c7d4982a6ebe41f94