【ES6入門13】：Iterator

chnmagnus 發(fā)布于2019-08-23 12:34 / 3181人閱讀

摘要：中，操作某些數(shù)據(jù)結(jié)構(gòu)時，怎么用一個統(tǒng)一的方法操作，接口實現(xiàn)了這樣的功能在數(shù)組中的應(yīng)用數(shù)組內(nèi)部實現(xiàn)了接口，所以直接調(diào)用表示數(shù)組元素，表示循環(huán)是否有下一步狀態(tài)，沒有下一步了，循環(huán)沒有結(jié)束自定義接口沒有內(nèi)置接口，自定義接口，讓也可以使用聲明接口方

es6中，操作某些數(shù)據(jù)結(jié)構(gòu)（array object map set）時，怎么用一個統(tǒng)一的方法操作，Iterator接口實現(xiàn)了這樣的功能

1.Iterator在數(shù)組中的應(yīng)用

{
    let arr = ["hello", "world"];
    // 數(shù)組內(nèi)部實現(xiàn)了iterator接口，所以直接調(diào)用[Symbol.iterator]()
    let map = arr[Symbol.iterator]();
    console.log(map.next()); // {value: "hello", done: false}
    console.log(map.next()); // {value: "world", done: false}
    console.log(map.next()); // {value: undefined, done: true}
    // value 表示數(shù)組元素，done表示循環(huán)是否有下一步狀態(tài)，true:沒有下一步了，false:循環(huán)沒有結(jié)束
}

2.自定義Iterator接口

{
    // object沒有內(nèi)置iterator接口，自定義iterator接口，讓obj也可以使用for...of
    let obj = {
        start: [1,2,3],
        end: [4,5,6],
        // 聲明iterator接口方法
        [Symbol.iterator]() {
            // 先遍歷start，再遍歷end
            let arr = this.start.concat(this.end);
            let index = 0;
            // 返回next()
            return {
                next() {
                    if (index < arr.length) {
                        return {
                            value: arr[index++],
                            done: false
                        }
                    } else {
                        return {
                            value: arr[index++],
                            done: true
                        }
                    }
                }
            }
        }
    };
    // for...of 實現(xiàn)的原理就是不斷調(diào)用Iterator接口
    // 通過 for...of 驗證接口是否配置成功，如果沒有配置成功，object就無法使用 for...of循環(huán)
    for (let key of obj) {
        console.log(key); // 1 2 3 4 5 6
    }
}

3.for...of循環(huán)

{
    // 數(shù)組內(nèi)部實現(xiàn)了iterator接口，所以可以直接使用for...of循環(huán)
    let arr = ["hello", "world"];
    for (let value of arr) {
        console.log(value); // hello world
    }
}