在 JavaScript 中循环遍历对象

有时，你可能需要循环遍历 JavaScript 中的对象。在 ES6 之前，唯一的方法是使用for...in循环。

循环的问题for...in在于它会遍历原型链中的属性。当你使用循环遍历一个对象时for...in，你需要检查该属性是否属于该对象。你可以使用来做到这一点hasOwnProperty。

for (var property in object) {
  if (object.hasOwnProperty(property)) {
    // Do things here
  }
}

我们现在不再需要依赖它了for...in。hasOwnProperty有更好的方法。

循环遍历对象的更好方法

循环对象的更好方法是先将对象转换为数组。然后循环遍历该数组。

您可以使用三种方法将对象转换为数组：

Object.keys
Object.values
Object.entries

对象.keys

Object.keys创建一个包含对象属性的数组。以下是示例。

const fruits = {
  apple: 28,
  orange: 17,
  pear: 54,
}

const keys = Object.keys(fruits)
console.log(keys) // [apple, orange, pear]

对象值

Object.values创建一个包含对象中每个属性值的数组。以下是示例：

const fruits = {
  apple: 28,
  orange: 17,
  pear: 54,
}

const values = Object.values(fruits)
console.log(values) // [28, 17, 54]

对象条目

Object.entries创建一个数组的数组。每个内部数组包含两项。第一项是属性；第二项是值。

以下是一个例子：

const fruits = {
  apple: 28,
  orange: 17,
  pear: 54,
}

const entries = Object.entries(fruits)
console.log(entries)
// [
//   [apple, 28],
//   [orange, 17],
//   [pear, 54]
// ]

我最喜欢的是这三种方式，Object.entries因为您可以同时获得键值和属性值。

循环遍历数组

一旦使用、或将对象转换为数组Object.keys，Object.values就Object.entries可以像循环普通数组一样循环它。

// Looping through arrays created from Object.keys
const keys = Object.keys(fruits)
for (const key of keys) {
  console.log(key)
}

// Results:
// apple
// orange
// pear

如果您使用，Object.entries您可能希望将数组解构为其键和属性。

for (const [fruit, count] of entries) {
  console.log(`There are ${count} ${fruit}s`)
}

// Result
// There are 28 apples
// There are 17 oranges
// There are 54 pears

总结

循环对象的更好方法是首先使用这三种方法之一将其转换为数组。

Object.keys
Object.values
Object.entries

然后，像普通数组一样循环遍历结果。

如果本课程对你有帮助，你可能会喜欢学习 JavaScript，在这里你将学习如何从零开始构建任何你想要的东西。学习 JavaScript 的报名将于 2018 年 7 月（两周后）开放！

感谢阅读。本文最初发布在我的博客上。如果您想阅读更多文章来帮助您成为更优秀的前端开发人员，请订阅我的新闻通讯。

鏂囩珷鏉ユ簮锛�https://dev.to/zellwk/looping-through-objects-in-javascript-3c6b