for in 与 for of的用法

for in与for of的区别

• 使用for of遍历的内容必须要有迭代器
• for in一般用于遍历对象也可以遍历数组，遍历的是对象的属性或者数组的下标,for of一般用于遍历数组,map,set等，它不能遍历对象 因为对象身上没有迭代器
• for in一般遍历的是key,for of一般遍历的是value

如果非要用for of 遍历对象 以下有可参考的方法

 // 创建一个数组  数组具有迭代器
        const array = [1,2,3] 
        // 创建一个对象
        let obj = {
            name: "张三",
            age: 17
        }

        // 打印数组  数组原型中有迭代器的属性
        // console.dir(array);
        // console.log(Array.prototype[Symbol.iterator]);


        /* 一种行不通的方法 */

        // 将数组的迭代器拷贝到对象中
        obj.__proto__[Symbol.iterator] = Array.prototype[Symbol.iterator]
        // 此时obj的原型空间中有迭代器
        for (let val of obj) {
                console.log(val);
        }
        // 结果是不报错的 但是并不能遍历出数据 因为对象和数组的底层是不一样的  不能数组的迭代器去遍历对象

 // 创建一个数组  数组具有迭代器
        const array = [1,2,3] 
        // 创建一个对象
        let obj = {
            name: "张三",
            age: 17
        }
        /* 方法一 */
        /*
            Object.keys => 将对象里面的所有key值取出来
            Object.values => 将对象里面的所有value取出来 
         */

        //  本质是将对象的value值取出放入数组 将数组用for of 遍历
         for(let val of Object.values(obj)){
            console.log(val);
         }

 // 创建一个对象
 let obj = {
     name: "张三",
     age: 17
 }
//  手动创建对象的迭代器
 obj[Symbol.iterator] = function () {
       const _this = this
       //也可使用: keys = Object.getOwnPropertyNames(this)
       const keys = Object.keys(this)
       let index = 0
          return {
            next() {
               return {
                   value: _this[keys[index++]],
                   done: index > keys.length
              }
           }
        }    
    }
}

 for (let val of obj) {
      console.log(val);
 }

参考文章：JS中让对象支持for...of遍历