ES7 中新增的 Object.entries() 方法可以将一个对象转换成键值对数组，使得我们更加方便地进行遍历和操作。本文将详细介绍 Object.entries() 的用法及其在前端开发中的应用。
用法
Object.entries() 方法接收一个对象作为参数，并返回一个包含其键值对的数组。下面是一个简单的示例：
----- --- - - ---- ------ ------ ------- -- ----- ------- - -------------------- --------------------- -- ----------- ------- --------- ---------
从上面的代码中我们可以看到，Object.entries() 将 obj 对象转换成了包含两个子数组的数组。每个子数组都包含原来对象的一个键值对，其中第一个元素为键，第二个元素为值。
需要注意的是，Object.entries() 方法返回的数组中的子数组的元素顺序与对象中键值对的添加顺序有关。所以我们也可以使用该方法按照某种顺序进行排序，例如按照键的字母顺序：
----- --- - - -- -------- -- --------- -- -------- -- ----- ------- - --------------------------------- ------- -- -------------------------- --------------------- -- --------- ---------- ----- --------- ----- ----------
在上面的代码中，我们使用 sort() 方法对返回的数组进行排序，其中要比较的两个元素分别为子数组的第一个元素（即键），使用 localeCompare() 方法进行字符串的字典序比较，实现按照键的字母顺序排序。
应用
在前端开发中，Object.entries() 方法具有广泛的应用，下面我们为大家举例说明。
1. 对象转换成 URL 参数
前端中常常需要将一个对象转换成 URL 参数的形式，如下所示：
----- ------ - - ---- ------ ------ ------- -- ----- ----------- - --------------------------- -- --------------------------------------------------------------------------- ------------------------- -- ------------------------
在上面的代码中，我们使用 Object.keys() 方法获取到对象参数的所有键名，然后使用 map() 方法将其转换为 key=value 的形式，并进行 URL 编码，最后通过 join('&') 方法将其拼接成字符串。
使用 Object.entries() 方法实现相同功能的代码如下所示：
----- ------ - - ---- ------ ------ ------- -- ----- ----------- - --------------------------------- ------- -- --------------------------------------------------------------------- ------------------------- -- ------------------------
上面的代码中，我们使用 Object.entries() 方法将对象转换成键值对数组，并在 map() 方法中直接使用子数组的元素进行拼接操作，避免了多次使用 params 对象的性能损耗，使得代码更加简洁。
2. 过滤对象属性
在前端开发中，经常需要根据某种条件过滤对象的某些属性，下面是使用 Object.entries() 方法实现该功能的示例代码：
----- --- - - ---- -- ---- -- ------ -- ------ - -- ----- ----------- - ---------------------------------------------------- ------- -- ----- - ---- ------------------------- -- ---- ------ -- ------ - -
在上述代码中，我们先使用 Object.entries() 方法将 obj 对象转换成键值对数组，然后使用 filter() 方法过滤出键值对中值大于 2 的子数组。最后，我们使用 Object.fromEntries() 方法将过滤后的键值对数组转换成对象类型，得到只包括需要属性的新对象。
结论
Object.entries() 方法具有将对象转换为键值对数组的功能，可以避免多次访问对象性能低下的问题，提升代码执行效率。在前端的开发过程中，Object.entries() 方法可以帮助我们更加方便地进行对象的遍历和操作，提高代码的可读性和优化性能，是一个非常有用的工具。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670df4885f551281025f2eb9