知道Object.keys，那你知道Object.entries吗？

前言

JavaScript中的对象是一种无序的键值对集合，它可以用来存储和操作各种数据。有时候，我们需要遍历对象的键和值，进行一些操作或者输出。本文将介绍四种遍历对象的键和值的方法，以及它们的优缺点。

for…in循环

for…in循环是最简单和最常用的遍历对象的方法。它可以遍历对象自身和原型链上的所有可枚举的字符串属性，并将属性名赋值给循环变量。例如：

const birds = {
  owl: '🦉',
  eagle: '🦅',
  duck: '🦆',
  chicken: '🐔'
}

for (const key in birds) {
  console.log(`${key} -> ${birds[key]}`)
}
// owl -> 🦉
// eagle -> 🦅
// duck -> 🦆
// chicken -> 🐔

for…in循环的优点是：

• 它可以在所有现代和旧版浏览器中使用，包括IE6+。
• 它可以遍历对象自身和原型链上的属性，这有时候是有用的。

for…in循环的缺点是：

• 它会遍历原型链上的属性，这有时候是不需要的。我们可以使用hasOwnProperty()方法来排除继承的属性
• 它不能保证遍历的顺序，不同的浏览器或者引擎可能有不同的实现。
• 它不能遍历Symbol类型的属性，只能遍历字符串类型的属性。

Object.keys()方法

Object.keys()方法是ES6中新增的一个方法，它可以返回一个数组，包含对象自身（不含原型链）的所有可枚举的字符串属性名。例如：

const birds = {
  owl: '🦉',
  eagle: '🦅',
  duck: '🦆',
  chicken: '🐔'
}

const keys = Object.keys(birds)
console.log(keys)
// [ 'owl', 'eagle', 'duck', 'chicken' ]

然后我们可以使用forEach()方法来遍历这个数组，并获取每个属性的值：

keys.forEach(key => {
  console.log(`${key} -> ${birds[key]}`)
})
// owl -> 🦉
// eagle -> 🦅
// duck -> 🦆
// chicken -> 🐔

Object.keys()方法的优点是：

它可以返回一个数组，方便我们使用数组的方法来操作。

• 它只遍历对象自身的属性，不会遍历原型链上的属性。
• 它可以保证遍历的顺序，按照属性名升序排列。

Object.keys()方法的缺点是：

• 它不能遍历Symbol类型的属性，只能遍历字符串类型的属性。
• 它不兼容旧版浏览器，需要使用polyfill来实现。

Object.values()方法

Object.values()方法是ES8中新增的一个方法，它可以返回一个数组，包含对象自身（不含原型链）的所有可枚举的字符串属性值。例如：

const birds = {
  owl: '🦉',
  eagle: '🦅',
  duck: '🦆',
  chicken: '🐔'
}

const values = Object.values(birds)
console.log(values)
// [ '🦉', '🦅', '🦆', '🐔' ]

然后我们可以使用forEach()方法来遍历这个数组，并输出每个属性值：

values.forEach(value => {
  console.log(value)
})
// 🦉
// 🦅
// 🦆
// 🐔

Object.values()方法的优点是：

• 它可以返回一个数组，方便我们使用数组的方法来操作。
• 它只遍历对象自身的属性，不会遍历原型链上的属性。
• 它可以保证遍历的顺序，按照属性名升序排列。

Object.values()方法的缺点是：

• 它不能遍历Symbol类型的属性，只能遍历字符串类型的属性。
• 它不兼容旧版浏览器，需要使用polyfill来实现。

Object.entries()方法

Object.entries()方法是ES8中新增的一个方法，它可以返回一个数组，包含对象自身（不含原型链）的所有可枚举的字符串属性键值对。每个键值对是一个长度为2的数组，第一个元素是属性名，第二个元素是属性值。例如：

const birds = {
  owl: '🦉',
  eagle: '🦅',
  duck: '🦆',
  chicken: '🐔'
}

const entries = Object.entries(birds)
console.log(entries)
// [
//   [ 'owl', '🦉' ],
//   [ 'eagle', '🦅' ],
//   [ 'duck', '🦆' ],
//   [ 'chicken', '🐔' ]
// ]

然后我们可以使用forEach()方法来遍历这个数组，并输出每个键值对：

entries.forEach(entry => {
  console.log(`${entry[0]} -> ${entry[1]}`)
})
// owl -> 🦉
// eagle -> 🦅
// duck -> 🦆
// chicken -> 🐔

Object.entries()方法的优点是：

• 它可以返回一个数组，方便我们使用数组的方法来操作。
• 它只遍历对象自身的属性，不会遍历原型链上的属性。
• 它可以保证遍历的顺序，按照属性名升序排列。
• 它可以遍历Symbol类型和字符串类型的属性。

Object.entries()方法的缺点是：

• 它不兼容旧版浏览器，需要使用polyfill来实现。

结论

本文介绍了四种遍历对象的键和值的方法，以及它们的优缺点。总结如下：

• for…in循环是最简单和最常用的方法，但它会遍历原型链上的属性，不能保证遍历顺序，也不能遍历Symbol类型的属性。
• Object.keys()方法可以返回一个包含对象自身所有可枚举字符串属性名的数组，但它不能遍历Symbol类型的属性，也不兼容旧版浏览器。
• Object.values()方法可以返回一个包含对象自身所有可枚举字符串属性值的数组，但它不能遍历Symbol类型的属性，也不兼容旧版浏览器。
• Object.entries()方法可以返回一个包含对象自身所有可枚举字符串和Symbol属性键值对的数组，但它不兼容旧版浏览器。

在选择遍历对象的方法时，我们需要根据我们的需求和目标来决定。如果我们需要遍历原型链上的属性，或者不在乎遍历顺序和Symbol类型的属性，我们可以使用for…in循环。如果我们只需要遍历对象自身的属性，并且需要保证遍历顺序和兼容性，我们可以使用Object.keys()、Object.values()或者Object.entries()方法。如果我们需要遍历对象自身的Symbol类型和字符串类型的属性，并且不在乎兼容性，我们可以使用Object.entries()方法。