js中for in和for of详解

for…in 和 for…of 区别，以及使用

for…of 的特性

1. for…of 需要有 iterator 的支持才能进行遍历。
2. 有 iterator 支持的数据结构有：Array Map Set String 函数的arguments对象 NodeList对象
3. object 对象不可以，因为 object 中的属性没有先后顺序，但是可以主动添加 iterator 属性
4. 如何添加 iterator 属性，在对象中添加 “Symbol.iterator” 属性，就可以使用 for…of 遍历了
5. 凡是部署了 iterator 接口的数据结构也都可以使用数组的 扩展运算符(…)、和解构赋值等操作

for…in 的特性

1. 遍历的是对象的值，并且会遍历到原型链上去，可以通过两种方法解决
2. 通过 hasOwnProperty 去判断是否是自身对象的属性
3. 通过在原型上添加属性时，加上配置，让该添加的属性不可枚举，这样 for…in 就不会被遍历到了

// for...of 不能遍历没有 iterator 支持的数据结构
const obj = { a: 1, b: 2, c: 3 }
for (let item in obj) {
    console.log(item)   // a b c
}
for (let item of obj) {
    console.log(item)   // Uncaught TypeError: obj is not iterable
}

// object 对象没有 iterator 属性，手动添加 iterator 属性 
let obj = {
    name: "Joker_Peng",
    age: 22,
    job: 'Engineer',
    // 这个属性就是 for...of 依据的关键
    [Symbol.iterator](){
        let self = this
        // Object.keys 和 map.keys 方法是不同的，前者返回的就是一个键组成的数组，后者是一个 iterator 对象
        let 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) // Joker_Peng  22  Engineer
}

// for...in 中的坑点
let arr = [1,2,3,4]
Array.prototype.a = 5
for(let item in arr){
    console.log(item) // 0 1 2 3 a  返回的数据为数组的下标，但是会返回对象原型上的可枚举的数据
}
// 方法一
for(let item in arr){
    if(!arr.hasOwnProperty(item)) continue
    console.log(item) // 0 1 2 3  就不会遍历到原型上的数据了
}
// 方法二
Object.defineProperty(Array.prototype, "b", {
    value: 6,
    enumerable: false  // 是否可枚举
})
for(let item in arr){
    console.log(item) // 0 1 2 3 a
}