在前端开发中，我们经常需要操作对象。一些 JavaScript 新特性为我们提供了更为方便的对象操作方式，例如 Object.entries 和 Object.values。本文将为大家详细介绍这两个对象助手，并提供实用的示例代码，帮助读者更快地上手使用这些特性。
Object.entries
Object.entries 可以将对象转化为一个由键-值对组成的数组，其中每个键-值对表示对象中的一个属性。
以下是 Object.entries 的基本用法：
const obj = { a: 1, b: 2, c: 3 };
console.log(Object.entries(obj));
// output: [['a', 1], ['b', 2], ['c', 3]]Object.entries 接收一个对象参数，返回该对象的键-值对数组。每个键-值对都是一个由两个元素组成的数组，第一个元素表示键名，第二个元素表示键对应的值。
Object.entries 输出的是一个二维数组，可以通过遍历数组元素来访问键名和键值：
-- -------------------- ---- ------- ----- --- - - -- -- -- -- -- - -- ---------------------------------- ------- -- - -------------------- ----------- --- -- ------- -- -- - -- -- - -- -- -
Object.entries 的使用场景非常广泛。例如，它可以帮助我们将 CSS 样式表对象转化为字符串形式输出：
-- -------------------- ---- ------- ----- ------ - - ------ ------ --------- ------- ----------- ------- -- ----- --------- - ---------------------- ------------ ------- -- --------- ---------- -------- --- ----------------------- -- ------- ------ ---- --------- ----- ----------- ----
Object.values
Object.values 可以将对象的属性值转化成一个值组成的数组。
以下是 Object.values 的基本用法：
const obj = { a: 1, b: 2, c: 3 };
console.log(Object.values(obj));
// output: [1, 2, 3]Object.values 接收一个对象参数，返回该对象中所有属性值组成的数组。
Object.values 同样可以遍历数组元素来访问属性值：
const obj = { a: 1, b: 2, c: 3 };
Object.values(obj).forEach((value) => {
console.log(value);
});
// output: 1 2 3Object.values 可以帮助我们方便地计算数组元素的总和：
const values = [2, 4, 6, 8]; const sum = Object.values(values).reduce((acc, num) => acc + num); console.log(sum); // output: 20
总结
Object.entries 和 Object.values 非常方便实用，可以极大地提高前端代码的开发效率。它们为我们操作数组和对象提供了更加简便的方法。在实际开发中，我们可以灵活地运用这两个对象助手，高效完成各种前端任务。
参考文献
- MDN Web Docs: Object.entries()
- MDN Web Docs: Object.values()
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64562d1e968c7c53b096d1f2