ES6补充篇-for of + iterator

前言

本文主要是补充一些遗漏的知识点，望大家批评指教

1、for of循环方式

在ES6提供了一种新的遍历数据结构的方式 for of 这种循环方式会作为以后遍历所有的数据结构的统一方式

for of示例如下

1、遍历数组

let arr = ['first', 'second', 'third', 'four'];

for (const num of arr) {

    console.log(num);

}
result => first

result => second

result => third

result => four

2.遍历数组可以随时终止循环
let num = [100, 200, 300, 400, 500, 600]

for (const iterator of num) 

    if (iterator > 200) {
    
        break//如果满足条件直接终止循环
        
    }
    log(iterator);
}
result=>100

result=>200

以前的话想要终止循环必须使用数组的some方法或者every方法

3.遍历set数据结构

let set = new Set(['111', '222', '333']);

for (const s of set) {

    console.log(s);
    
}

结果如下

result=>111

result=>222

result=>333

3.遍历map数据结构

let m = new Map();

m.set('aaKey', 'aa');

m.set('bbKey', 'bb')

for (const [key, value] of m) {//这里使用结构

    console.log(key, value);

}

result=>aaKey aa

result=>bbKey bb

5.//遍历对象 无形打脸
let obj = {
    name: "Loki",
    age: 20,
    sex: 'female',
    time: "at 08:00"
};

for (const item of obj) {
    console.log(item);
}

控制台报错直接打脸 这里报错的原因呢，是因为obj对象没有提供iterator接口需要我们手动编写

2.手写对象的terator接口

1.第一种方式
let obj = {
    store: ['1', '2', '3'],
    [Symbol.iterator]: function() {
        let index = 0
        let self = this
        return {
            next() {
                let result = {
                    value: self.store[index],
                    done: index >= self.store.length
                }
                index++
                return result
            }
        }
    }
};

for (const item of obj) {
    console.log(item);//已经实现了iterator接口，这样就可以遍历对象了
}

2.第二种方式
let todoList = {
    life: ['eat', 'sleep', 'drink'],
    learn: ['coding', 'game', 'reading', 'math', 'english'],
    work: ['tea', 'worker', 'teacher'],
    each(callback) {
        const all = [].concat(...this.life, ...this.learn, ...this.work);
        for (const item of all) {
            callback(item)
        }
    },
    [Symbol.iterator]: function() {
        const all = [].concat(...this.life, ...this.learn, ...this.work);
        let index = 0
        return {
            next: function() {
                return {
                    value: all[index],
                    done: index++ >= all.length
                }
            }
        }
    }
};
实现迭代器的用处就是为了，统一对外部暴露出一个接口方便操作，从而不必担心数据的改变，如下

//我只需要实现我的逻辑即可，其他的不担心
//此处的each方法只适用当前环境
todoList.each(item => {
    console.log(item);
})

现在也可以使用for of来遍历todoList了
for (const item of todoList) {
    console.log(item);
}

result=>eat

result=>sleep

result=>sleep

result=>drink

result=>coding

result=>game

result=>reading

result=>math

result=>english

result=>tea

result=>worker

result=>teacher

3.使用generator函数实现iterator接口
let todoList = {
    life: ['eat', 'sleep', 'drink'],
    learn: ['coding', 'game', 'reading', 'math', 'english'],
    work: ['tea', 'worker', 'teacher'],
    [Symbol.iterator]: function*() {
        const all = [].concat(...this.life, ...this.learn, ...this.work);
        for (const item of all) {
            yield item;
        }
    }
};

//遍历
for (const item of todoList2) {
    console.log(item);
}

//结果是一样的

result=>eat

result=>sleep

result=>sleep

result=>drink

result=>coding

result=>game

result=>reading

result=>math

result=>english

result=>tea

result=>worker

result=>teacher

谢谢观看，如有不足，敬请指教