ES6深入浅出-4 迭代器与生成器-3.生成器 & for...of
迭代器平时用的很少。但是如果你是写框架的,你会经常用到迭代器。
生成器是专门用来做迭代器的东西
发布器是要产生一个叫做next的对象,如果你要产生这种对象。就可以使用ES6新出的语法。
ES6的新语法
星号放在哪里都可以,甚至打空格可以了。

这样写也行

这样写也行

while(true)是一个死循环。这是一个ES6的语法糖

function*是什么 yield是什么鬼?ES6难理解,就是你永远用不到的东西,在这个基础之上又加了一个你永远用不到的东西。
可以移植运行a.next()理论上不会结束。


这段代码只会运行一次,但是在yield这里发生了变化。yield就是吼出去。



每次进入下一次循环,让一下。

yield这里有一出一进的感觉。出来把value的值改变。然后调用next又进去。继续走true的判断。
当运行了a=发布器().

现在version是1. 它等着你去调用next方法,让它继续。
调用next方法它会这个version吼出来 就是1.

同时它继续执行到后面。这个时候version等于2。这个循环被我们终端了。你只要不调用next它就不会继续下一个。每次next就会循环一次。这就是迭代器的语法糖。

函数没有return 什么,只需要把每次迭代的值yeild出来即可,
那么这个yield有什么用呢????并不觉得你在1到2年内会用到它 ,但是还是要背下来。所以ES6是很难学的,你必须要写很多代码才会遇到要用迭代器的机会。
生成器是迭代器的语法糖。
for of
for of是迭代器访问的语法糖
可迭代的对象就是可以移植调用.next的对象。

定义一个数组,调用next方法,但是报错了。说明不能迭代

用for of 遍历array这个数组。

用for循环遍历正常遍历数组

如果给array添加一个属性,如果叫做x,x的值是y。当前的array是下面这个

那么在遍历的时候,该不该打出x的值呢?

定义另外一个object对象。

array的keys没有数字下标。所以你的遍历不知道是什么,你以前的遍历都是狭义的遍历。如果是数组就只看012345这种数字的下标。如果是对象,我就全部都看。

把对象编程数组,现在这个object和这个对象一模一样。

object现在是一个数组了。

object和array现在是一样的。对象和数组目前已经一模一样了。如果他们一样为什么他们的遍历是不一样的?

ES5里面下面这四种类型都是对象,一种特殊的对象。简化的说就是数组是一种对象。

可迭代对象,,有些对象是可以的迭代的,比如数组。
array和object都可以遍历。但是只有array可以迭代。对象不能迭代。

为什么对象不可以迭代呢?如果一个东西可以被for of使用,它就可以迭代的
key in 这种是以前的语法。

这都是在遍历。

for of是新的语法

迭代object。提示错误,对象不可迭代

数组和对象是同一种东西,只是理解方式不同。这就涉及到ES5的内核了。

遍历的时候for循环,是自己骗自己数组是有顺序的 ,实际上数组array是没有顺序的。

数组和对象到底有什么区别??
数组的原型指向Array.prototype
对象的原型执行Object的prototype

没什么区别,只是原型不同而已。

只有符合某些特征的对象才可以迭代,数组自带了迭代的功能。

数组有这个属性

object没有这个属性。

能不能迭代的根本原因就是它定义了一个迭代的方法。
把不能迭代的Object变成可迭代的行不行?现在object是不可迭代的

定义个迭代器,这个迭代器只要不停的yield值就可以了。

object就可以迭代了。


重新写迭代的方法。
先拿到所有的key

循环yield,这个对象的keys[i]

打印出来的还是不对的。

把pbject的值改一下

然后重新迭代的方法

再来迭代

为什么数组可以迭代,对象不能迭代呢?因为数组知道如何按顺序去访问。我只需要先访问第0项,再访问第1项,你每次调用next我都访问数组的下一项就可以了。但是object不行,因为它不知道如何去访问你这些key,是先给你a啊?显示先给你b啊 显示还给你c呢?

为什么通过keys就可以拿到了呢???注意这个顺序是不确定的。有可能你换个浏览器就不是abc了。由不可迭代变成可迭代,你只要告诉它怎么迭代就可以了。

Symbol是一个独一无二的值,这里如果不发明Symbol语法。这里的语法就是扯淡。这是Symbol引入ES6最开始的意义就是为了实现迭代器。

