使用ES6 for-of循环遍历Object出现TypeError的解决方案咨询

嘿，这个报错太常见啦！你遇到的问题根源在于：普通的JavaScript Object默认没有实现Symbol.iterator接口，而for-of循环只能遍历内置了迭代器的对象（比如数组、Map、Set、String这些）。下面给你几个实用的解决方案：

方案1：改用ES6的Map对象（最推荐） #

既然你的变量名是map，大概率你本来就想使用专门的键值对集合。ES6的Map是为键值对场景设计的，天生支持for-of遍历，用法也很直观：

// 用Map替代普通Object
const map = new Map();
map.set("myKey1", "myVal");
map.set("myKey2", "myVal");

// 直接用for-of遍历，完美支持[key, value]解构
for (let [key, value] of map) {
    console.log(`${key} is ${value}`);
}

方案2：如果坚持用普通Object，借助Object.entries()/Object.keys()/Object.values() #

如果你因为某些原因必须使用普通Object，可以用ES6提供的这几个方法把对象转成可迭代的数组：

遍历键值对（和你原本的需求匹配） #

用Object.entries()，它会返回一个包含所有[键, 值]对的数组：

const map = new Object();
map["myKey1"] = "myVal";
map["myKey2"] = "myVal";

// 把Object转成键值对数组再遍历
for (let [key, value] of Object.entries(map)) {
    console.log(`${key} is ${value}`);
}

只遍历键或值 #

如果只需要键或者值，用对应的方法更高效：

// 只遍历键
for (let key of Object.keys(map)) {
    console.log(`Key: ${key}`);
}

// 只遍历值
for (let value of Object.values(map)) {
    console.log(`Value: ${value}`);
}

方案3：给普通Object添加自定义迭代器（进阶用法） #

这个方法适合有特殊需求的场景，一般不推荐（因为前两种方法足够简单）。我们可以手动给Object添加Symbol.iterator方法，让它支持for-of：

const map = {
    "myKey1": "myVal",
    "myKey2": "myVal",
    // 自定义迭代器
    [Symbol.iterator]() {
        const entries = Object.entries(this);
        let index = 0;
        return {
            next() {
                if (index < entries.length) {
                    return { value: entries[index++], done: false };
                } else {
                    return { done: true };
                }
            }
        };
    }
};

// 现在可以直接用for-of遍历啦
for (let [key, value] of map) {
    console.log(`${key} is ${value}`);
}

总结一下：如果是专门存键值对的场景，优先用Map；如果是普通对象，用Object.entries()就能快速解决问题。

内容的提问来源于stack exchange，提问作者Prashant