Objets itérables JavaScript

Un objet itérable est un objet qui peut être itéré (comme un tableau).

Un objet itérable peut être accédé de manière simple et efficace par le code.

Un objet itérable peut être utilisé for..of La boucle itère.

Boucle for..of

for..of Les instructions sont utilisées pour parcourir les éléments d'un objet itérable.

Syntaxe

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

Itération

L'itération est facile à comprendre.

Cela signifie simplement parcourir une série d'éléments.

Voici quelques exemples simples :

  • Parcourir une chaîne
  • Parcourir un tableau

Parcourir une chaîne

可以使用 for..of Parcourir les éléments d'une chaîne :

Exemple

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

Essayez vous-même

Parcourir un tableau

可以使用 for..of Parcourir les éléments d'un tableau :

Exemple 1

const letters = ["a","b","c"];
for (const x of letters) {
  // 要执行的代码块
}

Essayez vous-même

Exemple 2

const numbers = [2,4,6,8];
for (const x of numbers) {
  // 要执行的代码块
}

Essayez vous-même

Parcourir un Set

可以使用 for..of Parcourir les éléments d'un Set :

Exemple

const letters = new Set(["a","b","c"]);
for (const x of letters) {
  // 要执行的代码块
}

Essayez vous-même

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

遍历 Map

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

Exemple

const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
});
for (const x of fruits) {
  // 要执行的代码块
}

Essayez vous-même

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, ...：

Exemple

// 自定义可迭代对象
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

Essayez vous-même

问题是：

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

支持 for..of 的可迭代对象

JavaScript 可迭代对象是拥有 Symbol.iterator 的对象。

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

可以使用以下代码对可迭代对象进行迭代：

for (const x of iterable}) { }

Exemple

// Créer un objet
myNumbers = {};
// Le rendre itérable
myNumbers[Symbol.iterator] = function() {
  let n = 0;
  done = false;
  return {
    next() {
      n += 10;
      if (n == 100) { done = true; }
      return { value: n, done: done };
    }
  };
};
// Maintenant, vous pouvez utiliser for..of
for (const num of myNumbers) {
  // Code arbitraire
}

Essayez vous-même

La méthode Symbol.iterator sera for..of Appel automatique.

Mais nous pouvons également l'appeler manuellement :

Exemple

let iterator = myNumbers[Symbol.iterator]();
while (true) {
  const result = iterator.next();
  if (result.done) break;
  // Code arbitraire
}

Essayez vous-même