25. 同步迭代

• 数据来源： 一方面，数据有各种形式和大小。在 JavaScript 的标准库中，有线性数据结构 Array，有序集合 Set（元素按添加时间排序），有序字典 Map（条目按添加时间排序）等等。在库中，您还可以找到树形数据结构等。
• 数据消费者： 另一方面，你有一整套机制和算法，只需要按顺序访问：一次一个，再加上告诉我什么时候完成的方法。示例包括for-of循环并扩展到数组字面值（通过...）。

JavaScript 实现接口的方式

在 JavaScript 中，如果一个对象具有接口声明的所有方法，即为 实现 该接口。本章中提到的接口仅存在于ECMAScript规范中。

• 如果您开发新的数据结构，则只需要实现Iterable，就可以立即应用大量工具。
• 如果编写使用迭代的代码，它会自动使用许多数据源。

• iterable 接口是一个对象，其内容可以顺序遍历。
• 迭代器 是用于遍历的指针。

interface Iterable<T> {
  [Symbol.iterator]() : Iterator<T>;
}
interface Iterator<T> {
  next() : IteratorResult<T>;
}
interface IteratorResult<T> {
  value: T;
  done: boolean;
}

• 您可以通过键为 Symbol.iterator 的方法向 Iterable 接口请求迭代器。
• Iterator 通过其方法 .next() 返回迭代值。
• 这些值不会直接返回，而是包含在具有两个属性的对象中：
  • .value 是迭代值。
  • .done 表示是否已达到迭代结束。在最后一次迭代值和 false 之后是true。

• 这是使用迭代协议的示例：

  const iterable = ['a', 'b'];
  // The iterable is a factory for iterators:
  const iterator = iterable[Symbol.iterator]();
  // Call .next() until .done is true:
  assert.deepEqual(
    iterator.next(), { value: 'a', done: false });
  assert.deepEqual(
    iterator.next(), { value: 'b', done: false });
  assert.deepEqual(
    iterator.next(), { value: undefined, done: true });
  

• 以下代码演示了如何使用while循环迭代一个迭代：

  function logAll(iterable) {
    const iterator = iterable[Symbol.iterator]();
    while (true) {
      const {value, done} = iterator.next();
      if (done) break;
      console.log(value);
    }
  }
  logAll(['a', 'b']);
  // Output:
  // 'a'
  // 'b'
  

练习：手动使用同步迭代

exercises/sync-iteration-use/sync_iteration_manually_exrc.mjs

• JavaScript 的数组是可迭代的。这使我们可以使用for-of循环：

  const myArray = ['a', 'b', 'c'];
  for (const x of myArray) {
    console.log(x);
  }
  // Output:
  // 'a'
  // 'b'
  // 'c'
  

• 通过数组模式进行解构（稍后解释）也使用了迭代：

  const [first, second] = myArray;
  assert.equal(first, 'a');
  assert.equal(second, 'b');
  

• JavaScript 的 Set 数据结构是可迭代的。这意味着，for-of有效：

  const mySet = new Set().add('a').add('b').add('c');
  for (const x of mySet) {
    console.log(x);
  }
  // Output:
  // 'a'
  // 'b'
  // 'c'
  

• 和数组解构一样：

  const [first, second] = mySet;
  assert.equal(first, 'a');
  assert.equal(second, 'b');
  

• 以下内置数据源是可迭代的：
  • Arrays
  • Strings
  • Maps
  • Sets
  • （浏览器：DOM 数据结构）
• 要迭代对象的属性，你需要一些“帮手”，诸如 Object.keys() 和 Object.entries() 。这很必要，因为属性存在于与数据结构级别互补的不同级别。

• 通过数组模式进行解构：

  const [x,y] = iterable;
  

• for-of循环：

  for (const x of iterable) { /*···*/ }
  

• Array.from()：

  const arr = Array.from(iterable);
  

• 将（通过...）传播到数组和函数调用中：

  const arr = [...iterable];
  func(...iterable);
  

• new Map()和new Set()：

  const m = new Map(iterableOverKeyValuePairs);
  const s = new Set(iterableOverElements);
  

• Promise.all()和Promise.race()：

  const promise1 = Promise.all(iterableOverPromises);
  const promise2 = Promise.race(iterableOverPromises);
  

• yield*：

  function* generatorFunction() {
    yield* iterable;
  }