深入理解ES6之——迭代器与生成器
迭代器
迭代器是被设计专用于迭代的对象,带有特定接口。所有的迭代器对象都有next方法,会返回一个结果对象。该结果对象有两个属性:对应下一个值的value,以及一个布尔类型的done,其值为true时表示没有更多对值可供使用。
//es5创建迭代器
function createIterator(items) {
var i = 0;
return {
next: function() {
var done = (i >= items.length);
var value = !done ? items[i++] : "undefined";
return {
done: done,
value: value
}
}
}
}
var iterator = createIterator([1, 2, 3]);
console.log(iterator.next());//{done:false,value:1}
console.log(iterator.next());//{done:false,value:2}
console.log(iterator.next());//{done:false,value:3}
console.log(iterator.next());//{done:true,value:"undefined"}
console.log(iterator.next());//{done:true,value:"undefined"}
生成器
生成器是一个能返回迭代器的函数。生成器函数由放在function关键字之后的一个星号(*)来表示,并使用新的yield关键字(指定迭代器在被next()方法调用时应当按顺序返回的值。)。
function* createIterator() {
yield 1;
yield 2;
yield 3;
}
var iterator = createIterator();
console.log(iterator.next());//{done:false,value:1}
console.log(iterator.next());//{done:false,value:2}
console.log(iterator.next());//{done:false,value:3}
console.log(iterator.next());//{done:true,value:undefined}
console.log(iterator.next());//{done:true,value:undefined}
生成器最有意思的方面可能就是它们会在每个yield语句后停止执行。
//yield语句在for循环中的使用
function* createIterator(items) {
for (let i = 0, len = items.length; i < len; i++) {
yield items[i];
}
}
var iterator = createIterator([1, 2, 3]);
console.log(iterator.next());//{done:false,value:1}
console.log(iterator.next());//{done:false,value:2}
console.log(iterator.next());//{done:false,value:3}
console.log(iterator.next());//{done:true,value:undefined}
console.log(iterator.next());//{done:true,value:undefined}
yield只能用于生成器内部,用于其他任何位置都会报错,即使在生成器内部的函数中也不行。因为yield无法穿越函数边界。从这点上来说,yield与return非常相似。
function *createIterator(items){
items.forEach(function(item){
yield item+1;//语法错误
})
}
生成器函数表达式
你可以使用函数表达式来创建一个生成器,只需要在function关键字与圆括号之间使用一个星号(*)即可。
生成器对象方法
var o = {
*createIterator(items){
for (let i = 0, len = items.length; i < len; i++) {
yield items[i];
}
}
}
可迭代对象与for-of循环
可迭代对象被设计用于与es新增的for-of循环配合使用。
for-of循环在循环每次执行时会调用可迭代对象的next()方法,并将结果对象的value储存在一个变量上。循环过程会持续到结果对象的done属性编程true为止。
let values = [1, 2, 3];
for (let num of values) {
console.log(num);
}
//输出内容为
1,2,3
let set = new Set([1, 3, 3, 2, 4, 5, 1, 3]);
for (let val of set) {
console.log(val);
}
//输出内容为
1,3,2,4,5
let map = new Map();
map.set("name", "cc");
map.set("age", 26);
for (let val of map) {
console.log(val);
}
//输出内容为
["name","nicolas"]
["age",52]
访问默认迭代器
你可以使用Symbo.iterator来访问对象上的默认迭代器。
let values = [1, 2, 3];
var iterator = values[Symbol.iterator]();
console.log(iterator.next());//{value:1,done:false}
console.log(iterator.next());//{value:2,done:false}
console.log(iterator.next());//{value:3,done:false}
console.log(iterator.next());//{value:undefined,done:true}
内置的迭代器
集合的迭代器
ES6具有三种集合对象类型:数组、Map和Set。这三种类型都拥有如下迭代器:
- entries():返回一个包含键值对的迭代器
- values():返回一个包含集合中值的迭代器
- keys():返回一个包含集合中键的迭代器
let colors = ["red", "green", "blue"];
let set = new Set([1234, 5678, 9012]);
let map = new Map();
map.set("title", "unde");
map.set("format", "ebook");
//entries
for (let entry of colors.entries()) {
console.log(entry);
}
for (let entry of set.entries()) {
console.log(entry);
}
for (let entry of map.entries()) {
console.log(entry);
}
//values
for (let value of colors) {
console.log(value);
}
for (let value of set.values()) {
console.log(value);
}
for (let value of map.values()) {
console.log(value);
}
//keys
for (let key of colors.keys()) {
console.log(key);
}
for (let key of set.keys()) {
console.log(key);
}
for (let key of map.keys()) {
console.log(key);
}
字符串的迭代器
let message = "A B";
for (let s of message) {
console.log(s);
}
//输出内容为
A
(BLANK)
(BLANK)
B
NodeList的迭代器
let p = document.getElementsByTagName("p");
for (let c of p) {
console.log(c.className);
}
传递参数给迭代器
function* createIterator() {
let first = yield 1;
let second = yield first + 2;
yield second + 3;
}
let iterator = createIterator();
console.log(iterator.next());//1
console.log(iterator.next(4));//6
console.log(iterator.next(5));//8
在包含赋值操作的第一个yield语句中,表达式右侧再第一次调用next()时被计算,而表达式左侧则在第二次调用next()方法时,并在生成器函数执行之前被计算。
生成器委托
function* createNumI() {
yield 1;
yield 2;
}
function* createColI() {
yield "red";
yield "green";
}
function* createComb() {
yield* createNumI();
yield* createColI();
yield true;
}
let iterator = createComb();
console.log(iterator.next());//{value:1,done:false}
console.log(iterator.next());//{value:2,done:false}
console.log(iterator.next());//{value:"red",done:false}
console.log(iterator.next());//{value:"green",done:false}
console.log(iterator.next());//{value:true,done:false}
console.log(iterator.next());//{value:undefined,done:false}
深入理解ES6之——迭代器与生成器的更多相关文章
- 深入理解ES6之迭代器与生成器
迭代器 迭代器 iterator,在 Javascript 中,迭代器是一个对象(也可称作为迭代器对象),它提供了一个 next() 方法,用来返回迭代序列中的下一项. next 方法的定义,next ...
- 【ES6】迭代器与可迭代对象
ES6 新的数组方法.集合.for-of 循环.展开运算符(...)甚至异步编程都依赖于迭代器(Iterator )实现.本文会详解 ES6 的迭代器与生成器,并进一步挖掘可迭代对象的内部原理与使用方 ...
- pytorch :: Dataloader中的迭代器和生成器应用
在使用pytorch训练模型,经常需要加载大量图片数据,因此pytorch提供了好用的数据加载工具Dataloader. 为了实现小批量循环读取大型数据集,在Dataloader类具体实现中,使用了迭 ...
- ES6深入浅出-4 迭代器与生成器-3.生成器 & for...of
迭代器平时用的很少.但是如果你是写框架的,你会经常用到迭代器. 生成器是专门用来做迭代器的东西 发布器是要产生一个叫做next的对象,如果你要产生这种对象.就可以使用ES6新出的语法. ES6的新语法 ...
- 理解Python迭代对象、迭代器、生成器
作者:zhijun liu链接:https://zhuanlan.zhihu.com/p/24376869来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 本文源自RQ作 ...
- 完全理解 Python 迭代对象、迭代器、生成器(转)
完全理解 Python 迭代对象.迭代器.生成器 本文源自RQ作者的一篇博文,原文是Iterables vs. Iterators vs. Generators » nvie.com,俺写的这篇文章是 ...
- 完全理解 Python 迭代对象、迭代器、生成器
完全理解 Python 迭代对象.迭代器.生成器 2017/05/29 · 基础知识 · 9 评论 · 可迭代对象, 生成器, 迭代器 分享到: 原文出处: liuzhijun 本文源自RQ作者 ...
- [转载]完全理解Python迭代对象、迭代器、生成器
译文地址:liuzhijun 在了解Python的数据结构时,容器(container).可迭代对象(iterable).迭代器(iterator).生成器(generator).列表/集合/字典推导 ...
- python 进阶篇 迭代器和生成器深入理解
列表/元组/字典/集合都是容器.对于容器,可以很直观地想象成多个元素在一起的单元:而不同容器的区别,正是在于内部数据结构的实现方法. 所有的容器都是可迭代的(iterable).另外字符串也可以被迭代 ...
随机推荐
- Winform常用的一些功能收集(持续更新)
#region progressBar实时显示进度 private void button1_Click(object sender, EventArgs e) { int i = 10000; pr ...
- IDoc 基础知识
Application Link Enabling ALE主要为了分布式业务系统而设计的.它可以使业务流程中的每个步骤分布在不同的SAP系统上,系统间可以通过IDoc交互数据.IDoc可以认为是个信封 ...
- 不使用数据结构反转栈 递归 CVTE实习 CVTE是一家什么公司
本文因为垃圾csdn标题字限制,标题写不好.本文想说一个算法,和我在CVTE的实习,我看到CVTE是一家什么公司.如果想要喷我的,可以留言,我不会理.如果想喷公司,可以在博客评论或发到我邮件linde ...
- Windows下使用nginx搭建反向代理服务器
反向代理(Reverse Proxy)方式是指以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给internet上请求连接的客户端,此时 ...
- 217. Contains Duplicate (leetcode)
Given an array of integers, find if the array contains any duplicates. Your function should return t ...
- Nginx监控-Nginx+Telegraf+Influxb+Grafana
搭建了Nginx集群后,需要继续深入研究的就是日常Nginx监控. Nginx如何监控?相信百度就可以找到:nginx-status 通过Nginx-status,实时获取到Nginx监控数据后,如何 ...
- 日志管理之 Docker logs - 每天5分钟玩转 Docker 容器技术(87)
高效的监控和日志管理对保持生产系统持续稳定地运行以及排查问题至关重要. 在微服务架构中,由于容器的数量众多以及快速变化的特性使得记录日志和监控变得越来越重要.考虑到容器短暂和不固定的生命周期,当我们需 ...
- Bower+grunt-wiredep自动注入包到html
以安装jquery为例 1.假设已经通过npm安装好了bower和grunt-wiredep,以及grunt-contrib-watch(用来观察文件变动) 在gruntfile.js文件中增加任务 ...
- Zernike不变矩
1.Zernike矩介绍 Zernike矩是基于 Zernike多项式的正交化函数,所利用的正交多项式集是 1个在单位圆内的完备正交集.Zernike矩是复数矩 ,一般把 Zernike矩的模作为特征 ...
- coursera无法观看视频解决方法
coursera无法观看视频解决方法 Coursera是国外的一款非常有名的公开课网站,值得大家一起学习,奈何"长城"太厚,经常被和谐,一些视频打不开,最近找到不用FQ的方法,共享 ...