iterator原理

分手后的思念是犯贱 2022-08-28 07:57 150阅读 0赞

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

### **1.作用** ###

*  为各种数据结构，提供一个统一的、简便的访问接口
 *  使得数据结构的成员能够按某种次序排列
 *  ES6创造了一种新的遍历命令for...of循环，Iterator接口主要供for...of使用
 *  Iterator是一个抽象的概念, 具体的实现 for...of / Symbol.iterator

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

### 2.for...of 基本使用 ###

### 3.for...of原理 ###

//原理
    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}

###  ###

### 4.对对象部署iterator接口 ###

// 为对象部署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);
    }