随着 ECMAScript 2021（以下简称 ES2021）的到来，越来越多的新功能和 API 在前端开发中得到广泛应用。其中，Object.entries 是一个非常实用的方法，它可以让我们更方便地提取对象属性及其值。本文将详细介绍如何使用 Object.entries，以及如何在实际开发中更好地运用它。
什么是 Object.entries
Object.entries 是 ES2017 新增的方法，它返回一个给定对象自身可枚举属性的键值对数组，其中键名和键值分别组成数组中的每个子数组。具体来说，它的语法如下：
Object.entries(obj)
其中 obj 是要返回键值对数组的对象。
如何使用 Object.entries
使用 Object.entries 非常简单，我们只需要将要操作的对象作为参数传入该方法即可。下面是使用 Object.entries 的示例代码：
const obj = { foo: 'bar', baz: 42 };
console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]在这个例子中，我们创建了一个包含两个属性的对象，并使用 Object.entries 方法将其转换成了一个由两个子数组组成的数组。
另外需要注意的是，使用 Object.entries 提取属性时，它会返回所有可枚举属性，包括原型链上的属性。如果我们只想提取对象本身的属性，可以使用 Object.getOwnPropertyNames 方法进行筛选。
如何在开发中更好地使用 Object.entries
在实际开发中，Object.entries 能为我们提供很多便利。下面是几个使用 Object.entries 的实际场景。
1. 批量操作对象属性
假如我们有一个包含多个用户信息的对象，我们希望批量修改其中的某些属性，可以使用 Object.entries 配合 Array.prototype.forEach 来实现：
-- -------------------- ---- -------
----- ----- - -
------ - ----- -------- ---- --- ------- -------- --
------ - ----- ------ ---- --- ------- ------ --
------ - ----- ---------- ---- --- ------- ------ -
--
------------------------------------ ------- -- -
-- ---------- -- --- -
------------------- - -----
-
---
-------------------
--
-
------ - ----- -------- ---- --- ------- -------- --
------ - ----- ------ ---- --- ------- ------- --------- ---- --
------ - ----- ---------- ---- --- ------- ------- --------- ---- -
-
--在这个例子中，我们使用 Object.entries 将对象 users 转换成了一个包含三个子数组的数组，并使用 forEach 对其中每个子数组进行遍历。遍历时，我们将每个子数组的第一个元素作为 key，第二个元素作为 value，再根据条件判断是否需要修改对象属性。
2. 对象转为 URL 查询字符串
将一个对象转换成 URL 查询字符串是 Web 开发中一个常见的需求。使用 Object.entries，我们可以在不依赖任何外部库的情况下快速完成该转换。
const params = { foo: 'bar', baz: 42, qux: null };
const queryString = Object.entries(params)
.filter(([key, value]) => value !== null && value !== undefined)
.map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
.join('&');
console.log(queryString); // 'foo=bar&baz=42'在这个例子中，我们将一个包含三个属性的对象 params 转换成了一个 URL 查询字符串。具体来说，我们使用 Object.entries 将对象转换成了一个包含三个子数组的数组，并使用 filter 过滤了值为 null 或 undefined 的子数组。接着，我们使用 map 和 join 方法将筛选出来的子数组转换成了 URL 查询字符串。
3. 对象解构
在 ES6 中，我们可以使用对象解构来方便地从对象中提取属性。使用 Object.entries，我们甚至可以同时解构多个属性。
const data = { foo: 'bar', baz: 42, qux: 'quux' };
const [{ 0: firstKey, 1: firstValue }, { 0: secondKey, 1: secondValue }] = Object.entries(data);
console.log(firstKey, firstValue, secondKey, secondValue); // 'foo' 'bar' 'baz' 42在这个例子中，我们使用 Object.entries 将对象 data 转换成了一个包含三个子数组的数组，并使用解构将子数组中的第一个元素绑定到 firstKey 和 secondKey 变量，第二个元素绑定到 firstValue 和 secondValue 变量。
总结
Object.entries 是一个非常实用的方法，它可以方便地提取对象属性及其值，也可以解决实际开发中的很多问题。在使用该方法时，我们需要注意的是：
- 它会返回所有可枚举属性，包括原型链上的属性；
- 我们可以使用其他方法配合 Object.entries，完成批量修改属性、转换 URL 查询字符串等操作；
- 我们也可以使用解构，方便地从数组中提取多个属性。
ES2021 为前端开发带来了更多便利，Object.entries 只是其中一个。希望本文对您有所启发，并能够更好地帮助您在前端开发中使用 Object.entries。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651e757695b1f8cacd61d49a