es6 iterator和for...of循环
来源:互联网 发布:steam购买的软件 编辑:程序博客网 时间:2024/06/05 00:42
1,iterator
for...of
循环,Iterator接口主要供for...of
消费。Iterator的遍历过程是这样的。
(1)创建一个指针对象,指向当前数据结构的起始位置。也就是说,遍历器对象本质上,就是一个指针对象。
(2)第一次调用指针对象的next
方法,可以将指针指向数据结构的第一个成员。
(3)第二次调用指针对象的next
方法,指针就指向数据结构的第二个成员。
(4)不断调用指针对象的next
方法,直到它指向数据结构的结束位置。
每一次调用next
方法,都会返回数据结构的当前成员的信息。具体来说,就是返回一个包含value
和done
两个属性的对象。其中,value
属性是当前成员的值,done
属性是一个布尔值,表示遍历是否结束。
在ES6中,有些数据结构原生具备Iterator接口(比如数组),即不用任何处理,就可以被for...of
循环遍历,有些就不行(比如对象)。原因在于,这些数据结构原生部署了Symbol.iterator
属性(详见下文),另外一些数据结构没有。凡是部署了Symbol.iterator
属性的数据结构,就称为部署了遍历器接口。调用这个接口,就会返回一个遍历器对象。
Iterator接口的目的,就是为所有数据结构,提供了一种统一的访问机制,即for...of
循环(详见下文)。当使用for...of
循环遍历某种数据结构时,该循环会自动去寻找Iterator接口。
ES6规定,默认的Iterator接口部署在数据结构的Symbol.iterator
属性,或者说,一个数据结构只要具有Symbol.iterator
属性,就可以认为是“可遍历的”(iterable)。Symbol.iterator
属性本身是一个函数,就是当前数据结构默认的遍历器生成函数。执行这个函数,就会返回一个遍历器。至于属性名Symbol.iterator
,它是一个表达式,返回Symbol
对象的iterator
属性,这是一个预定义好的、类型为Symbol的特殊值,所以要放在方括号内。(参见Symbol一章)。
在ES6中,有三类数据结构原生具备Iterator接口:数组、某些类似数组的对象、Set和Map结构。
let arr = ['a','b','c'];let iter = arr[Symbol.iterator]();console.log(iter.next());//Object {value: "a", done: false}console.log(iter.next());//Object {value: "b", done: false}console.log(iter.next());//Object {value: "c", done: false}console.log(iter.next());//Object {value: undefined, done: true}//上面代码中,变量arr是一个数组,原生就具有遍历器接口,部署在arr的Symbol.iterator属性上面。//所以,调用这个属性,就得到遍历器对象。//上面提到,原生就部署Iterator接口的数据结构有三类,对于这三类数据结构,不用自己写遍历器生成函数,for...of循环会自动遍历它们。//除此之外,其他数据结构(主要是对象)的Iterator接口,都需要自己在Symbol.iterator属性上面部署,这样才会被for...of循环遍历。对象(Object)之所以没有默认部署Iterator接口,是因为对象的哪个属性先遍历,哪个属性后遍历是不确定的,需要开发者手动指定。本质上,遍历器是一种线性处理,对于任何非线性的数据结构,部署遍历器接口,就等于部署一种线性转换。不过,严格地说,对象部署遍历器接口并不是很必要,因为这时对象实际上被当作Map结构使用,ES5没有Map结构,而ES6原生提供了。
一个对象如果要有可被for...of
循环调用的Iterator接口,就必须在Symbol.iterator
的属性上部署遍历器生成方法(原型链上的对象具有该方法也可)。
class RangeIterator{ constructor(start,stop){ this.value = start; this.stop = stop; } [Symbol.iterator](){ return this; } next(){ var value = this.value; if(value < this.stop){ this.value++; return{ done:false, value:value } } return{ done:true, value:undefined } }}function range(start,stop){ return new RangeIterator(start,stop);}for(var value of range(0,3)){ console.log(value);//0 1 2}//上面代码是一个类部署Iterator接口的写法。//Symbol.iterator属性对应一个函数,执行后返回当前对象的遍历器对象。对于类似数组的对象(存在数值键名和length属性),部署Iterator接口,有一个简便方法,就是
Symbol.iterator
方法直接引用数组的Iterator接口。NodeList.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];//或者NodeList.prototype[Symbol.iterator] = [][Symbol.iterator];console.log([...document.getElementsByTagName('b')]);//[b, b, b, b]下面是类似数组的对象调用数组的
Symbol.iterator
方法的例子。let iterable = { 0:'a', 1:'b', 2:'c', length:3, [Symbol.iterator]:Array.prototype[Symbol.iterator]};for(let item of iterable){ console.log(item);}//a//b//c注意,普通对象部署数组的Symbol.iterator
方法,并无效果。
let iterable = { a:'a', b:'b', c:'c', length:3, [Symbol.iterator]:Array.prototype[Symbol.iterator]};for(let item of iterable){ console.log(item);//undefined undefined undefined}
如果Symbol.iterator
方法对应的不是遍历器生成函数(即会返回一个遍历器对象),解释引擎将会报错。
var obj = {};obj[Symbol.iterator] = ()=> 1;[...obj];// 报错2,调用inerator接口的场合
有一些场合会默认调用Iterator接口(即Symbol.iterator
方法),除了下文会介绍的for...of
循环,还有几个别的场合。(1)解构赋值
//对数组和Set结构进行解构赋值时,会默认调用Symbol.iterator方法。let set = new Set(['a','b','c']);let [x,y] = set;// x='a' y='b'let [n1,...n2] = set;//n1='a' n2=['b','c']
(2)扩展运算符//扩展运算符(...)也会调用默认的iterator接口。var str ='andy';console.log([...str]);//["a", "n", "d", "y"]let arr = ['b','c'];console.log(['a',...arr,'d']);//["a", "b", "c", "d"]//上面代码的扩展运算符内部就调用Iterator接口。
实际上,这提供了一种简便机制,可以将任何部署了Iterator接口的数据结构,转为数组。也就是说,只要某个数据结构部署了Iterator接口,就可以对它使用扩展运算符,将其转为数组。
let arr = [...iterable];
(3)yield*
yield*后面跟的是一个可遍历的结构,它会调用该结构的遍历器接口
let generator = function* (){ yield 1; yield* [2,3,4]; yield 5;};var iterator = generator();console.log(iterator.next());//Object {value: 1, done: false}console.log(iterator.next());//Object {value: 2, done: false}console.log(iterator.next());//Object {value: 3, done: false}console.log(iterator.next());//Object {value: 4, done: false}console.log(iterator.next());//Object {value: 5, done: false}console.log(iterator.next());//{value: undefined, done: true}(4)其他场合
由于数组的遍历会调用遍历器接口,所以任何接受数组作为参数的场合,其实都调用了遍历器接口。下面是一些例子。
- for...of
- Array.from()
- Map(), Set(), WeakMap(), WeakSet()(比如
new Map([['a',1],['b',2]])
) - Promise.all()
- Promise.race()
3,字符串的Iterator接口
字符串是一个类似数组的对象,也原生具有Iterator接口。
var someStr = 'andy';var iterator = someStr[Symbol.iterator]();console.log(iterator.next());//Object {value: "a", done: false}console.log(iterator.next());//Object {value: "n", done: false}console.log(iterator.next());//Object {value: "d", done: false}console.log(iterator.next());//Object {value: "y", done: false}console.log(iterator.next());//Object {value: undefined, done: true}上面代码中,调用Symbol.iterator
方法返回一个遍历器对象,在这个遍历器上可以调用next方法,实现对于字符串的遍历。4,Iterator接口和Generator函数
Symbol.iterator
方法的最简单实现,还是使用介绍的Generator函数var myIterable = {};myIterable[Symbol.iterator] = function*(){ yield 1; yield 2; yield 3;};console.log([...myIterable]);//[1, 2, 3]//或者采用简洁写法let obj = { *[Symbol.iterator](){ yield 'hello'; yield 'andy'; }};for(let x of obj){ console.log(x);}//hello//andy上面代码中,Symbol.iterator
方法几乎不用部署任何代码,只要用yield命令给出每一步的返回值即可。5,遍历器对象的return(),throw()
遍历器对象除了具有next
方法,还可以具有return
方法和throw
方法。
如果你自己写遍历器对象生成函数,那么next
方法是必须部署的,return
方法和throw
方法是否部署是可选的
return
方法的使用场合是,如果for...of
循环提前退出(通常是因为出错,或者有break
语句或continue
语句),就会调用return
方法。
如果一个对象在完成遍历前,需要清理或释放资源,就可以部署return
方法。
6,for...of循环
Symbol.iterator
属性,就被视为具有iterator接口,就可以用for...of
循环遍历它的成员。也就是说,for...of
循环内部调用的是数据结构的Symbol.iterator
方法。for...of
循环可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象(比如arguments
对象、DOM NodeList 对象)、后文的 Generator 对象,以及字符串。//数组原生具备iterator接口(即默认部署了Symbol.iterator属性),//for...of循环本质上就是调用这个接口产生的遍历器;const arr = ['a','b','c'];for(let i of arr){ console.log(i);}//a//b//cconst obj ={};obj[Symbol.iterator] = arr[Symbol.iterator].bind(arr);for(let v of obj){ console.log(v);}//a//b//c//空对象obj部署了数组arr的Symbol.iterator属性,结果obj的for...of循环,产生了与arr完全一样的结果。//for...of循环可以代替数组实例的forEach方法//JavaScript原有的for...in循环,只能获得对象的键名,不能直接获取键值。//ES6提供for...of循环,允许遍历获得键值。var arr1 = ['a','b','c','d'];for(let i in arr1){ console.log(i);}//0//1//2//3for(let i of arr1){ console.log(i);}//a//b//c//d//for...of循环调用遍历器接口,数组的遍历器接口只返回具有数字索引的属性。这一点跟for...in循环也不一样。let arr2 = [7,8,9];arr2.foo=['bar'];for(let i in arr2){ console.log(i);}//0//1//2//foofor(let i of arr2){ console.log(i);}//7//8//9//上面代码中,for...of循环不会返回数组arr的foo属性。Set和Map结构
for...of
循环。let set = new Set(['name','age','sex']);for(let i of set){ console.log(i);}//name//age//sexlet map = new Map();map.set('name','andy');map.set('age',27);map.set('sex','男');for(let [name,val] of map){ console.log(name+':'+val);}//name:andy//age:27//sex:男//上面代码演示了如何遍历 Set 结构和 Map 结构。//值得注意的地方有两个,首先,遍历的顺序是按照各个成员被添加进数据结构的顺序。//其次,Set 结构遍历时,返回的是一个值,而 Map 结构遍历时,返回的是一个数组,该数组的两个成员分别为当前 Map 成员的键名和键值。计算生成的数据结构
有些数据结构是在现有数据结构的基础上,计算生成的。比如,ES6的数组、Set、Map 都部署了以下三个方法,调用后都返回遍历器对象。
entries()
返回一个遍历器对象,用来遍历[键名, 键值]
组成的数组。对于数组,键名就是索引值;对于 Set,键名与键值相同。Map 结构的 Iterator 接口,默认就是调用entries
方法。keys()
返回一个遍历器对象,用来遍历所有的键名。values()
返回一个遍历器对象,用来遍历所有的键值。
let arr = ['a','b','c'];for(let pair of arr.entries()){ console.log(pair);}//[0, "a"]//[1, "b"]//[2, "c"]类似数组的对象
for...of
循环用于字符串、DOM NodeList 对象、arguments
对象的例子。//字符串let str = 'andy';for(let i of str){ console.log(i);}//a//n//d//y//DOM NODELIST对象let b = document.getElementsByTagName('b');for(let i of b){ i.classList.add('listb');}//arguments对象function printArgs(){ for(let i of arguments){ console.log(i); }}printArgs('a','b');//a//b//并不是所有类似数组的对象都具有 Iterator 接口,一个简便的解决方法,就是使用Array.from方法将其转为数组。let arrylike = { 0:'a', 1:'b', length:2}for(let i of Array.from(arrylike)){ console.log(i);}//a//b对象
for...of
结构不能直接使用,会报错,必须部署了 Iterator 接口后才能使用。但是,这样情况下,for...in
循环依然可以用来遍历键名。let arr = { a:'a', b:'b'};for(let i in arr){ console.log(i);}//a//bfor(let i of arr){ console.log(i);//Uncaught TypeError: arr[Symbol.iterator] is not a function}//上面代码表示,对于普通的对象,for...in循环可以遍历键名,for...of循环会报错。
let arr = { a:'a', b:'b'};//一种解决方法是,使用Object.keys方法将对象的键名生成一个数组,然后遍历这个数组。for(let key of Object.keys(arr)){ console.log(key);}//a//b//另一个方法是使用 Generator 函数将对象重新包装一下function* entires(obj){ for(let key of Object.keys(obj)){ yield [key,obj[key]]; }}for(let [key,val] of entires(obj)){ console.log(key+':'+val);}
- ES6--Iterator和for...of循环
- es6 iterator和for...of循环
- ES6--iterator和for-of循环
- es6的iterator和for of循环
- ES6入门——Iterator和for...of循环
- ES6学习笔记(七)Iterator和for...of循环
- 自学-ES6篇-Iterator和for...of循环
- es6 javascript的Iterator 和 for...of 循环
- ES6学习笔记之Iterator和for...of循环
- ES6(二) Iterator(遍历器)和for-of循环
- 5、Iterator和for...of循环—ES6学习笔记
- ES6系列之---Iterator和for...of循环
- 【es6】Iterator 和 for...of
- Iterator和for...of循环
- [es6]Symbol.iterator 和 for of
- ES6 -- 遍历器Iterator和for...of
- ES6 —(Iterator 和 for...of)
- ES6之Iterator和for...of
- "设施问题"总结一
- 有所思,有所悟
- 蓝桥杯
- opencv 小程序170323
- errno包说明
- es6 iterator和for...of循环
- 链表实现
- iOS移动端架构的那些事
- leetcode 刷题(求树的直径)
- 单播、多播(组播)和广播的区别
- git的简单使用
- "opatch apply" failed with Error Code 135/ZOP-51 (文档 ID 2102532.1)
- php的int长度限制
- GYM 100971 L.Chess Match(贪心)