关于javascript:ES6-的循环和可迭代对象

作者：Alan Storm

翻译：疯狂的技术宅

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

未经容许严禁转载

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

在过来，有两种办法能够遍历 javascript。

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

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 通常意味着循环块中有很多爱护子句，以避免出现不须要的属性。

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

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

for ... of 循环

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

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

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

在这句话中你须要了解很多货色：

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

上面一一解决这些疑难。

首先，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

如果你想创立本人的可迭代对象，则须要破费更多的工夫。你会记得后面说过：

可迭代对象是定义了 @@ 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

深刻了解 Shadow DOM v1
一步步教你用 WebVR 实现虚拟现实游戏
13 个帮你进步开发效率的古代 CSS 框架
疾速上手 BootstrapVue
JavaScript 引擎是如何工作的？从调用栈到 Promise 你须要晓得的所有
WebSocket 实战：在 Node 和 React 之间进行实时通信
对于 Git 的 20 个面试题
深刻解析 Node.js 的 console.log
Node.js 到底是什么？
30 分钟用 Node.js 构建一个 API 服务器
Javascript 的对象拷贝
程序员 30 岁前月薪达不到 30K，该何去何从
14 个最好的 JavaScript 数据可视化库
8 个给前端的顶级 VS Code 扩大插件
Node.js 多线程齐全指南
把 HTML 转成 PDF 的 4 个计划及实现

更多文章 …

关于javascript:ES6-的循环和可迭代对象

旧办法

for … of

内置 Iterable

创立本人的 Iterable

生成器

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

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

欢送持续浏览本专栏其它高赞文章：