结束
ES6深入浅出-4 迭代器与生成器-3.生成器 & for...of的更多相关文章
- ES6深入浅出-4 迭代器与生成器-2.Symbol 和迭代器
symbol https://zhuanlan.zhihu.com/p/22652486 Es5中的数据类型,所有的复杂类型都是对象类型. ES6里面增加了symbol类型,用处不多. https:/ ...
- ES6深入浅出-4 迭代器与生成器-4.总结
yield的值就是外面调用next得到的值 ES6给的新的语法,如果你给任何一个对象添加一个Symbol.interator的key,同时它的值是一个生成器. 下面选中的就是生成器.生成返回的东西是迭 ...
- ES6深入浅出-4 迭代器与生成器-1.字面量增强
今天的内容 字面量literal 写出来就是它的值 例如字符串hello.这就是自变量. 一个空对象,也是自变量 写出来就是代表它写出来的那个意思就是自变量. 与其相反的就是构造出来的.例如下面的ne ...
- ES6深入浅出-4 迭代器与生成器-5.科班 V.S. 培训
为什么要学用不到的东西 科班是把你未来一二十年用的东西都给你入个门 做前端 三年后一定要再学一门语言. 买一本图解算法 培训讲究的是技能,只能满足3到5年,而不是术,学术学的是你未来10年甚至20年用 ...
- ES6深入浅出_汇总贴
H:\BaiDu\ES6深入浅出-wjw ES 6 新特性一览:https://frankfang.github.io/es-6-tutorials/ 我用了两个月的时间才理解 let https:/ ...
- ES6中的迭代器(Iterator)和生成器(Generator)
前面的话 用循环语句迭代数据时,必须要初始化一个变量来记录每一次迭代在数据集合中的位置,而在许多编程语言中,已经开始通过程序化的方式用迭代器对象返回迭代过程中集合的每一个元素 迭代器的使用可以极大地简 ...
- [js高手之路] es6系列教程 - 迭代器,生成器,for...of,entries,values,keys等详解
接着上文[js高手之路] es6系列教程 - 迭代器与生成器详解继续. 在es6中引入了一个新的循环结构for ....of, 主要是用来循环可迭代的对象,那么什么是可迭代的对象呢? 可迭代的对象一般 ...
- ES6中的迭代器(Iterator)和生成器(Generator)(一)
用循环语句迭代数据时,必须要初始化一个变量来记录每一次迭代在数据集合中的位置,而在许多编程语言中,已经开始通过程序化的方式用迭代器对象返回迭代过程中集合的每一个元素 迭代器的使用可以极大地简化数据操作 ...
- [js高手之路] es6系列教程 - 迭代器与生成器详解
什么是迭代器? 迭代器是一种特殊对象,这种对象具有以下特点: 1,所有对象都有一个next方法 2,每次调用next方法,都会返回一个对象,该对象包含两个属性,一个是value, 表示下一个将要返回的 ...
随机推荐
- TODO : 一些新的学习计划
1.读完jvm那本书 2.加深Android的开发知识 3.编写atx的demo 4.跑几个apk的性能测试并做详细的性能分析 5.尝试实现一个uiautomator多个手机同时执行脚本的可能性(连线 ...
- IntelliJ IDEA12的解决占用C盘C:\Users\Administrator
在安装完IntelliJ IDEA之后,默认会在windows的系统盘用户文件夹中创建配置等文件.在我只有32G的SSD盘中,怎么能让它如此,不爽呀..占用到现在都快1G了.好吧.今天把她解决了. 找 ...
- Vue 组件生命周期钩子
Vue 组件生命周期钩子 # 1)一个组件从创建到销毁的整个过程,就称之为组件的生命周期 # 2)在组件创建到销毁的过程中,会出现众多关键的时间节点, 如: 组件要创建了.组件创建完毕了.组件数据渲染 ...
- 题解 UVa10943
题目大意 多组数据,每组数据给定两个整数 \(n,k\),求出用 \(k\) 个不超过 \(n\) 的数相加得到 \(n\) 的方案数(不同顺序不算同种). 分析 计数水题.令 \(f_{i,j}\) ...
- Leonardo的笔记本LA 3641——置换的乘法
题意 给出26个大写字母的置换 $B$,问是否存在一个置换 $A$,使得 $A^2=B$. 分析 首先,若A=BC,若B和C都能表示成两个相同循环的乘积,则A也能. 因为,不相交的循环的乘积满足交换律 ...
- 微信公众号调用外部浏览器打开指定URL链接是如何实现的
在涉及移动端支付的项目时,由于对支付需求的精细化,不仅需要扫码支付,还有唤醒App支付,另外还有在微信.QQ.支付宝内置浏览器给出相应的提示. 好在国内各大巨头公司在开发浏览器的时候都在浏览器标识上加 ...
- 021_Python3 OS 文件/目录方法
os 模块提供了非常丰富的方法用来处理文件和目录.常用的方法如下表所示: 序号 方法及描述 1 os.access(path, mode) 检验权限模式 2 os.chdir(path) 改变当前 ...
- Zabbix 短信报警示例
Zabbix 短信报警 示例: 注意zabbix 脚本文件默认放置目录是 alertscripts (zabbix 动作调用脚本目录) # 编辑 zabbix_server.conf # AlertS ...
- 97: cf 983E 倍增+树套树
$des$一棵 $n$ 个点的树,树上有 $m$ 条双向的公交线路,每条公交线路都在两个节点之间沿最短路径往返.$q$ 次询问从一个点要到达另一个点,在只坐公交的情况下,至少需要坐几辆公交车:或者判断 ...
- (8)打鸡儿教你Vue.js
监听属性 监听属性 watch 通过 watch 来响应数据的变化 <div id = "app"> <p style = "font-size:25p ...