JavaScript 可迭代对象

可迭代对象（Iterables）是可以使用 for..of 进行迭代的对象。

从技术上讲，可迭代对象必须实现 Symbol.iterator 方法。

遍历字符串

你可以使用 for..of 循环来遍历字符串的元素：

实例

for (const x of "W3School") {
  // 要执行的代码块
}

亲自试一试

遍历数组

您可以使用 for..of 循环来遍历数组中的元素：

实例

for (const x of [1,2,3,4,5]) {
  // 要执行的代码块
}

亲自试一试

JavaScript 迭代器

迭代器协议定义了如何从一个对象中生成一系列的值。

当一个对象实现了 next() 方法时，它就成为了一个迭代器。

next() 方法必须返回一个带有两个属性的对象：

  • value（下一个值）
  • done（true 或 false）
value

迭代器返回的值

（如果 done 为 true，则可以省略）
done

如果迭代器已经完成，则返回 true

如果迭代器产生了一个新值，则返回 false

自制的可迭代对象

这个可迭代对象会无限返回：10、20、30、40...... 当每次调用 next() 时：

实例

// 自制的可迭代对象
function myNumbers() {
  let n = 0;
  return {
    next: function() {
      n += 10;
      return {value:n, done:false};
    }
  };
}

// 创建可迭代对象
const n = myNumbers();
n.next(); // Returns 10
n.next(); // Returns 20
n.next(); // Returns 30

亲自试一试

注意：自制的可迭代对象存在问题，它不支持 JavaScript 中的 for..of 语句。

JavaScript 中的可迭代对象是具有 Symbol.iterator 属性的对象。

Symbol.iterator 是一个返回 next() 函数的函数。

可以使用以下代码迭代可迭代对象：for (const x of iterable) { }

实例

// 创建对象
myNumbers = {};

// 使其可迭代
myNumbers[Symbol.iterator] = function() {
  let n = 0;
  done = false;
  return {
    next() {
      n += 10;
      if (n == 100) {done = true}
      return {value:n, done:done};
    }
  };
}

现在您可以使用 for..of 了：

for (const num of myNumbers) {
  // 这里可写任何代码
}

亲自试一试

Symbol.iterator 方法会被 for..of 自动调用。

但是我们也可以手动调用它：

实例

let iterator = myNumbers[Symbol.iterator]();

while (true) {
  const result = iterator.next();
  if (result.done) break;
  // 这里可写任何代码
}

亲自试一试