es6之Iterator
1.任何数据结构只要部署了Iterator接口(本质是一个指针对象),也就是部署了Symbol.iterator属性,便可以完成遍历操作;数组原生就具备Iterator接口,就可以用for...of遍历。由于Iterator只是把接口规格加到数据结构之上,所以,遍历器与它所遍历的那个数据结构,实际上是分开的。
2.Iterator遍历过程:
- 创建一个指针对象,指向当前数据结构的起始位置;
- 调用next方法,可以将指针指向数据结构的第一个成员,返回一个包含value和done属性的对象;
- 继续调用next方法,......以此类推,直到指向结束位置。
//mock iterator
function makeIterator(array) {
var nextIndex = 0;
return {
next: function() {
return nextIndex < array.length ?
{value: array[nextIndex++], done: false} :
{value: undefined, done: true};
}
};
} var arr = makeIterator([1, 2, 3]); arr.next(); //{value: 1, done: false}
arr.next(); //{value: 2, done: false}
arr.next(); //{value: 3, done: false}
arr.next(); //{value: undefined, done: true}
3.调用Iterator的场合(即会默认调用Symbol.iterator):
- 解构赋值
- 扩展运算符(...)
- yield*(后面跟一个可遍历的结构)
- 任何接收数组作为参数的场合(for...of等)
4.字符串也具有Iterator接口(typeof str[Symbol.iterator] === 'function')
5.Symbol.iterator可以用Generator函数实现,只要用yield命令给出每一步的返回值即可。
var obj = {};
obj[Symbol.iterator] = function* () {
yield 1;
yield 2;
}
[...obj] // [1, 2]
6.for...of适用于数组、Set、Map、类数组对象(arguments、nodelist)、Generator、字符串。
7.for...in 和 for...of
- 前者只能获取对象的键名,后者可以得到键值;
- 对于数组,前者可以返回数组上的所有属性,后者只能返回具有数字索引的属性;
let arr = ['a', 'b', 'c'];
arr.d = 'hello'; for (let i in arr) {
console.log(i); // '0', '1', '2', 'd'
} for (let i of arr) {
console.log(i); // 'a, 'b', 'c'
}
- 前者主要为遍历对象而设计;不适用与遍历数组;
- 后者不同于foreach,可与break、continue、return配合使用;提供了遍历所有数据结构的统一接口。
8.iterator对象除了next方法,还有return、throw,而return必须返回一个对象。
9.fibonacci
var fib = {
[Symbol.iterator](){
let pre=0,cur=1;
return {
next(){
[pre, cur] = [cur, pre+cur];
return {done: false,value: cur};
}
}
}
}
for(var i of fib){
if(i>100)
break;
console.log(i)
}
es6之Iterator的更多相关文章
- ES6的Iterator,jquery Fn
ES6的Iterator对象详解 Iterator实现原理 创建一个指针对象,指向当前数据结构的起始位置.也就是说,遍历器对象本质上,就是一个指针对象. 第一次调用指针对象的next方法,可以将指针指 ...
- ES6的Iterator遍历器
JS表示集合的对象主要有Array.Set.Object.Map,在以前,遍历它们需要使用2种不同的方法,而现在,JS提出了Iterator机制,可以给不同的数据结构提供统一的遍历方法,就是for…o ...
- es6之iterator,for...of
遍历器(Iterator)是一种统一的接口机制,来处理所有不同的数据结构. JavaScript 原有的表示“集合”的数据结构,主要是数组(Array)和对象(Object),ES6 又添加了Map和 ...
- JS的ES6的iterator
一.iterator 1.概念:iterator是一种接口机制,为各种不同的数据结构提供统一的访问机制. 2.作用: 为各种数据结构,提供一个统一的.简便的访问接口: 使得数据结构的成员能够按某种次序 ...
- 前端知识点回顾之重点篇——ES6的Iterator和Generator
Iterator 迭代器是一种接口.是一种机制. 为各种不同的数据结构提供统一的访问机制.任何数据结构只要部署 Iterator 接口,就可以完成遍历操作(即依次处理该数据结构的所有成员). Iter ...
- ES6的 Iterator 遍历器到底是什么?
这节课要讲的是ES6中的Iterator. for...of为啥不遍历Object对象 第十三节我们讲了简单又实用的for...of,我们可以使用它来遍历数组,字符串,Set和Map结构,但是有没有发 ...
- 切图崽的自我修养-[ES6] 迭代器Iterator浅析
Iterator 这真是毅种循环 Iterator不是array,也不是set,不是map, 它不是一个实体,而是一种访问机制,是一个用来访问某个对象的接口规范,为各种不同的数据结构提供统一的访问机制 ...
- Es6 Symbol.iterator
Symbol.iterator 为每一个对象定义了默认的迭代器.该迭代器可以被 for...of 循环结构使用. --描述 当需要迭代一个对象的时候(比如在 for...of 循环的开始时),它的 @ ...
- es6(14)--iterator for ...of循环
//iterator for ...of循环 { let arr=['hello','world']; let map=arr[Symbol.iterator](); console.log(map. ...
随机推荐
- WebHDFS vs HttpFS GateWay
基于hadoop 2.7.1版本 一.简介 1. WebHDFS官方简介: Introduction The HTTP REST API supports the complete FileSyste ...
- c#在线手册汇总
1. c#中文手册(脚本之家) http://shouce.jb51.net/net/
- git pull和git merge区别&&Git冲突:commit your changes or stash them before you can merge. 解决办法
http://blog.csdn.net/sidely/article/details/40143441 原文: http://www.tech126.com/git-fetch-pull/ Git中 ...
- Web 框架 Flask
Flask是一个基于Python开发并且依赖jinja2模板和Werkzeug WSGI服务的一个微型框架,对于Werkzeug本质是Socket服务端,其用于接收http请求并对请求进行预处理,然后 ...
- python-静态方法staticmethod、类方法classmethod、属性方法property
Python的方法主要有3个,即静态方法(staticmethod),类方法(classmethod)和实例方法 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 def ...
- 前端学习之JavaScript中的 NaN 与 isNaN
NaN NaN 即 Not a Number ,不是一个数字. 在 JavaScript 中,整数和浮点数都统称为 Number 类型 .除此之外,Number 类型还有一个很特殊的值,即 NaN . ...
- CentOS的Qt3和Qt4问题
在有的系统中,装有Qt3和Qt4, 在使用qmake生成Makefile后,直接make, 出错,说没有头文件, 如果调用了qt3的qmake,那么上头的INCPATH里的头文件路径也指向了Qt3, ...
- javascript 判断数据类型的几种方法
javascript 判断数据类型的几种方法一.typeof 直接返回数据类型字段,但是无法判断数组.null.对象 typeof 1 "number" typeof NaN &q ...
- 如何用纯 CSS 创作一只徘徊的果冻怪兽
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/VdOKQG 可交互视频 ...
- 如何用纯 CSS 创作一个摇摇晃晃的 loader
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览.https://codepen.io/comehope/pen/oyJvpe 可交互视频 此 ...