es6 新增了 for of 循环,只要继承了Iterator 接口的数据集合都可以使用 for of 去循环
for of 循环,统一数据集合的循环方法,解决了forEach循环的不能使用break contain ,遍历时,循环能够按某种方式排序
js 集合中能默认使用for of 有,数组,类数组,字符串,map,set
// for of 数组 for (let item of [1,2,3,4,5]) { console.log(item); //1,2,3,4,5 } //for of set for (let item of new Set().add('2').add('3').add('4')) { console.log(item); //2,3,4 } //for of map for (let item of new Map().set({a:'1'},'2').set({a:'2'},'3').set({a:'2'},'4')) { console.log(item); //[{0:{a:'1'},1:undefined},2],[{0:{a:'2'},1:undefined},3][{0:{a:'2'},1:undefined},4] } // for of 字符串
//使用generator 函数 类数组实现iterator接口 let lszarray3 = { 0: '1234', 1: '321', 2: '12311', length: 3, } lszarray3[Symbol.iterator] = function* () { let index = 0; let leng = this.length let _self = this for(;parseInt(index) < leng;index++) { yield [index,_self[index]] } } for(let item of lszarray3) { console.log(item) //{0:1234} {1:321} {2 12311} } //使用generator 函数 对象实现iterator接口 //第一种方法 let lszarray4 = { a: '12345', b: '321', c: '12311', } lszarray4[Symbol.iterator] = function* () { let keys = Object.keys(this) for(key of keys) { yield [key,this[key]] } } for(let item of lszarray4) { console.log(item) //{a:1234} {b:321} {c 12311} }
for(let item of 'aaabbb') { console.log(item) //a a a b b b } //类数组 没找到列子,不是所有的类数组都能使用for of let lszarray = { 0: '123', 1: '321', 2: '12311', length: 3 } /* for(let item of lszarray) { lszarray is not iterable } */ // 要使类数组能使用 for of 则必须给类添加 Iterator 接口 // iterator 接口部署在 Symbol.iterator 属性上 lszarray[Symbol.iterator] = function () { let index = 0; let self = this return { next: function () { if(index < self.length) { return { value: self[index++], done: false } } else { return { value: 1, done: true } } } } } for(let item of lszarray) { console.log(item) // 123 321 12311 }
对象默认使不能够使用for of 的,如果想要对象能使用 for of 则必须为对象添加Iterator接口,添加接口的方式和类数组差不多
/ 对象使用 for of 循环 // 新建一个对象objs let objs = { a: 'cz', b: 'czzzz', c: '1233', vc: '2222' } //为objs 添加 Iterator //在对象的Symbol.iterator 上添加方法 objs[Symbol.iterator] = function () { let keys = Object.keys(this); let _self = this; let index = 0 return { next () { if(index < keys.length) { return { value: _self[keys[index++]], done: false } } else { return { value: 1, done: true } } } } } for(let item of objs) { console.log(item) //cz czzzz 1233 2222 }
对于类数组来说,还有更简单的实现Iteration 的方式,直接引用数组上的[Symbol.iterator]方法
1 //类数组 直接引用数组上的Symbol.iterator 2 let lszarray2 = { 3 0: '123', 4 1: '321', 5 2: '12311', 6 length: 3, 7 [Symbol.iterator]: [][Symbol.iterator] 8 } 9 for(let item of lszarray2) { 10 console.log(item) //123 321 12311 11 }
对于Iteraot 接口,还可以使用generator 函数去实现