iterator原理

Iterator是一种接口机制，为各种不同的数据结构提供统一的访问（循环）机制, 遍历器, 因为现在有Array / Object /Set / Map / String / NodeList / HTMLCollection / Arguments 等结构, 所以ES6 加入了Iterator遍历器, 只要拥有这个Iterator遍历器, 就都可以使用for...of进行遍历.

• 为各种数据结构，提供一个统一的、简便的访问接口

• 使得数据结构的成员能够按某种次序排列

• ES6创造了一种新的遍历命令for...of循环，Iterator接口主要供for...of使用

• Iterator是一个抽象的概念, 具体的实现 for...of / Symbol.iterator

只要可遍历的数据结构的原型上有 Symbol.iterator属性，则此数据就可以使用for...of进行遍历。唯独Object没有。  

let str = "ABCDEFG";
let datas = {}
for (let i of str) {
    datas[i] = [];
}
console.log(datas);

let arr = ["妲己", "貂蝉", "小乔", "安其拉"];
for (let i of arr) {
    console.log(i);//"妲己","貂蝉","小乔","安其拉"
}

//原理
let arr = ["妲己", "貂蝉", "小乔", "安其拉"];
// console.log(arr);
// Symbol.iterator()本身是一个函数，调用后的结果是一个对象，而且这个对象的原型链上有next()方法
let it = arr[Symbol.iterator]();//
console.log(it.next());//{value: '妲己', done: false}
console.log(it.next());//{value: '貂蝉', done: false}
console.log(it.next());//{value: '小乔', done: false}
console.log(it.next());//{value: '安其拉', done: false}
console.log(it.next());//{value: undefined, done: true}

// 为对象部署Symbol.iterator
Object.prototype[Symbol.iterator] = function () {
    let values = Object.values(this);//["妲己",20,"女"]
    let i = 0;
    return {
        next() {
            if (i < values.length) {
                return { value: values[i++], done: false }
            } else {
                return { value: undefined, done: true }
            }
        }
    }
}

let obj = {
    name: "妲己",
    age: 20,
    sex: "女"
}
for(let i of obj){
    console.log(i);
}