如何遍历JavaScript中的对象

Once in a while, you may need to loop through objects in JavaScript. The only way to do so before ES6 was with a for...in loop.

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

The problem with a for...in loop is that it iterates through properties in the Prototype chain. When you loop through an object with the for...in loop, you need to check if the property belongs to the object. You can do this with hasOwnProperty.

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

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

We no longer have to rely on for...in and hasOwnProperty now. There’s a better way.

现在，我们不再需要for...in和hasOwnProperty 。有更好的方法。

遍历对象的更好方法 (A better way to loop through objects)

The better way to loop through objects is first to convert the object into an array. Then, you loop through the array.

遍历对象的更好方法是首先将对象转换为数组。 然后，您遍历数组。

You can convert an object into an array with three methods:

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

Object.keys

Object.keys
Object.values

Object.values
Object.entries

Object.entries

对象键 (Object.keys)

Object.keys creates an array that contains the properties of an object. Here’s an example.

Object.keys创建一个包含对象属性的数组。这是一个例子。

const fruits = { apple: 28, orange: 17, pear: 54 };
const keys = Object.keys(fruits);console.log(keys); // ["apple", "orange", "pear"]

对象值 (Object.values)

Object.values creates an array that contains the values of every property in an object. Here’s an example:

Object.values创建一个数组，其中包含对象中每个属性的值。这是一个例子：

const fruits = { apple: 28, orange: 17, pear: 54 };
const values = Object.values(fruits);console.log(values); // [28, 17, 54]

对象条目 (Object.entries)

Object.entries creates an array of arrays. Each inner array has two items. The first item is the property; the second item is the value.

Object.entries创建一个数组数组。每个内部数组都有两个项目。第一项是财产；第二项是值。

Here’s an example:

这是一个例子：

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

My favorite of the three is Object.entries, because you get both the key and property values.

我最喜欢的三个是Object.entries ，因为您同时获得了键和属性值。

遍历数组 (Looping through the array)

Once you’ve converted the object into an array with Object.keys, Object.values, or Object.entries, you can loop through it as if it was a normal array.

一旦将对象转换为具有Object.keys ， Object.values或Object.entries的数组，就可以像遍历普通数组一样遍历该对象。

const fruits = { apple: 28, orange: 17, pear: 54 };
// Looping through arrays created from Object.keys
const keys = Object.keys(fruits);for (const key of keys) {  console.log(keys);
}// ["apple", "orange", "pear"]
// ["apple", "orange", "pear"]
// ["apple", "orange", "pear"]

If you use Object.entries, you might want to destructure the array into its key and property.

如果使用Object.entries ，则可能需要将数组解构为其键和属性。

const fruits = { apple: 28, orange: 17, pear: 54 };
const entries = Object.entries(fruits);for (const [fruit, count] of entries) {console.log(`There are ${count} ${fruit}s`);
}// "There are 28 apples"
// "There are 17 oranges"
// "There are 54 pears"

结语 (Wrapping up)

The better way to loop through objects is first convert it into an array with one of these three methods.

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

Object.keys

Object.keys
Object.values

Object.values
Object.entries

Object.entries

Then, you loop through the results like a normal array.

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

If this lesson has helped you, might enjoy Learn JavaScript, where you’ll learn how to build anything you want from scratch. Enrollment for Learn JavaScript opens in July 2018 (very soon!).

如果本课程对您有所帮助，请享受Learn JavaScript ，在这里您将学习如何从头开始构建任何内容。学习JavaScript的注册将于2018年7月开放(很快！)。

Thanks for reading. Did this article help you in any way? If I did, I hope you consider sharing it; you might just help someone who felt the same way you did before reading the article. Thank you.

谢谢阅读。本文对您有任何帮助吗？如果我做到了，我希望你考虑分享它；您可能只是帮助与您在阅读本文之前一样的人。谢谢。

This article was originally posted at my blog. Sign up for my newsletter if you want more articles to help you become a better frontend developer.

本文最初发布在我的博客上。 如果您想获得更多文章来帮助您成为更好的前端开发人员，请注册我的时事通讯。

翻译自: https://www.freecodecamp.org/news/how-to-loop-through-objects-in-javascript-a80b7d2478ac/