27.同步迭代

原文: 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.

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.

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”

测验

参见测验应用程序



书籍推荐

此网站出售,联系QQ:779236454