欢迎光临
我们一直在努力

JavaScript | for in VS for of

For in VS For of

例子1:

    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 in遍历对象时,会正常打印出对象的key值。当使用for of遍历对象时,会报错,也就是说for of不能用于对象遍历。

例子2:

    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遍历数组时,会打印出数组的下标。当使用for of遍历数组时会打印出数组的值。

例子3:

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

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

for in循环不仅可以遍历数字键名,还会遍历原型上的值和手动添加的其他键。但for of不会遍历手动添加的值。

For in 特点

For in循环返回的值都是数据结构的键值名。

遍历对象返回对象的key值,遍历数组返回数组的下标。

For in循环不仅可以遍历数字的健名,还会遍历原型上的值和手动添加的键,

特别情况下,for in会以任意顺序遍历健名,因此for in循环特别适合遍历对象。

For of 特点

For of循环用于获取一对兼职对中的值。

一个数据结构只要部署了Symbol.iterator属性,就被视为具有iterator接口,就可以使用for of循环。(同样拓展运算符...和结构赋值等操作也需要iterator接口)

因为例子1这个对象没有System.iterator属性,因此无法被遍历。

Break与continue

For of 和 For in 可以使用break和continue,因此可以随时跳出或中断本次循环。同样具有遍历功能的foreach就不能使用break、continue。

Symbol.iterator

只要有iterator接口的数据都可以使用for of循环:

  • Array
  • Map
  • Set
  • String
  • arguments
  • Nodelist

如果想让对象使用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属性。

赞(0) 打赏
未经允许不得转载:散人研 » JavaScript | for in VS for of
分享到: 更多 (0)

评论 抢沙发

6 + 7 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