JavaScript可迭代对象详细介绍

在JavaScript中，迭代遍历数组或对象是非常常见的操作。ES6引入了Iterator/Iterable，提供了有效的解决方案。在本文中，我们将学习JavaScript可迭代对象的详细介绍，包括Iterable/Iterator协议、遍历方法和示例。

Iterable/Iterator协议

Iterable/Iterator协议定义了JavaScript中的可迭代对象应该具有的结构。一个可迭代对象必须实现Symbol.iterator方法，该方法返回一个Iterator对象。而Iterator对象则需要实现next()方法，该方法返回一个包含value和done两个属性的对象。

以下是一个示例，通过Iterable/Iterator协议遍历数组：

const arr = [1, 2, 3, 4];
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: 4, done: false }
console.log(iterator.next()) // { value: undefined, done: true }

遍历方法

在ES6中，提供了三种遍历方法：

for...of

for...of循环遍历可迭代对象中的每一个值。和for...in循环不同，for...of只能遍历记录中的值，无法直接获得其索引。

以下是一个示例，通过for...of遍历数组：

const arr = [1, 2, 3, 4];
for (const value of arr) {
  console.log(value); // 1 2 3 4
}

forEach

forEach方法遍历数组中每一个元素并执行一个回调函数。和for...of循环不同，forEach可以直接传递一个回调函数而无需使用变量进行遍历。

以下是一个示例，通过forEach遍历数组：

const arr = [1, 2, 3, 4];
arr.forEach((value) => console.log(value)); // 1 2 3 4

遍历器函数

在Iterable/Iterator协议中，除了Symbol.iterator，还可以定义需要用于遍历的函数。例如，如果我们定义一个函数来返回当前数组之后的每一个元素：

const arr = [1, 2, 3, 4];
arr[Symbol.iterator] = function* () {
  let index = 0;
  while (index < this.length) {
    yield this[index++];
  }
  yield 'end of array';
};
for (const value of arr) {
  console.log(value); // 1 2 3 4 end of array
}

示例

以下是一个更完整的示例，展示了如何自定义可迭代对象并基于它定义一个简单的迭代器。

class Count {
  constructor(limit) {
    this.limit = limit;
  }
  [Symbol.iterator]() {
    let count = 0;
    return {
      next: () => {
        if (count < this.limit) {
          const value = count++;
          return { value, done: false };
        } else {
          return { value: undefined, done: true };
        }
      }
    };
  }
}
for (const value of new Count(5)) {
  console.log(value); // 0 1 2 3 4
}

我们定义了Count类，其中包含一个limit属性，它将指定迭代器生成的值的最大数量。接下来，我们定义了一个名为Symbol.iterator的方法，该方法返回一个对象，该对象包含一个next()方法，该方法返回一个包含value和done属性的对象。done属性的值取决于我们是否已经生成了足够的值。最后，我们在Count实例上使用for...of循环来遍历生成的数值。