看Iterator与for...of，构建JavaScript的iterator方法

Iterator与for...of

Iterator是一个接口，它定义了如何遍历一个数据结构。for...of循环是一种语法糖，它可以让我们使用Iterator来遍历数据结构。

const iterable = [1, 2, 3];

for (const value of iterable) {
  console.log(value);
}

输出：

1
2
3

for...of循环内部，会先调用iterable对象的Symbol.iterator方法来获取一个Iterator对象，然后不断调用Iterator对象的next方法来获取下一个值。如果next方法返回一个{done: true}对象，则表示遍历结束。

构建自己的iterator方法

我们可以为自己的数据结构构建一个iterator方法，这样就可以使用for...of循环来遍历它们了。

class MyArray {
  constructor(...elements) {
    this.elements = elements;
  }

  [Symbol.iterator]() {
    let index = 0;

    return {
      next() {
        if (index < this.elements.length) {
          return { value: this.elements[index++], done: false };
        } else {
          return { done: true };
        }
      }
    };
  }
}

const myArray = new MyArray(1, 2, 3);

for (const value of myArray) {
  console.log(value);
}

输出：

1
2
3

我们也可以使用Generator函数来构建iterator方法。Generator函数是一种特殊的函数，它可以暂停执行并返回一个值。

function* myGenerator() {
  yield 1;
  yield 2;
  yield 3;
}

const myArray = [...myGenerator()];

console.log(myArray);

输出：

[1, 2, 3]

Generator函数内部，使用yield来返回一个值，这样就可以暂停函数的执行。当调用next方法时，函数会继续执行并返回下一个值。如果函数执行完毕，则next方法会返回一个{done: true}对象。

总结

Iterator和for...of是ES6中引入的新语法，它们可以帮助我们更方便地遍历数据结构。我们可以为自己的数据结构构建一个iterator方法，这样就可以使用for...of循环来遍历它们了。Generator函数是一种特殊的函数，它可以暂停执行并返回一个值，也可以用来构建iterator方法。