ES6中Iterator接口怎么用

這篇文章主要介紹了ES6中Iterator接口怎么用，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

es6中，操作某些數據結構（array object map set）時，怎么用一個統一的方法操作，Iterator接口實現了這樣的功能

1.Iterator在數組中的應用

{
    let arr = ['hello', 'world'];
    // 數組內部實現了iterator接口，所以直接調用[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 表示數組元素，done表示循環是否有下一步狀態，true:沒有下一步了，false:循環沒有結束
}

2.自定義Iterator接口

{
    // object沒有內置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 實現的原理就是不斷調用Iterator接口
    // 通過 for...of 驗證接口是否配置成功，如果沒有配置成功，object就無法使用 for...of循環
    for (let key of obj) {
        console.log(key); // 1 2 3 4 5 6
    }
}

3.for...of循環

{
    // 數組內部實現了iterator接口，所以可以直接使用for...of循環
    let arr = ['hello', 'world'];
    for (let value of arr) {
        console.log(value); // hello world
    }
}

感謝你能夠認真閱讀完這篇文章，希望小編分享ES6中Iterator接口怎么用內容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!