前言
ES7 Iterator 和 for…of 是 ECMAScript 6 标准中引入的新特性，它们为 JavaScript 中的集合（数组、字符串、Map、Set 等）提供了一种统一的遍历方式。相比于传统的 for 循环或 forEach，它们具有更好的可读性和可维护性，同时还支持异步操作。
本文将深入探讨 ES7 Iterator 和 for…of 的实现原理，介绍常见的错误及解决方案，并通过示例代码帮助读者更好地理解这两个特性。
ES7 Iterator
ES7 Iterator 是一种用于遍历集合的接口，它定义了一个 next() 方法，该方法返回一个包含 value 和 done 两个属性的对象。其中 value 表示当前遍历到的元素，done 表示是否已经遍历完毕。
下面是一个简单的示例代码，演示了如何使用 ES7 Iterator 遍历一个数组：
const arr = [1, 2, 3];
const iterator = arr[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 }在上面的代码中，我们首先通过数组的 Symbol.iterator 属性获取到一个 Iterator 对象，然后不断调用它的 next() 方法，直到 done 属性为 true，表示遍历结束。
需要注意的是，ES7 Iterator 只能遍历集合中的值，而不能修改或删除它们。如果需要修改或删除集合中的元素，应该使用其他方法（如 splice、delete 等）。
for…of
for…of 是一种基于 ES7 Iterator 接口的循环语句，它可以遍历任何实现了 Iterator 接口的集合。与传统的 for 循环或 forEach 相比，for…of 具有更好的可读性和可维护性，同时还支持异步操作。
下面是一个简单的示例代码，演示了如何使用 for…of 遍历一个数组：
const arr = [1, 2, 3];
for (const item of arr) {
console.log(item);
}在上面的代码中，我们使用 for…of 循环遍历了整个数组，并打印出了每个元素的值。
需要注意的是，for…of 循环只能遍历集合中的值，而不能获取它们的索引或键名。如果需要获取索引或键名，应该使用其他方法（如 for 循环、forEach、Map 的 keys 方法等）。
常见错误及解决方案
在使用 ES7 Iterator 和 for…of 时，可能会遇到一些常见的错误。下面我们将介绍这些错误及解决方案。
错误 1：使用非集合对象
ES7 Iterator 和 for…of 只能用于遍历集合对象，如果使用非集合对象会导致错误。
例如，下面的代码尝试使用 for…of 遍历一个数字，结果会抛出 TypeError 错误：
const num = 123;
for (const item of num) {
console.log(item);
}
// TypeError: num is not iterable解决方案：将数字包装成集合对象，例如使用数组或字符串来表示数字，然后再使用 for…of 进行遍历。
错误 2：未实现 Iterator 接口
ES7 Iterator 只能遍历实现了 Iterator 接口的集合对象，如果集合对象未实现该接口，会导致错误。
例如，下面的代码尝试使用 for…of 遍历一个普通对象，结果会抛出 TypeError 错误：
const obj = { a: 1, b: 2, c: 3 };
for (const item of obj) {
console.log(item);
}
// TypeError: obj is not iterable解决方案：为集合对象实现 Iterator 接口，即定义一个 next() 方法并返回包含 value 和 done 两个属性的对象。
下面是一个示例代码，演示了如何为一个普通对象实现 Iterator 接口：
const obj = { a: 1, b: 2, c: 3 };
obj[Symbol.iterator] = function() {
const keys = Object.keys(this);
let index = 0;
return {
next: () => {
if (index < keys.length) {
const key = keys[index++];
return { value: this[key], done: false };
} else {
return { value: undefined, done: true };
}
}
};
};
for (const item of obj) {
console.log(item);
}
// 1
// 2
// 3在上面的代码中，我们为普通对象 obj 定义了一个 next() 方法，并将其赋值给 Symbol.iterator 属性。在 next() 方法中，我们使用 Object.keys() 方法获取对象的所有键名，然后依次返回键名对应的值，并设置 done 属性表示是否遍历结束。
错误 3：重复使用 Iterator 对象
ES7 Iterator 对象只能遍历一次集合对象，如果重复使用会导致错误。
例如，下面的代码尝试使用同一个 Iterator 对象遍历两次数组，结果第二次遍历会直接跳过：
const arr = [1, 2, 3];
const iterator = arr[Symbol.iterator]();
for (const item of iterator) {
console.log(item);
}
// 1
// 2
// 3
for (const item of iterator) {
console.log(item);
}
// （没有输出）解决方案：每次遍历集合对象时都重新获取 Iterator 对象。
例如，下面的代码将在每次遍历数组时重新获取 Iterator 对象，并成功遍历整个数组两次：
const arr = [1, 2, 3];
for (const item of arr) {
console.log(item);
}
// 1
// 2
// 3
for (const item of arr) {
console.log(item);
}
// 1
// 2
// 3总结
ES7 Iterator 和 for…of 是 ECMAScript 6 标准中引入的新特性，它们为 JavaScript 中的集合提供了一种统一的遍历方式。本文深入探讨了 ES7 Iterator 和 for…of 的实现原理，介绍了常见的错误及解决方案，并通过示例代码帮助读者更好地理解这两个特性。我们希望本文能够对读者在前端开发中使用 ES7 Iterator 和 for…of 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65bafb78add4f0e0ff39146c