ES6 的循环和可迭代对象

时间 2021-02-14

标签 javascript 前端 java node 程序员 es6 面试 segmentfault 数组 bash 栏目 JavaScript 繁體版

原文原文链接

做者：Alan Storm
翻译：疯狂的技术宅javascript

原文：https://alanstorm.com/es6s-ma...前端

未经容许严禁转载java

本文将研究 ES6 的 for ... of 循环。node

旧方法

在过去，有两种方法能够遍历 javascript。程序员

首先是经典的 for i 循环，它使你能够遍历数组或可索引的且有 length 属性的任何对象。es6

for(i=0;i<things.length;i++) {
    var thing = things[i]
    /* ... */
}

其次是 for ... in 循环，用于循环一个对象的键/值对。面试

for(key in things) {
    if(!thing.hasOwnProperty(key)) { continue; }
    var thing = things[key]
    /* ... */
}

for ... in 循环一般被视做旁白，由于它循环了对象的每个可枚举属性。这包括原型链中父对象的属性，以及被分配为方法的因此属性。换句话说，它遍历了一些人们可能想不到的东西。使用 for ... in 一般意味着循环块中有不少保护子句，以免出现不须要的属性。 segmentfault

早期的 javascript 经过库解决了这个问题。许多 JavaScript库（例如：Prototype.js，jQuery，lodash 等）都有相似 each 或 foreach 这样的工具方法或函数，可以让你无需 for i 或 for ... in 循环去遍历对象和数组。数组

for ... of 循环是 ES6 试图不用第三方库去解决其中一些问题的方式。bash

for … of

for ... of 循环

for(const thing of things) {
    /* ... */
}

它将遍历一个可迭代（iterable）对象。

可迭代对象是定义了 @@ iterator 方法的对象，并且 @@iterator 方法返回一个实现了迭代器协议的对象，或者该方法是生成器函数。

在这句话中你须要理解不少东西：

可迭代的对象
@@iterator方法（ @@是什么意思？）
迭代器协议（这里的协议是什么意思？）
等等，迭代（iterable）和迭代器（iterator）不是一回事？
另外，生成器函数又是什么鬼？

下面逐个解决这些疑问。

内置 Iterable

首先，javascript 对象中的一些内置对象自然的能够迭代，好比最容易想到的就是数组对象。能够像下面的代码中同样在 for ... of 循环中使用数组：

const foo = [
'apples','oranges','pears'
]

for(const thing of foo) {
  console.log(thing)
}

输出结果是数组中的全部元素。

apples
oranges
pears

还有数组的 entries 方法，它返回一个可迭代对象。这个可迭代对象在每次循环中返回键和值。例以下面的代码：

const foo = [
'apples','oranges','pears'
]

for(const thing of foo.entries()) {
  console.log(thing)
}

将输出如下内容

[ 0, 'apples' ]
[ 1, 'oranges' ]
[ 2, 'pears' ]

当用下面的语法时，entries 方法会更有用

const foo = [
    'apples','oranges','pears'
]

for(const [key, value] of foo.entries()) {
  console.log(key,':',value)
}

在 for 循环中声明了两个变量：一个用于返回数组的第一项（值的键或索引），另外一个用于第二项（该索引实际对应的值）。

一个普通的 javascript 对象是不可迭代的。若是你执行下面这段代码：

// 没法正常执行
const foo = {
  'apples':'oranges',
  'pears':'prunes'
}

for(const [key, value] of foo) {
  console.log(key,':',value)
}

会获得一个错误

$ node test.js
/path/to/test.js:6
for(const [key, value] of foo) {
TypeError: foo is not iterable

然而全局 Object 对象的静态 entries 方法接受一个普通对象做为参数，并返回一个可迭代对象。就像这样的程序：

const foo = {
  'apples':'oranges',
  'pears':'prunes'
}

for(const [key, value] of Object.entries(foo)) {
  console.log(key,':',value)
}

可以获得你指望的输出：

$ node test.js
apples : oranges
pears : prunes

建立本身的 Iterable

若是你想建立本身的可迭代对象，则须要花费更多的时间。你会记得前面说过：

可迭代对象是定义了 @@ iterator 方法的对象，并且 @@iterator 方法返回一个实现了 迭代器协议的对象，或者该方法是生成器函数。

搞懂这些内容的最简单方法就是一步一步的去建立可迭代对象。首先，咱们须要一个实现 @@iterator 方法的对象。 @@ 表示法有点误导性，咱们真正要作的是用预约义的 Symbol.iterator 符号定义方法。

若是用迭代器方法定义对象并尝试遍历：

const foo = {
  [Symbol.iterator]: function() {
  }
}

for(const [key, value] of foo) {
  console.log(key, value)
}

获得一个新错误：

for(const [key, value] of foo) {
                          ^
TypeError: Result of the Symbol.iterator method is not an object

这是 javascript 告诉咱们它在试图调用 Symbol.iterator 方法，可是调用的结果不是对象。

为了消除这个错误，须要用迭代器方法来返回实现了迭代器协议的对象。这意味着迭代器方法须要返回一个有 next 键的对象，而 next 键是一个函数。

const foo = {
  [Symbol.iterator]: function() {
    return {
      next: function() {
      }
    }
  }
}

for(const [key, value] of foo) {
  console.log(key, value)
}

若是运行上面的代码，则会出现新错误。

for(const [key, value] of foo) {
                     ^
TypeError: Iterator result undefined is not an object

此次 javascript 告诉咱们它试图调用 Symbol.iterator 方法，而该对象的确是一个对象，而且实现了 next 方法，可是 next 的返回值不是 javascript 预期的对象。

next 函数须要返回有特定格式的对象——有 value 和 done 这两个键。

next: function() {
    //...
    return {
        done: false,
        value: 'next value'
    }
}

done 键是可选的。若是值为 true（表示迭代器已完成迭代），则说明迭代已结束。

若是 done 为 false 或不存在，则须要 value 键。 value 键是经过循环此应该返回的值。

因此在代码中放入另外一个程序，它带有一个简单的迭代器，该迭代器返回前十个偶数。

class First20Evens {
  constructor() {
    this.currentValue = 0
  }

  [Symbol.iterator]() {
    return {
      next: (function() {
        this.currentValue+=2
        if(this.currentValue > 20) {
          return {done:true}
        }
        return {
          value:this.currentValue
        }
      }).bind(this)
    }
  }
}

const foo = new First20Evens;
for(const value of foo) {
  console.log(value)
}

生成器

手动去构建实现迭代器协议的对象不是惟一的选择。生成器对象（由生成器函数返回）也实现了迭代器协议。上面的例子用生成器构建的话看起来像这样：

class First20Evens {
  constructor() {
    this.currentValue = 0
  }

  [Symbol.iterator]() {
    return function*() {
      for(let i=1;i<=10;i++) {
        if(i % 2 === 0) {
          yield i
        }
      }
    }()
  }
}

const foo = new First20Evens;
for(const item of foo) {
  console.log(item)
}

本文不会过多地介绍生成器，若是你须要入门的话能够看这篇文章。今天的重要收获是，咱们可使本身的 Symbol.iterator 方法返回一个生成器对象，而且该生成器对象可以在 for ... of 循环中“正常工做”。 “正常工做”是指循环可以持续的在生成器上调用 next，直到生成器中止 yield 值为止。

$ node sample-program.js
2
4
6
8
10

本文首发微信公众号：前端先锋

欢迎扫描二维码关注公众号，天天都给你推送新鲜的前端技术文章

欢迎继续阅读本专栏其它高赞文章：

更多文章...