for in ，for of （es 6 新增方法）的特点与区别

总结： 用 for in 来遍历对象 ，for of（ES6 新增方法）来遍历数组 为什么呢？ 举几个例子看一下

for-of 循环不仅支持数组，还支持大多数类数组对象，例如DOM NodeList对象。for-of 循环也支持字符串遍历

例1： 用 for in 和 for of 遍历一个对象

const obj = {
        a: 1,
        b: 2,
        c: 3
    }
    for (let i in obj) {
        console.log(i)
        // a
        // b
        // c
    }
    for (let i of obj) {
        console.log(i)
        // Uncaught TypeError: obj is not iterable 报错了 对象不可编辑

    }

• 从这里看出 for of 不适合遍历对象 ，for in 正常的获取了对象的 key值

例2：用 for in 和 for of 遍历一个数组

 const arr = ['a', 'b', 'c']
    // for in 循环
    for (let i in arr) {
        console.log(i)
        // 0
        // 1
        // 2
    }
    
    // for of
    for (let i of arr) {
        console.log(i)
        // a
        // b
        // c
    }

• 以上代码是对一个数组进行遍历, for in 返回的值为 0、1、2,就是数组的下标， 而 for of 返回的是 a、b、c

for in 的特点

• for … in 循环返回的值都是数据结构的 键值名 如 a:1 返回的是 a。
• 遍历对象返回的对象的key值,遍历数组返回的数组的下标(key)。
• for … in 循环不仅可以遍历数字键名,还会遍历原型上的值和手动添加的其他键。
• 特别情况下, for … in 循环会以看起来任意的顺序遍历键名

for of 的特点

• for…of 适用遍历数/数组对象/字符串/map/set 等拥有迭代器对象的集合.但是不能遍历对象,因为没有迭代器对象.与forEach()不同的是，它可以正确响应break、continue和return语句
• for-of 循环不支持普通对象，但如果你想迭代一个对象的属性，你可以用for-in循环（这也是它的本职工作）或 内建的Object.keys()方法：

 -  const obj = {
      a: 1,
      b: 2,
      c: 3,
      d: 4
    }
    //  利用 object.keys() 方法 就可以使用 for of 方法遍历对象
    for (let i of Object.keys(obj)) {
      console.log(i + '......' + obj[i]);
      // a ...... 1
      // b ...... 2
      // c ...... 3
      // d ...... 4
    }

总上所述：

• for in 用来遍历对象， for of 用来遍历数组
• 如果想用 for of 来遍历对象 那么需要借助 object.keys() 方法 （里面填对象名）