在过去,有两种方法可以遍历 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 循环通常被视作旁白,因为它循环了对象的每一个可枚举属性[1]。这包括原型链中父对象的属性,以及被分配为方法的所以属性。换句话说,它遍历了一些人们可能想不到的东西。使用 for ... in 通常意味着循环块中有很多保护子句,以避免出现不需要的属性。
早期的 javascript 通过库解决了这个问题。许多 JavaScript 库(例如:Prototype.js,jQuery,lodash 等)都有类似 each 或 foreach 这样的工具方法或函数,可让你无需 for i 或 for ... in 循环去遍历对象和数组。
for ... of 循环是 ES6 试图不用第三方库去解决其中一些问题的方式。
for … offor ... 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
如果你想创建自己的可迭代对象,则需要花费更多的时间。你会记得前面说过:
可迭代对象是定义了 @@ 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) }
如果运行上面的代码,则会出现新错误。