JavaScript Iterable Objects

Iterabele objecten zijn objecten die doorlopend kunnen worden (zoals arrays).

Iterabele objecten kunnen worden benaderd met eenvoudige en efficiënte code.

Iterabele objecten kunnen worden gebruikt for..of De lus voert iteratie uit.

for..of lus

for..of zinnen worden gebruikt om de elementen van een iterable object te doorlopen.

syntaxis

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

Iteratie

Iteratie is gemakkelijk te begrijpen.

Het betekent enkel het doorlopen van een reeks elementen.

Hier zijn enkele eenvoudige voorbeelden:

  • Itereer door de string
  • Itereer door het array

Itereer door de string

可以使用 for..of Itereer door de elementen van de string:

Voorbeeld

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

Probeer het zelf

Itereer door het array

可以使用 for..of Itereer door de elementen van het array:

Voorbeeld 1

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

Probeer het zelf

Voorbeeld 2

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

Probeer het zelf

Itereer door de Set

可以使用 for..of Itereer door de elementen van de Set:

Voorbeeld

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

Probeer het zelf

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

遍历 Map

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

Voorbeeld

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

Probeer het zelf

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

Voorbeeld

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

Probeer het zelf

问题是：

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

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

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

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

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

for (const x van iterable});

Voorbeeld

// Maak een object
myNumbers = {};
// Maak het iterable
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 je for..of gebruiken
for (const num of myNumbers) {
  // Iedere code
}

Probeer het zelf

De methode Symbol.iterator wordt for..of Automatisch oproepen.

Maar we kunnen het ook handmatig aanroepen:

Voorbeeld

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

Probeer het zelf