在 JavaScript 中,对象是一种非常重要的数据类型,它是属性名和属性值的集合。在 ES6 中,引入了 Object.keys() 方法,用于返回对象的所有属性名组成的数组。而在 ES8 中,Object 原型新增加了一些新的方法,其中就包括 Object.values() 和 Object.entries()。
那么在实际开发中, Object.values() 和 Object.entries() 究竟有什么作用呢?如何使用它们?本文将详细探讨这些问题。
Object.values()
Object.values() 方法接收一个对象作为参数,然后返回这个对象所有属性值组成的数组。它的语法结构如下:
Object.values(obj)
其中,obj 表示要获取属性值的对象。
下面是一个简单的示例代码:
const obj = { a: 1, b: 2, c: 3 }; const values = Object.values(obj); console.log(values); // [1, 2, 3]
在这个示例中,我们定义了一个包含三个属性的对象。然后使用 Object.values() 方法获取了这个对象的所有属性值,并将其存储在一个数组中。最后,我们将这个数组打印出来,得到的结果为 [1, 2, 3]。
那么 Object.values() 方法有什么实际的应用场景呢?我们可以通过下面这个例子来探讨一下。
假设我们有一个商品列表,每个商品都是一个 JavaScript 对象。我们需要将这个商品列表转换成一个包含所有商品价格的数组。可以使用 Object.values() 方法和 reduce() 方法来实现这个功能,代码如下:
-- -------------------- ---- ------- ----- -------- - - - ----- ------- ---- ------ --- -- - ----- ------- ---- ------ --- -- - ----- -------- ----- ------ ---- -- -- ----- ------ - --------------------- ---- -- - ------ ------------------------------------- -- ---- -------------------- -- ----- ---- -----
在这个示例中,我们首先定义了一个包含三个商品的商品列表。然后使用 reduce() 方法将这个商品列表转换成包含所有商品价格的数组。在 reduce() 方法的回调函数中,使用 concat() 方法将每个商品的价格数组合并起来。最后,我们打印出了这个包含所有商品价格的数组。
Object.entries()
Object.entries() 方法接收一个对象作为参数,然后返回一个包含所有键值对数组的二维数组。它的语法结构如下:
Object.entries(obj)
其中,obj 表示要获取键值对的对象。
下面是一个简单的示例代码:
const obj = { a: 1, b: 2, c: 3 }; const entries = Object.entries(obj); console.log(entries); // [['a', 1], ['b', 2], ['c', 3]]
在这个示例中,我们定义了一个包含三个属性的对象。然后使用 Object.entries() 方法获取了这个对象的所有键值对,并将其存储在一个二维数组中。最后,我们将这个数组打印出来,得到的结果为 [['a', 1], ['b', 2], ['c', 3]]。
那么 Object.entries() 方法有什么实际的应用场景呢?我们可以通过下面这个例子来探讨一下。
假设我们有一个包含某公司员工姓名和工资的对象,我们需要将这个对象转换成包含所有员工信息的数组。可以使用 Object.entries() 方法和 map() 方法来实现这个功能,代码如下:
-- -------------------- ---- ------- ----- --------- - - ----- ------ ----- ------ ---- ------ -- ----- -------------- - ------------------------------------- -------- -- -- ----- ------ ---- ---------------------------- -- -- ----- ------- ------- ----- -- - ----- ------- ------- ----- -- - ----- ------ ------- ----- --
在这个示例中,我们首先定义了一个包含三个员工信息的对象。然后使用 Object.entries() 方法将员工信息转换成二维数组。接着,使用 map() 方法将二维数组转换成包含所有员工信息的数组。在 map() 方法的回调函数中,我们使用解构赋值来获取员工姓名和工资,然后返回一个包含这两个属性的新对象。最后,我们打印出了这个包含所有员工信息的数组。
总结
Object.values() 方法和 Object.entries() 方法是 ES8 中新增加的两个方法,它们可以方便地获取对象的属性值和键值对。在实际开发中,我们可以利用这些方法来完成一些简单的数据转换和数据处理操作。
总的来说,我们只需要记住一句话, Object.values() 方法获取对象属性值组成的数组, Object.entries() 方法获取对象键值对组成的二维数组。掌握了这个规律后,使用这两个方法就会非常简单了。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/645d8504968c7c53b0ff6c68