JavaScript 可迭代对象

可迭代对象是可以被迭代的对象(如数组)。

可迭代对象可以通过简单高效的代码访问。

可迭代对象可以使用 for..of 循环进行迭代。

for..of 循环

for..of 语句用于遍历可迭代对象的元素。

语法

for (variable of iterable) {
  // 要执行的代码块
}

迭代

迭代很容易理解。

它只是意味着遍历一系列元素。

下面是一些简单的例子:

  • 遍历字符串
  • 遍历数组

遍历字符串

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

实例

const name = "W3Schools";

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

亲自试一试

遍历数组

可以使用 for..of 循环遍历数组的元素:

例子 1

const letters = ["a","b","c"];

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

亲自试一试

例子 2

const numbers = [2,4,6,8];

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

亲自试一试

遍历 Set

可以使用 for..of 循环遍历 Set 的元素:

实例

const letters = new Set(["a","b","c"]);

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

亲自试一试

注释:我们将在后续章节中详细介绍 Set 和 Map。

遍历 Map

可以使用 for..of 循环遍历 Map 的元素:

实例

const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

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

亲自试一试

JavaScript 迭代器

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

当对象实现了 next() 方法时,它就成为迭代器

next() 方法必须返回一包含两个属性的对象:

  • value(下一个值)
  • done(true 或 false)
value

迭代器返回的值。

如果 done 为 true,则可以省略。

done

如果迭代器已完成,则为 true。

如果迭代器生成了新值,则为 false。

注意:

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

字符串、数组、TypedArray、Map 和 Set 都是可迭代对象,因为它们的原型对象具有 Symbol.iterator 方法。

自定义可迭代对象

下例展示了一个自定义的可迭代对象,它永远不会结束,每次调用 next() 都会返回 10, 20, 30, 40, ...:

实例

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

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

亲自试一试

问题是:

自定义的可迭代对象不支持 JavaScript 的 for..of 语句。

支持 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;
  // 任意代码
}

亲自试一试