for-in与for-of的区别JS

// for-in只能获取键名，但是不能获取键值（但是可以通过obj[]获取键值）
let obj = {
    name: 'yzx',
    age: '18'
}
obj.__proto__.sex = '男'
// for-in 可以获取原型上的键
for(let key in obj){
    console.log(key) // name age sex
// 如果想要通过 for-in 获取值  不能用 . 因为此时的key是一个变量 而此时的obj当中是没有key这个属性的 所以会返回undefined
    console.log(obj[key]) // yzx 18 男
}


// for-of 不能遍历对象  因为对象没有Symbol.iterator迭代器接口
for(let key of obj){
    console.log(key) // Uncaught TypeError: obj is not iterable
}
// 但是如果想要通过 for-of 来遍历对象 可以添加迭代器接口
// 为对象添加Iterator 接口;(ES5)
let obj = {
    name: "yzx",
    age: 18,
    sex: '男',
    [Symbol.iterator]() {
        const self = this;
        const keys = Object.keys(self);
        let index = 0;
        return {
            next() {
                if (index < keys.length) {
                    return {
                        value: self[keys[index++]],
                        done: false
                    };
                } else {
                    return { value: undefined, done: true };
                }
            }
        };
    }
};
 
for(let item of obj) {
    console.log(item); // yzx 18 男
}
// 以下为ES6的写法
let obj = {
    name: 'yzx',
    age: 18,
    sex: '男',
    // * 不能去掉哦
    * [Symbol.iterator](){
        // 因为可能会嵌套很多层，所以此时需要先保存此时的this值
        const that = this
        const keys = Object.keys(that)
        for(let i =0;i<keys.length;i++){
            yield that[keys[i]]
        }
    }
}
// 获取键值也可以使用Object.keys(obj) / Object.values(obj)