在 JavaScript 的开发中，处理对象的操作是必不可少的。而在 ES8 中，新增了 Object.entries 方法，可以非常方便地获取一个对象的可枚举属性值对数组，从而便于我们对其进行操作与处理。相比久经考验的 Object.keys 方法而言，Object.entries 有哪些优势，又适用于哪些场景呢？下面就为大家进行详细分析。
Object.entries 方法详解
Object.entries 方法，顾名思义，就是将对象的属性键值对转换为一个数组。其语法如下：
Object.entries(obj)
其中，obj 表示需要转换的对象。
Object.entries 方法返回的是一个由键值对数组组成的数组，其中每一个键值对都是由属性名和属性值组成的数组。
我们通过一个示例来看一下具体使用方法：
const obj = { x: 1, y: 2, z: { a: 3 } };
console.log(Object.entries(obj));
// [ ["x", 1], ["y", 2], ["z", { a: 3 }] ]Object.keys 方法详解
在 ES5 中，我们已经可以使用 Object.keys 方法获取一个对象的所有可枚举属性组成的数组，并在此基础上对其进行操作处理。Object.keys 方法语法如下：
Object.keys(obj)
其中，obj 表示需要获取可枚举属性的对象。
Object.keys 方法返回的是一个数组，其中每一个元素都是对象的属性名（键名）。
我们通过一个示例来看一下具体使用方法：
const obj = { x: 1, y: 2, z: { a: 3 } };
console.log(Object.keys(obj));
// [ "x", "y", "z" ]Object.entries 方法 VS Object.keys 方法
上面我们已经分别介绍了 Object.entries 方法和 Object.keys 方法。接下来，我们来比较这两个方法，看看在哪些方面 Object.entries 方法更加优秀，适用于哪些场景。
返回值不同
Object.entries 方法返回的是一个由键值对数组组成的数组，其中每一个键值对都是由属性名和属性值组成的数组。
Object.keys 方法返回的是一个数组，其中每一个元素都是对象的属性名（键名）。
对于需要使用到对象的属性值的场景而言，Object.entries 方法可以免去再次查询属性值的步骤，提升代码效率。
对象属性值类型
在对象属性值为引用类型时，Object.entries 方法返回的是该引用类型的地址。而在 Object.keys 方法中，如果对象属性值为引用类型，那么返回的结果中将不包含该属性。
简化代码
在某些情况下，可以使用 Object.entries 方法来简化代码的书写。为了让大家感受到这种优势，我们来对比一下使用 Object.entries 和 Object.keys 分别对一个对象的属性值求和的代码：
-- -------------------- ---- -------
-- -- -------------- --
----- --- - - -- -- -- -- -- - --
----- ------------ - -------------------
---------------- ----- ------- -- ------ - ------ ---
-------------------------- -- -
-- -- ----------- --
----- --- - -----------------
--- --------- - --
--- ---- - - -- - - ----------- ---- -
--- --- - -------
--------- -- ---------
-
----------------------- -- -可以看到，使用 Object.entries 方法可以帮助我们避免遍历属性名来查询属性值的过程，在代码的简洁性上做到优化。
应用场景
在实际开发中，Object.entries 和 Object.keys 两种方法各自都有着自己的优势与适用场景。例如：
- 当我们需要对对象的所有属性值进行处理时，可以使用
Object.entries方法直接得到属性值数组，从而避免了查询属性值的步骤； - 当需要对对象的某些属性键值对进行遍历或操作时，可以使用
Object.entries方法获取键值对数组，然后进行遍历或操作； - 当仅关心对象的属性名时，可以使用
Object.keys方法获取属性名数组。
总结
本文详细介绍了 ES8 中新增的 Object.entries 方法，与传统的 Object.keys 方法进行了对比，并分析了 Object.entries 方法更加优秀的地方以及适用场景，从而为读者展示该方法在前端开发中的指导意义。在实际开发中，读者可以根据不同的需求和场景灵活运用这两种方法，提升自己的开发效率和编程体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646da255968c7c53b0c4710d