Iterator 和 for...of 循环

Drinkey 发布于2019-08-23 15:13 / 1546人阅读

摘要：和循环遍历器意义为四种数据集合，提供统一的接口机制来处理所有不同的数据结构。调用函数返回一个遍历器对象，代表函数的内部指针。以后，每次调用遍历器对象的方法，就会返回一个有着和两个属性的对象。

Iterator 和 for...of 循环 Iterator（遍历器）意义

为Array、Object、Map、Set四种数据集合，提供统一的接口机制来处理所有不同的数据结构。

任何数据结构，只要部署 Iterator 接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）。

接口

//遍历器接口 
interface Iterable{
    [Symbol.iterator]():Iterator,
}
//指针对象
interface Iterator{
    next(value?:any):IterationResult,
}
//返回结果
interface IterationResult{
    value:any,
    done:boolean
}

生成器
Generator 函数的调用方法与普通函数一样，也是在函数名后面加上一对圆括号。不同的是，
调用 Generator 函数后，该函数并不执行，返回的也不是函数运行结果，而是一个指向内部状态
的指针对象，也就是上一章介绍的遍历器对象 Iterator Object ）。
调用 Generator 函数返回一个遍历器对象，代表 Generator 函数的内部指针。以
后，每次调用遍历器对象的 next 方法，就会返回一个有着 value 和 done 两个属性的对象。
value 属性表示当前的内部状态的值，是 yield 语句后面那个表达式的值： done 属性是一个
布尔值，表示是否遍历结束

作用

为各种数据结构提供一个统一的、简便的访问接口；

使得数据结构的成员能够按某种次序排列；

ES6 创造了一种新的遍历命令一for . . . of 循环， Iterator 接口主要供 for ... of 消费。

过程

创建一个指针对象，指向当前数据结构的起始位置。也就是说，遍历器对象本质上就是一个指针对象。

第一次调用指针对象的 next 方法，可以将指针指向数据结构的第一个成员。

第二次调用指针对象的 next 方法，指针就指向数据结构的第二个成员。

不断调用指针对象的 next 方法，直到它指向数据结构的结束位置。

原理

每次调用 next 方法都会返回数据结构的当前成员的信息。具体来说，就是返回一个包含 value 和 done 两个属性的对象。其中， value 属性是当前成员的值， done 属性是一个布尔值

与其他遍历语法的比较

以数组为例， JavaScript 提供了多种遍历语法。最原始的写法就是 for 循环。

//麻烦
for (var index = 0; index < myArray.length ; index++) { 
    console.log(myArray[index]);  
} 
// 不能跳出
myArray.forEach(function (value) {
    console.log(value) ; 
})

//被设计用来遍历对象，而不是数组
for(let i in myArray){
    console.log(i)
}
//简洁，可跳出，统一接口
for(let i of myArray){
    console.log(i)
}

//for ... of的等价写法
let iterator = myArray[Symbol.iterator]();
let item = iterator.next();
while(!item.done){
    console.log(item.value);
    item = iterator.next();
}

这种写法比较麻烦，因此数组提供了内置的 forEach 方法。

这种写法的问题在于，无法中途跳出 forEach 循环， break 命令或 return 命令都不能奏效

for ... in循环可以遍历数组的键名。

for ... in 循环有几个缺点。

数组的键名是数字，但是 for ... in 循环是以字符串作为键名，“0”、“ 1 ”、＂ 2 ”等。

for ... in 循环不仅可以遍历数字键名，还会遍历手动添加的其他键，甚至包括原型链上的键。

某些情况下， for ... in 循环会以任意顺序遍历键名

总之， for . .. in 循环主要是为遍历对象而设计的，不适用于遍历数组。

for ... of 循环相比上面几种做法有一些显著的优点。

有着同 for ... in 一样的简洁语法，但是没有 for ... in 那些缺点。

不同于 forEach 方法，它可以与 break 、 continue 和 return 配合使用。

提供了遍历所有数据结构的统一操作接口。

云服务器 GPU云服务器 for...of Iterator Iterator模式 for循环和foreach

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101695.html

ES6语法之可迭代协议和迭代器协议

摘要：有两个协议可迭代协议和迭代器协议。为了变成可迭代对象，一个对象必须实现或者它原型链的某个对象必须有一个名字是的属性迭代器协议该迭代器协议定义了一种标准的方式来产生一个有限或无限序列的值。 ECMAScript 2015的几个补充，并不是新的内置或语法，而是协议。这些协议可以被任何遵循某些约定的对象来实现。有两个协议：可迭代协议和迭代器协议。可迭代协议可迭代协议允许 JavaScri...

sarva 2019-08-22 11:23 评论0 收藏0
ES6中的Iterator和for...of循环那些事

摘要：一个对象如果要有可被循环调用的接口，就必须在的属性上部署遍历器生成方法原型链上的对象具有该方法也可。阮大神案例上面代码是一个类部署接口的写法。属性对应一个函数，执行后返回当前对象的遍历器对象。最近看阮一峰阮大神的ES6，刚刚看到Iterator和for...of循环这一章，小作笔记跟大家略微分享一下，不足之处还望大家多多指正 Iterator（遍历器）就是一种机制；任何数据结构只要是...

OpenDigg 2019-08-21 10:44 评论0 收藏0
JavaScript 设计模式（五）：迭代器模式

摘要：文章内容分两部分前半部分为迭代器模式概念后半部分为中迭代器上半部分开始迭代器模式提供一种方法顺序访问一个聚合对象中的各个元素，而又不需要暴露该对象的内部表示。下半部分开始的迭代器迭代器等同于遍历器。执行该函数，会返回一个遍历器对象。 showImg(https://segmentfault.com/img/bVbuyaZ?w=800&h=600); 文章内容分两部分：前半部分为迭...

zhou_you 2019-08-23 18:26 评论0 收藏0
lodash源码分析之compact中的遍历

摘要：到这里，源码分析完了。但是，有两个致命的特性的遍历不能保证顺序会遍历所有可枚举属性，包括继承的属性。的遍历顺序依赖于执行环境，不同执行环境的实现方式可能会不一样。小时候，乡愁是一枚小小的邮票，我在这头，母亲在那头。长大后，乡愁是一张窄窄的船票，我在这头，新娘在那头。后来啊，乡愁是一方矮矮的坟墓，我在外头，母亲在里头。而现在，乡愁是一湾浅浅的海峡，我在这头，大...

dmlllll 2019-08-22 11:20 评论0 收藏0
ES6之Iterator、Generator

摘要：举个例子遍历器生成函数，作用就是返回一个遍历器对象，方法返回一个对象，表示当前数据成员的信息。该对象本身也具有属性，执行后返回自身。 Iterator的作用一是为各种数据结构，提供一个统一的、简便的访问接口；(统一)二是使得数据结构的成员能够按某种次序排列；（按序）三是ES6创造了一种新的遍历命令for...of循环，Iterator接口主要供for...of消费。举个例子：遍历器生...

tuomao 2019-08-20 18:03 评论0 收藏0