JavaScript中的Object.entries（）方法

We know that everything in JavaScript is an object. It's essential to get the hang of the ways we can play around these objects, traverse them, sort them, access the key-value pairs and values individually so we can get comfy with using them in our application.

我们知道JavaScript中的所有内容都是一个对象。 掌握如何围绕这些对象进行操作，遍历它们，对其进行排序，分别访问键值对和值的方式至关重要，这样我们才能在应用程序中使用它们时变得很舒适。

Open the chrome dev console to try out the examples by right-clicking on the browser → selecting inspect → selecting console or simply type f12.

通过右键单击浏览器→选择检查→选择控制台，打开chrome dev控制台以尝试示例，或者直接键入f12。

Consider the following object,

考虑以下对象，

let squirtle= {
	'type': 'Water', 
	HP: 100, 
	isEvolved: false, 
	'Favorite': 'Jigglypuff'
}
console.log(squirtle);

Output

输出量

{type: "Water", HP: 100, isEvolved: false, Favorite: "Jigglypuff"}
Favorite: "Jigglypuff"
HP: 100
isEvolved: false
type: "Water"
__proto__: Object

Let's say we want to iterate over the values on this object. We can use the object.values() method.

假设我们要迭代此对象上的值。 我们可以使用object.values()方法 。

console.log(Object.values(squirtle));

Output

输出量

(4) ["Water", 100, false, "Jigglypuff"]
0: "Water"
1: 100
2: false
3: "Jigglypuff"
length: 4
__proto__: Array(0)

What if we want to iterate over the individual key value pairs? Here, we make use of the object.entries() method.

如果我们要遍历各个键值对怎么办？ 在这里，我们使用object.entries()方法 。

console.log(Object.entries(squirtle));

Output

输出量

(4) [Array(2), Array(2), Array(2), Array(2)]
0: (2) ["type", "Water"]
1: (2) ["HP", 100]
2: (2) ["isEvolved", false]
3: (2) ["Favorite", "Jigglypuff"]
length: 4
__proto__: Array(0)

Using the object.values() method we get an array with all the values inside it. With object.entries() method we get an array of arrays where each array contains the individual key-value pairs inside it.

使用object.values()方法，我们得到一个数组，其中包含所有值。 使用object.entries()方法，我们得到一个数组数组，其中每个数组都在其中包含各个键-值对。

let myPokemon = Object.entries(squirtle);
console.log(myPokemon);
console.log(myPokemon[0]);

Output

输出量

(4) [Array(2), Array(2), Array(2), Array(2)]
(2) ["type", "Water"]

We can access any key-value pairs using the index in this array. Thus we can say that Object.entries() method returns an array consisting of enumerable property [key, value] pairs of the object whose ordering is the same as that given by looping over the property values of the object manually. We can use this method for listing properties as well as all the key-value pairs of an object.

我们可以使用此数组中的索引访问任何键值对。 因此，可以说Object.entries()方法返回一个数组，该数组由对象的可枚举属性[key，value]对组成，其顺序与通过手动遍历对象的属性值所给定的顺序相同。 我们可以使用此方法列出对象的属性以及所有键值对。

We can now define a general syntax for this method as,

现在，我们可以为此方法定义通用语法，

    object.entries(<name of the object>);

It takes in an object as a parameter and returns us an array.

它接受一个对象作为参数并返回一个数组。

myPokemon.forEach(prop => {
    console.log(prop);
})

Output

输出量

(2) ["type", "Water"]
(2) ["HP", 100]
(2) ["isEvolved", false]
(2) ["Favorite", "Jigglypuff"]

We can use our general array methods too as it returns us an array.

我们也可以使用一般的数组方法，因为它会返回一个数组。

翻译自: https://www.includehelp.com/code-snippets/object-entries-method-in-javascript.aspx