ES6的循环与可迭代对象示例详解

2023-07-06 02:20:03 77
本文将研究ES6的for...of循环。
旧方法

在过去，有两种方法可以遍历javascript。
首先是经典的fori循环，它使你可以遍历数组或可索引的且有length属性的任何对象。
for(i=0;i
其次是for...in循环，用于循环一个对象的键/值对。
for(keyinthings){
if(!thing.hasOwnProperty(key)){continue;}
varthing=things[key]
/*...*/
}

for...in循环通常被视作旁白，因为它循环了对象的每一个可枚举属性[1]。这包括原型链中父对象的属性，以及被分配为方法的所以属性。换句话说，它遍历了一些人们可能想不到的东西。使用for...in通常意味着循环块中有很多保护子句，以避免出现不需要的属性。
早期的javascript通过库解决了这个问题。许多JavaScript库（例如：Prototype.js，jQuery，lodash等）都有类似each或foreach这样的工具方法或函数，可让你无需fori或for...in循环去遍历对象和数组。
for...of循环是ES6试图不用第三方库去解决其中一些问题的方式。
for…of


for...of循环
for(constthingofthings){
/*...*/
}

它将遍历一个可迭代（iterable）对象。
可迭代对象是定义了@@iterator方法的对象，而且@@iterator方法返回一个实现了迭代器协议的对象，或者该方法是生成器函数。
在这句话中你需要理解很多东西：

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



下面逐个解决这些疑问。
内置Iterable


首先，javascript对象中的一些内置对象天然的可以迭代，比如最容易想到的就是数组对象。可以像下面的代码中一样在for...of循环中使用数组：
constfoo=[
'apples','oranges','pears'
]

for(constthingoffoo){
console.log(thing)
}


输出结果是数组中的所有元素。

apples

oranges

pears

还有数组的entries方法，它返回一个可迭代对象。这个可迭代对象在每次循环中返回键和值。例如下面的代码：
constfoo=[
'apples','oranges','pears'
]

for(constthingoffoo.entries()){
console.log(thing)
}


将输出以下内容

[0,'apples']

[1,'oranges']

[2,'pears']

当用下面的语法时，entries方法会更有用
constfoo=[
'apples','oranges','pears'
]

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


在for循环中声明了两个变量：一个用于返回数组的第一项（值的键或索引），另一个用于第二项（该索引实际对应的值）。
一个普通的javascript对象是不可迭代的。如果你执行下面这段代码：
//无法正常执行
constfoo={
'apples':'oranges',
'pears':'prunes'
}

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


会得到一个错误

$nodetest.js

/path/to/test.js:6

for(const[key,value]offoo){

TypeError:fooisnotiterable

然而全局Object对象的静态entries方法接受一个普通对象作为参数，并返回一个可迭代对象。就像这样的程序：
constfoo={
'apples':'oranges',
'pears':'prunes'
}

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


能够得到你期望的输出：

$nodetest.js

apples:oranges

pears:prunes

创建自己的Iterable


如果你想创建自己的可迭代对象，则需要花费更多的时间。你会记得前面说过：

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

搞懂这些内容的最简单方法就是一步一步的去创建可迭代对象。首先，我们需要一个实现@@iterator方法的对象。@@表示法有点误导性，我们真正 要做的是用预定义的Symbol.iterator符号定义方法。
如果用迭代器方法定义对象并尝试遍历：
constfoo={
[Symbol.iterator]:function(){
}
}

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


得到一个新错误：

for(const[key,value]offoo){

                         ^

TypeError:ResultoftheSymbol.iteratormethodisnotanobject

这是javascript告诉我们它在试图调用Symbol.iterator方法，但是调用的结果不是对象。
为了消除这个错误，需要用迭代器方法来返回实现了迭代器协议的对象。这意味着迭代器方法需要返回一个有next键的对象，而next键是一个函数。
constfoo={
[Symbol.iterator]:function(){
return{
next:function(){
}
}
}
}

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


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

for(const[key,value]offoo){

                    ^

TypeError:Iteratorresultundefinedisnotanobject

这次javascript告诉我们它试图调用Symbol.iterator方法，而该对象的确是一个对象，并且实现了next方法，但是next的返回值不是javascript预期的对象。
next函数需要返回有特定格式的对象——有value和done这两个键。
next:function(){
//...
return{
done:false,
value:'nextvalue'
}
}

done键是可选的。如果值为true（表示迭代器已完成迭代），则说明迭代已结束。
如果done为false或不存在，则需要value键。value键是通过循环此应该返回的值。
所以在代码中放入另一个程序，它带有一个简单的迭代器，该迭代器返回前十个偶数。
classFirst20Evens{
constructor(){
this.currentValue=0
}

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

constfoo=newFirst20Evens;
for(constvalueoffoo){
console.log(value)
}


生成器


手动去构建实现迭代器协议的对象不是唯一的选择。生成器对象（由生成器函数返回）也实现了迭代器协议。上面的例子用生成器构建的话看起来像这样：
classFirst20Evens{
constructor(){
this.currentValue=0
}

[Symbol.iterator]("Symbol.iterator"){
returnfunction*(){
for(leti=1;i<=10;i++){
if(i%2===0){
yieldi
}
}
}()
}
}

constfoo=newFirst20Evens;
for(constitemoffoo){
console.log(item)
}


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

$nodesample-program.js

2

4

6

8

10

参考资料
对象的每个可枚举属性:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in
总结
到此这篇关于ES6的循环与可迭代对象的文章就介绍到这了,更多相关ES6循环与可迭代对象内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。
ES6的循环与可迭代对象示例详解

旧方法

for…of

内置Iterable

创建自己的Iterable

生成器

总结

热门推荐

随机推荐
