ES6之迭代器(Iterator)

引言

ES6引入了迭代器的概念，这个特性为JavaScript带来了更强大的迭代和异步编程能力。本文将深入探讨ES6的迭代器，介绍其概念、用法以及在实际开发中的应用。

迭代器（Iterator）是ES6引入的一种新的数据结构，它提供了一种统一的遍历机制，可以用来遍历各种不同类型的数据。迭代器的概念、作用和遍历原理如下所述：

1. 概念

迭代器是一种对象，它提供了一种顺序访问集合中每个元素的方式，而不暴露集合内部的表示。通过调用迭代器的next()方法，可以依次获取集合中的每个元素，并返回一个包含value和done属性的对象。value表示当前元素的值，done表示是否已经遍历完所有元素。

2. 作用

迭代器提供了一种统一的遍历机制，使得我们可以使用相同的方式来访问不同类型的数据结构。无论是数组、字符串、Set、Map还是自定义对象，只要实现了迭代器接口，就可以使用for...of循环或者手动调用next()方法来进行遍历。

3. 遍历原理

当我们使用for...of循环或者手动调用next()方法时，迭代器会按照预定的顺序依次返回集合中的每个元素。具体原理如下：

• 首先，在需要进行遍历操作时，我们通过调用集合对象上的Symbol.iterator方法获取到该集合对象对应的默认迭代器。
• 然后，在每次调用next()方法时，迭代器会执行相应的操作，并返回一个包含value和done属性的对象。
• 如果done为false，则表示还有更多的元素需要遍历，此时value属性表示当前遍历到的值。
• 如果done为true，则表示已经遍历完所有元素，此时value属性为undefined。

4. 使用示例

示例一：

letarr= [1, 2, 3];
letiterator=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 }

在上面的例子中，我们首先通过调用数组arr上的Symbol.iterator方法获取到数组的默认迭代器。然后，我们通过调用next()方法依次获取数组中的每个元素。在每次调用next()方法时，迭代器会返回一个包含当前元素值和是否遍历完所有元素的对象。

通过迭代器，我们可以方便地遍历不同类型的数据结构，并且可以自定义实现迭代器接口来实现特定的遍历方式。这为我们在实际开发中提供了更大的灵活性和便利性。

ES6 规定，默认的 Iterator 接口部署在数据结构的Symbol.iterator属性，或者说，一个数据结构只要具有Symbol.iterator属性，就可以认为是“可遍历的”（iterable）。Symbol.iterator属性本身是一个函数，就是当前数据结构默认的遍历器生成函数。执行这个函数，就会返回一个遍历器。至于属性名Symbol.iterator，它是一个表达式，返回Symbol对象的iterator属性，这是一个预定义好的、类型为 Symbol 的特殊值，所以要放在方括号内。

示例二：

自定义迭代器遍历斐波那契数列：

letfibonacci= {
  [Symbol.iterator]() {
letpre=0,
cur=1return {
next() {
        [pre, cur] = [cur, pre+cur]
return { value: cur, done: false }
      }
    }
  }
}
for (letnumoffibonacci) {
if (num>1000) breakconsole.log(num)
}
// 输出：// 1// 2// 3// 5// ...

在这个示例中，我们通过自定义迭代器接口来遍历斐波那契数列。在每次迭代时，迭代器会计算下一个斐波那契数，并返回给遍历循环。

简单原理实现示例

functioncreateIterator(arr) {
letindex=0return {
next() {
if (index<arr.length) {
return { value: arr[index++], done: false }
      } else {
return { value: undefined, done: true }
      }
    }
  }
}
letiterator=createIterator([1, 2, 3])
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 }

在这个示例中，我们通过自定义函数createIterator来实现一个迭代器。该函数返回一个包含next()方法的对象，每次调用next()方法时，会依次返回数组中的每个元素。