「ES12」中的 Object.values() 和 Object.entries() 使用方式

阅读时长 5 分钟读完

在 JavaScript 中,对象是一种非常重要的数据类型,它是属性名和属性值的集合。在 ES6 中,引入了 Object.keys() 方法,用于返回对象的所有属性名组成的数组。而在 ES8 中,Object 原型新增加了一些新的方法,其中就包括 Object.values() 和 Object.entries()。

那么在实际开发中, Object.values() 和 Object.entries() 究竟有什么作用呢?如何使用它们?本文将详细探讨这些问题。

Object.values()

Object.values() 方法接收一个对象作为参数,然后返回这个对象所有属性值组成的数组。它的语法结构如下:

其中,obj 表示要获取属性值的对象。

下面是一个简单的示例代码:

在这个示例中,我们定义了一个包含三个属性的对象。然后使用 Object.values() 方法获取了这个对象的所有属性值,并将其存储在一个数组中。最后,我们将这个数组打印出来,得到的结果为 [1, 2, 3]。

那么 Object.values() 方法有什么实际的应用场景呢?我们可以通过下面这个例子来探讨一下。

假设我们有一个商品列表,每个商品都是一个 JavaScript 对象。我们需要将这个商品列表转换成一个包含所有商品价格的数组。可以使用 Object.values() 方法和 reduce() 方法来实现这个功能,代码如下:

-- -------------------- ---- -------
----- -------- - -
  - ----- ------- ---- ------ --- --
  - ----- ------- ---- ------ --- --
  - ----- -------- ----- ------ ---- --
--

----- ------ - --------------------- ---- -- -
  ------ -------------------------------------
-- ----

-------------------- -- ----- ---- -----

在这个示例中,我们首先定义了一个包含三个商品的商品列表。然后使用 reduce() 方法将这个商品列表转换成包含所有商品价格的数组。在 reduce() 方法的回调函数中,使用 concat() 方法将每个商品的价格数组合并起来。最后,我们打印出了这个包含所有商品价格的数组。

Object.entries()

Object.entries() 方法接收一个对象作为参数,然后返回一个包含所有键值对数组的二维数组。它的语法结构如下:

其中,obj 表示要获取键值对的对象。

下面是一个简单的示例代码:

在这个示例中,我们定义了一个包含三个属性的对象。然后使用 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

纠错
反馈