javascript自定義一個迭代器

時間 2019-11-11

原文原文鏈接

js中對象分爲可迭代和不可迭代若是是可迭代哪它就會有一個[Symbol.iterator] 函數html

這個函數就是對象的迭代器函數，如用for of 若是遍歷的對象沒有這個迭代方法那麼就會報錯
web

for of 傳入的是可迭代對象,可是如何吧一個不可迭代的對象變爲可迭代的對象呢！數組

很簡單就是本身寫一個[Symbol.iterator] 函數。函數

代碼以下:ui

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        let obj = {
            a: 1,
            b: 2
        }

        obj[Symbol.iterator] = function () {
            //取到對象的每一個key值返回一個數組
            let keys = Object.keys(obj);
            //取到key值的長度
            let len = keys.length;
            //定義循環變量
            let n = 0;
            //返回對象 每次迭代會自動調用對象裏面的next方法
            return {
                next() {
                    //返回值有value和done
                    //value能自定義
                    //done爲true跳出循環
                    return n < len ? {
                        value: { k: keys[n], v: obj[keys[n++]] },
                        done: false
                    } : {
                            done: true
                        }
                }
            }
        }
        //循環 
        //for of 只能遍歷可迭代對象
        //因此本身寫了個迭代器 詳情請查閱web迭代協議
        //返回的是個對象的key和value
        for (let { k, v } of obj) {
            console.log(k, v);
        }
    </script>
</body>

</html>

使用生成器迭代也就是Generator函數代碼以下:spa

let obj = {
            a: 1,
            b: 2
        }
        obj[Symbol.iterator] = function *(){
           let keys = Object.keys(obj);
           //取到key值的長度
           let len = keys.length;
           //定義循環變量
            let n = 0;
            //條件判斷
            while(n < len) {
                yield {k:keys[n],v: obj[keys[n++]]};
            }
        }
    //返回的是個對象的key和value
        for (let {k,v} of obj) {
            console.log(k,v);
        }