ES7 如何使用 Symbol.iterator 迭代器实现数组遍历

在 ES6 中，我们已经可以使用 for...of 循环来遍历数组，但是在 ES7 中，我们还可以使用 Symbol.iterator 迭代器来实现数组遍历。本文介绍了 ES7 中如何使用 Symbol.iterator 迭代器实现数组遍历，并提供示例代码。

什么是 Symbol.iterator 迭代器

在介绍 Symbol.iterator 迭代器之前，首先我们需要了解一下 ES6 中引入的 Symbol 类型。Symbol 类型是一种新的原始数据类型，它可以用来唯一标识某个属性或方法。每个 Symbol 类型的值都是唯一的，而且不会跟任何其他值相等。

而 Symbol.iterator 就是 Symbol 类型中的一种特殊值，它可以让我们自定义迭代器。在 JavaScript 中，数组、Set、Map、字符串等内置数据类型都已经实现了 Symbol.iterator 方法，所以我们可以使用 for...of 循环来遍历它们。

使用 Symbol.iterator 迭代器遍历数组

现在我们来看一下如何使用 Symbol.iterator 迭代器来遍历数组。我们可以首先定义一个数组，并且在其原型上添加一个 Symbol.iterator 方法：

const arr = [1, 2, 3];
arr.__proto__[Symbol.iterator] = function() {
  let index = 0;
  const data = this;
  return {
    next() {
      if (index < data.length) {
        return {
          value: data[index++],
          done: false
        }
      } else {
        return {
          value: undefined,
          done: true
        }
      }
    }
  };
};

这里我们先通过 arr.proto 来获取数组的原型，然后在原型上通过 Symbol.iterator 方法来定义我们自己的迭代器。在这个迭代器中，我们定义了一个 index 变量用来记录当前遍历到的元素的索引位置，然后通过 data 变量来引用当前数组的实例，最后通过 return 返回一个对象，这个对象包含一个 next 方法，在每次遍历时调用 next 方法来获取下一个值。

最后，我们就可以通过 for...of 循环来遍历这个数组了：

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

除了数组外，我们还可以在其他数据类型上定义自己的迭代器，比如 Set、Map、字符串等，方法大同小异。

为什么使用 Symbol.iterator 迭代器

使用 Symbol.iterator 迭代器可以让我们更加灵活地遍历数组或其他数据类型。我们可以根据自己的需求来定义迭代器的行为，比如可以实现只遍历数组中的偶数元素、倒序遍历数组等等。

同时，使用 Symbol.iterator 迭代器还可以使我们的代码逻辑更加清晰。相比于传统的 for 循环或 forEach 方法，使用 for...of 循环配合自定义迭代器以后，我们可以更加清晰地表达出“对于当前的这个数据类型，我要做的是遍历它”这个意思。

总结

在本文中，我们介绍了 ES7 中如何使用 Symbol.iterator 迭代器实现数组遍历，并提供了相关代码示例。通过这种方式，我们可以更加灵活地遍历数组或其他数据类型，并且能够使代码逻辑更加清晰。在实际开发中，我们可以根据自己的需求来定义迭代器的行为，以达到更好的效果。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/659f4615add4f0e0ff7f2d13