JavaScript Itererbare objekter

Itererbare objekter er objekter, der kan itereres over (f.eks. arrayer).

Itererbare objekter kan tilgås med simpel og effektiv kode.

Itererbare objekter kan bruges for..of Løkken udfører iteration.

for..of-løkke

for..of bruges til at gennemløbe elementerne i en iterabel objekt.

syntaks

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

Iteration

Iteration er nem at forstå.

Det betyder bare at gennemløbe en række elementer.

Her er nogle enkle eksempler:

  • Gennemløb streng
  • Gennemløb array

Gennemløb streng

可以使用 for..of Gennemløb strengens elementer:

Eksempel

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

Prøv det selv

Gennemløb array

可以使用 for..of Gennemløb arrayets elementer:

Eksempel 1

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

Prøv det selv

Eksempel 2

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

Prøv det selv

Gennemløb Set

可以使用 for..of Gennemløb Set's elementer:

Eksempel

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

Prøv det selv

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

遍历 Map

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

Eksempel

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

Prøv det selv

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

Eksempel

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

Prøv det selv

问题是：

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

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

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

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

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

for (const x af iterable}) { }

Eksempel

// Opret en objekt
myNumbers = {};
// Gør det iterabelt
myNumbers[Symbol.iterator] = function() {
  let n = 0;
  done = false;
  return {
    next() {
      n += 10;
      if (n == 100) { done = true; }
      return { value: n, done: done };
    }
  };
};
// Nu kan vi bruge for..of
for (const num of myNumbers) {
  // Enhver kode
}

Prøv det selv

Symbol.iterator metoden vil blive for..of Automatisk kald

Men vi kan også kalde det manuelt:

Eksempel

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

Prøv det selv