关键词搜索

源码搜索 ×
×

JavaScript对象遍历利器:Object.entries 与 for...in 的区别

发布2023-04-26浏览699次

详情内容

Object.entries 与 for…in 的区别

在 JavaScript 中,Object.entries 和 for…in 都可以用来遍历对象的属性。它们的区别在于遍历的顺序、遍历的属性类型和遍历的可枚举性。

Object.entries

Object.entries 方法返回一个给定对象自身可枚举属性的键值对数组。这个数组的顺序是按照对象属性的插入顺序排列的。

下面是一个示例,演示了如何使用 Object.entries 遍历对象的属性:

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

for (const [key, value] of Object.entries(obj)) {
  console.log(`${key}: ${value}`);
}

    在这个示例中,我们定义了一个对象 obj,它有三个属性 a、b、c。然后,我们使用 Object.entries 方法将这个对象转换成一个键值对数组,并使用 for…of 循环遍历这个数组。在循环中,我们使用解构赋值将数组的第一个元素赋值给 key,将第二个元素赋值给 value,然后输出这个键值对。

    输出结果如下:

    a: 1
    b: 2
    c: 3
    
    • 1
    • 2
    • 3

    可以看到,Object.entries 方法按照对象属性的插入顺序排列了键值对数组,然后我们使用 for…of 循环遍历这个数组,输出了每个属性的键值对。

    for…in

    for…in 循环可以用来遍历对象的属性,包括继承的属性。它的顺序是不确定的,可能会受到 JavaScript 引擎的优化和实现的影响。

    下面是一个示例,演示了如何使用 for…in 循环遍历对象的属性:

    const obj = { a: 1, b: 2, c: 3 };
    
    for (const key in obj) {
      console.log(`${key}: ${obj[key]}`);
    }
    

      在这个示例中,我们定义了一个对象 obj,它有三个属性 a、b、c。然后,我们使用 for…in 循环遍历这个对象的属性。在循环中,我们输出每个属性的键和值。

      输出结果如下:

      a: 1
      b: 2
      c: 3
      
      • 1
      • 2
      • 3

      可以看到,for…in 循环遍历了对象的所有属性,包括继承的属性。它的顺序是不确定的,可能会受到 JavaScript 引擎的优化和实现的影响。

      Object.entries 与 for…in 的区别

      Object.entries 和 for…in 都可以用来遍历对象的属性,但它们有以下区别:

      1. 遍历顺序:Object.entries 方法按照对象属性的插入顺序排列键值对数组,而 for…in 循环的顺序是不确定的,可能会受到 JavaScript 引擎的优化和实现的影响。

      2. 遍历属性类型:Object.entries 方法只遍历对象自身的可枚举属性,不包括继承的属性和 Symbol 类型的属性,而 for…in 循环遍历对象的所有属性,包括继承的属性和 Symbol 类型的属性。

      3. 遍历可枚举性:Object.entries 方法只遍历对象自身的可枚举属性,不包括不可枚举的属性,而 for…in 循环遍历对象的所有属性,包括不可枚举的属性。

      因此,在使用 Object.entries 和 for…in 时,需要根据具体的需求选择合适的方法。

      结论

      Object.entries 和 for…in 都可以用来遍历对象的属性,但它们有不同的遍历顺序、遍历属性类型和遍历可枚举性。在使用时,需要根据具体的需求选择合适的方法。

      相关技术文章

      点击QQ咨询
      开通会员
      返回顶部
      ×
      微信扫码支付
      微信扫码支付
      确定支付下载
      请使用微信描二维码支付
      ×

      提示信息

      ×

      选择支付方式

      • 微信支付
      • 支付宝付款
      确定支付下载