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

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

可以看到，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

可以看到，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 都可以用来遍历对象的属性，但它们有不同的遍历顺序、遍历属性类型和遍历可枚举性。在使用时，需要根据具体的需求选择合适的方法。