javascript-手动添加Symbol.iterator实现for...of遍历对象

loading 2022年10月30日 81次浏览

for-of不能用于遍历对象,不过可以手动赋予对象Symbol.iterator属性让它可以遍历

直接通过bind将数组的Symbol.iterator属性绑定到obj上

        const arr = [1,2,3];
        const obj = {};
        
        obj[Symbol.iterator] = arr[Symbol.iterator].bind(arr);

        for(let o of obj){
            console.log(o);
	    //1
	    //2
	    //3
        }

不过要注意for...of循环只返回具有数字索引的属性

for...in会遍历手动添加的所有key,甚至包括原型链上的。因此for...in相较于数组更适合遍历对象。

        let arr = [3, 5, 7];
        arr.foo = 'hello';

        for (let i in arr) {
            console.log(i); // "0", "1", "2", "foo"
        }

        for (let i of arr) {
            console.log(i); //  "3", "5", "7"
        }

一种方法是通过Object.keys()来遍历

        const obj = {
            a : 1,
            b : 2,
            c : 3
        }
        for(const key of Object.keys(obj)){
            console.log(key + ':' + obj[key])
        }

另一种方法是通过Generator来包装一下

        let obj = { a : 1, b: 2 };

        obj[Symbol.iterator] = function* () {
            let propKeys = Object.keys(this);

            for (let propKey of propKeys) {
                yield [propKey, this[propKey]];
            }
        }

        for (let [key, value] of obj) {
            console.log(`${key}: ${value}`);
        }