谈谈for in和for of的区别

for in 与 for of

简单记住一句话：：：：
for in 和 for of 简单来说就是它们两者都可以用于遍历，不过for in遍历的是数组的索引（index），而for of遍历的是数组元素值

总而言之： for in 得到的是 key （键）
for of 得到的是 value（值）

      for in总是得到对象的key或数组、字符串的下标
      for of总是得到对象的value或数组、字符串的值

• for in（ES1）
  for in和for循环方式历史悠久，从ECMAScript 1就被支持。
  for in 用来循环数组不是一个合适的选择。
  迭代的是属性key，不是值。
  由于属性 key 是字符串，迭代出的元素索引是 string,不是 number，不能直接进行运算，

我们来看代码：

var arr = ['你','还','好','吗']

    for (let a in arr) {
        //看看for in 拿到的a 是什么 看下面的图
        console.log(a)
 ![](/i/l/?n=22&i=blog/2980354/202211/2980354-20221109131332492-361943542.jpg)

        //我们可以看到，拿到的a是一个数组的索引并且是字符串格式，我们想用的话就要记得把他当成索引来用
        console.log(arr[a])
![](/i/l/?n=22&i=blog/2980354/202211/2980354-20221109131347510-1073916133.jpg)

    }

• for of（ES6）
  再来说说ES6 中的 for of
  for of遍历的是数组元素值，而且for of遍历的只是数组内的元素，不包括原型属性和索引

for of适用遍历数/数组对象/字符串/map/set等拥有迭代器对象（iterator）的集合，但是不能遍历对象，因为没有迭代器对象，但如果想遍历对象的属性，你可以用for in循环（这也是它的本职工作）或用内建的Object.keys()方法

我们来看代码：

var arr = ['你','还','好','吗']
        //还是上面的代码 把in 换成of
    for (let a of arr) {
        // a直接就是数组里面的值
        console.log(a)
![](/i/l/?n=22&i=blog/2980354/202211/2980354-20221109131355101-191234475.jpg)

        // undefined，因为数组里面没有索引为 [你] 的数据嘛
        console.log(arr[a])
![](/i/l/?n=22&i=blog/2980354/202211/2980354-20221109131401761-1677875287.jpg)

    }

• for in 进阶用法（重要）

上面我们讲了for in 只能遍历key，看起来非常的鸡肋，但是我们突然想到有个地方一直用到key，，，，那就是对象。我们使用for in 遍历对象的key 非常方便
还记得什么是对象吧，{name:'张三'} ======》{key：value}
看代码：：

 // 定义一个对象
   const obj = {
        name: '张三',
        age: 18,
        fn: function () {
            console.log('你好 for..in')
        }
    }
    //使用for in 遍历对象
    for (let k in obj) {
            console.log(k)
        }
    
    // 看看结果
    ![](/i/l/?n=22&i=blog/2980354/202211/2980354-20221109131414850-780128870.jpg)

• 总结在上面已经说过了这里就不再啰嗦了，大家要记得 for in 并不是一无是处还可以遍历对象，遍历其他的东西就交给es6的for of 吧