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