es6 for of 循环

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 函数去实现 

原文地址:https://www.cnblogs.com/czkolve/p/10645476.html