27.同步迭代

优质

小牛编辑

132浏览

2023-12-01

原文： http://exploringjs.com/impatient-js/ch_sync-iteration.html

27.1。什么是同步迭代？

同步迭代是一个 _ 协议 _（接口加上使用它们的规则），它连接 JavaScript 中的两组实体：

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

迭代协议通过接口Iterable连接这两组：数据源按顺序“通过它”传递它们的内容;数据消费者通过它获得输入。

Figure 17: Data consumers such as the for-of loop use the interface Iterable. Data sources such as Arrays implement that interface.

图中的图表 17 说明了迭代的工作原理：数据使用者使用接口Iterable;数据源实现它。请注意，在 JavaScript 中，实现的 _ 仅表示具有接口描述的方法;接口本身仅存在于规范中。_

数据的来源和消费者都从这种安排中获益：

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

27.2。核心迭代构造：iterables 和迭代器

两个角色（由接口描述）构成了迭代的核心（图 18 ）：

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

Figure 18: Iteration has two main interfaces: Iterable and Iterator. The former has a method that returns the latter.

这些是迭代协议接口的类型定义（以 TypeScript 的表示法）：

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。

27.3。手动迭代

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

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 });

27.3.1。通过`while`迭代迭代

以下代码演示了如何使用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.js

27.4。实践中的迭代

我们已经看到了如何手动使用迭代协议，这是相对麻烦的。但该协议并不是直接使用的 - 它旨在通过构建在其上的更高级语言结构来使用。本节介绍了它的外观。

27.4.1。数组

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');

27.4.2。集

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');

27.5。快速参考：同步迭代

27.5.1。可重复数据源

以下内置数据源是可迭代的：

数组
字符串
映射
集
（浏览器：DOM 数据结构）

要迭代对象的属性，您需要帮助程序，如Object.keys()和Object.entries()。这是必要的，因为属性存在于与数据结构级别互补的不同级别。

27.5.2。迭代构造

以下构造支持迭代：

通过数组模式进行解构：
```
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;
}

27.6。进一步阅读

有关同步迭代的更多详细信息，请参阅“探索 ES6”。

测验

参见测验应用程序。