解释JavaScript Object.keys，Object.values和Object.entries方法的基础

处理数据时，我们可能需要将对象转换为数组。 这些方法使我们可以轻松地做到这一点。

首先，给我们一个对象，其中包含美国各州及其首都的清单。

const states = {
  "AZ": "Phoenix",
  "NY": "Albany",
  "VA": "Richmond",
  "Wisconsin": "Madison"
}

Object.keys（）

如果要求我们返回所有键（Javascript对象写为“键：值”对），则可以使用Object.keys（）方法。

function displayKeys(){
  
  const states = {
    "AZ": "Phoenix",
    "NY": "Albany",
    "VA": "Richmond",
    "Wisconsin": "Madison"
  }

return Object.keys(states); // We pass the object as the argument.

// This statement will return an array of [ 'AZ', 'NY', 'VA',      // 'Wisconsin' ].
}

displayKeys(); // Function Call

很简单？

Object.values（）

Object.values与Object.keys非常相似。 但是，它返回一个数组，其中包含提交的对象的值而不是键。

（键：->值）

这是实际的样子。

function displayValues(){
  
const states = {
    "AZ": "Phoenix",
    "NY": "Albany",
    "VA": "Richmond",
    "Wisconsin": "Madison"
  }
  
return Object.values(states); // We pass the object as the argument.

// This statement will return an array of [ 'Phoenix', 'Albany',    // 'Richmond', 'Madison' ].

}

displayValues(); // Function Call

Object.entries（）

最后，我们有Object.entries方法，该方法与前两种方法稍有不同。 Object.entries不选择键值对的任何特定部分，而是转换键和值。 此处的区别在于Object.entries返回数组数组，而Object.keys和Object.values方法都返回单个数组。

在这里，使用Object.entries方法，有一个数组将整个翻译后的对象包装起来，并且该对象中的每个键值对都位于其自己的单独子数组中。

这是将要返回的数组中的数组的示例。

[ [ 'AZ', 'Phoenix' ],
  [ 'NY', 'Albany' ],
  [ 'VA', 'Richmond' ],
  [ 'Wisconsin', 'Madison' ] ]

这是Object.entries方法的完整示例。

function displayEntries(){
  
const states = {
    "AZ": "Phoenix",
    "NY": "Albany",
    "VA": "Richmond",
    "Wisconsin": "Madison"
  }
  
return Object.entries(states);// We pass the object as the argument.
// This statement will return an array of:
// [ [ 'AZ', 'Phoenix' ], [ 'NY', 'Albany' ], 
// [ 'VA', 'Richmond'], [ 'Wisconsin', 'Madison' ] ]

}

displayEntries(); // Function Call

返回元素的顺序

数组中项目的顺序取决于键值对中键的类型。 如果使用数字键，则将根据其键的数值在数组中对值进行排序

例如：

const states = {
    4: "Phoenix",
    1: "Albany",
    2: "Richmond",
    3: "Madison"
  }

// The resulting array will be ordered like so:

[ [ '1', 'Albany' ],
  [ '2', 'Richmond' ],
  [ '3', 'Madison' ],
  [ '4', 'Phoenix' ] ]

如果键不是数字键，则返回数组中的元素将按其原始顺序排列。

包起来

请注意，关键字“键”，“值”或“条目”必须为小写。

此外，如果将非对象作为方法的参数传递，则该方法将尝试将该项目强制转换为对象，然后将其转换为数组。 这可能是某些异常错误的原因。

例：

function displayEntries(){
  
const notAnObject = "Medium.com/@MendelBak"
  
return Object.values(notAnObject); 
// The result of this would be:
// [ 'M', 'e', 'd', 'i', 'u', 'm', '.', 'c', 'o', 'm', '/', '@',
// 'M', 'e', 'n', 'd', 'e', 'l', 'B', 'a', 'k' ]}

displayEntries(); // Function Call

如果您喜欢这篇文章，请分享或称赞，以帮助其他人找到它。

如果您有任何疑问或意见，请在下面发表评论。

From: https://hackernoon.com/explaining-the-basics-of-the-javascript-object-keys-object-values-and-object-entries-methods-a10070cae63a