前端易混知识点：for in 和 for of的区别 | 8月更文挑战 for…of 是作为ES6新增的遍历方式,允许遍

这是我参与8月更文挑战的第4天，活动详情查看：8月更文挑战

for…of 是作为ES6新增的遍历方式,允许遍历一个含有iterator接口的数据结构并且返回各项的值; 而 for...in 是ES3 中的方法，用于获取对象的键名。

它们的区别如下：

for...in

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

for...of

用来获取一对键值对中的值，原理是遍历对象内部的iterator接口。有iterator接口的有如下类型：

数组 Array
Map
Set
String
arguments对象
Nodelist对象, 就是获取的dom列表集合

-以上这些都可以直接使用 for of 循环。凡是部署了 iterator 接口的数据结构也都可以使用数组的扩展运算符(...)、和解构赋值等操作。

for...of的特点

可以代替数组实例的forEach方法，但不同于forEach方法，它可以与break、continue和return配合使用。
提供了遍历所有数据结构的统一操作接口。

代码示例

例一遍历对象

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 报错了
    }

例1这个对象,没有 Symbol.iterator这个属性,所以使用 for of会报 obj is not iterable。

如果非要使用for...of的话，可以这样做：## 使用 Object.keys() 获取对象的 key值集合后,再使用 for of

const obj = {
        a: 1,
        b: 2,
        c: 3
    }

    for (let i of Object.keys(obj)) {
        console.log(i)
        // 1
        // 2
        // 3
    }

也可以给一个对象部署 Symbol.iterator属性。

例二遍历数组

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遍历键名和手动添加的其他键。

  const arr = ['a', 'b']
    // 手动给 arr数组添加一个属性
    arr.name = 'qiqingfu'
    
    // for in 循环可以遍历出 name 这个键名
    for (let i in arr) {
        console.log(i)
        // 0
        // 1
        // name
    }

前端易混知识点：for in 和 for of的区别 | 8月更文挑战