JavaScript-Iterierbare-Objekte

Iterierbare Objekte sind Objekte, die iteriert werden können (z.B. Arrays).

Iterierbare Objekte können durch einfache und effiziente Codezeilen erreicht werden.

Iterierbare Objekte können for..of Die Schleife führt Iterationen durch.

for..of-Schleife

for..of Verwendung von Anweisungen, um die Elemente eines iterierbaren Objekts zu durchlaufen.

Syntax

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

Iteration

Iteration ist leicht zu verstehen.

Es bedeutet nur, eine Reihe von Elementen zu durchlaufen.

Hier sind einige einfache Beispiele:

  • Durchlaufe den String
  • Durchlaufe das Array

Durchlaufe den String

可以使用 for..of Durchlaufe die Elemente des Strings:

Beispiel

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

Versuchen Sie es selbst

Durchlaufe das Array

可以使用 for..of Durchlaufe die Elemente des Arrays:

Beispiel 1

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

Versuchen Sie es selbst

Beispiel 2

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

Versuchen Sie es selbst

Durchlaufe das Set

可以使用 for..of Durchlaufe die Elemente des Sets:

Beispiel

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

Versuchen Sie es selbst

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

遍历 Map

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

Beispiel

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

Versuchen Sie es selbst

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

Beispiel

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

Versuchen Sie es selbst

问题是：

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

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

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

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

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

for (const x von iterable}) { }

Beispiel

// Erstellen Sie ein Objekt
myNumbers = {};
// Mach es iterierbar
myNumbers[Symbol.iterator] = function() {
  let n = 0;
  done = false;
  return {
    next() {
      n += 10;
      if (n == 100) { done = true; }
      return { value: n, done: done };
    }
  };
};
// Jetzt kann man for..of verwenden
for (const num of myNumbers) {
  // Beliebige Code
}

Versuchen Sie es selbst

Die Symbol.iterator-Methode wird for..of Automatisch aufrufen.

Aber wir können es auch manuell aufrufen:

Beispiel

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

Versuchen Sie es selbst