ES9 中，JavaScript 为对象新增了两个方法：Object.entries() 和 Object.values()。这两个方法都返回对象属性的特定部分。在本文中，我们将深入研究这两个方法的使用方式及其在前端领域中的应用。
Object.entries()
Object.entries() 方法将对象转换为一个键值对数组，其中每个数组元素代表对象的一个属性。每个数组元素由两个部分组成：属性名和属性值。示例代码如下：
const myObject = {
name: "John",
age: 30,
city: "New York"
};
const entries = Object.entries(myObject);
console.log(entries);上述代码将输出以下数组：
[["name", "John"], ["age", 30], ["city", "New York"]]
从上述示例中可以看出，Object.entries() 方法将每个属性都表示为一个数组，其中属性名作为数组的第一个元素，属性值作为第二个元素。
应用案例
Object.entries() 方法在处理对象时非常有用，尤其是在从服务器取回 JSON 数据时。例如，以下示例代码演示了如何使用 Object.entries() 方法将 JSON 数据转换为 HTML 表格：
-- -------------------- ---- ------- ----- ---- - --------- ------------- ------------ ---- -------- ----- -------- - ----------------- ----- ----- - -------------------------------- ----- ----- - -------------------------------- --- ------ ----- ------ -- ------------------------- - ----- --- - ----------------------------- ----- --- - ----------------------------- --------------- - ---- --------------------- ----- --- - ----------------------------- --------------- - ------ --------------------- ----------------------- - ------------------------- ---------------------------------
以上代码创建了一个包含三个属性的对象。接下来，将该对象传递给 Object.entries() 方法，该方法返回一个数组，其中包含每个属性的键值对。
使用 for...of 循环遍历该数组，并根据每个键值对创建一行 HTML 表格。每行拥有两个单元格，一个显示键，一个显示值。最终，整个表格被插入到页面中，显示对象的属性和值。
Object.values()
Object.values() 方法与 Object.entries() 方法类似，但不返回属性名，而是返回属性值数组。示例代码如下：
const myObject = {
name: "John",
age: 30,
city: "New York"
};
const values = Object.values(myObject);
console.log(values);上述代码将输出以下数组：
["John", 30, "New York"]
应用案例
Object.values() 方法通常用于更好的数组过滤和去重。下面是一个使用 Object.values() 方法完成数组去重的示例代码：
const duplicatesArray = [2, 5, 7, 2, 9, 5, 1, 5, 3]; const uniqueValues = [...new Set(Object.values(duplicatesArray))]; console.log(uniqueValues);
以上代码中，首先创建了一个包含重复值的数组。接下来，将该数组传递给 Object.values() 方法，该方法返回一个数组，其中包含重复值。将返回的数组传递给 Set 对象进行去重并使用展开运算符将其转换回数组。
最终，输出的 uniqueValues 数组将只包含数组中的唯一值。
总结
Object.entries() 和 Object.values() 方法是 JavaScript 中的两个重要新功能，可帮助开发人员更轻松地处理对象和数组。使用 Object.entries() 方法的开发人员可以轻松地将对象转换为键值对数组，并使用 Object.values() 方法可以返回对象的属性值数组。
我们在本文中一并讨论了这两个方法的应用案例，它们可以在前端开发中帮助我们优化代码。我们希望这篇文章可以帮助读者深入了解 Object.entries() 和 Object.values() 方法的使用，以及如何使用它们优化开发工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6468810c968c7c53b08b2228