利用 ES8 中的 Object.values() 和 Object.entries() 简化前端代码

阅读时长 4 分钟读完

ES8(ECMAScript 2017)带来了很多新的特性,其中包含了两个新的 Object 方法:Object.values() 和 Object.entries()。这两个方法能够让我们更加方便地操作对象,减少代码的重复,提高代码的可读性。

Object.values()

Object.values() 方法能够返回一个对象所有可枚举属性的值,返回的结果是一个数组。

接下来,我们来看一个使用 Object.values() 的示例。我们有一个用户对象,包含了用户的姓名、年龄和性别等属性:

现在,我们想获取所有属性的值,可以使用 Object.values() 方法:

如上所示,我们使用了 Object.values(user) 方法,将所有属性的值封装到一个数组中,从而更加方便地操作对象。

Object.entries()

类似于 Object.values(),Object.entries() 方法也能够返回一个对象的所有属性值,但是它返回的结果是一个由键值对数组组成的数组。

下面,我们继续使用上面的用户对象,并将其属性值转化为一个由键值对数组组成的数组:

如上所示,我们使用 Object.entries(user) 方法,将所有属性的键值对以二维数组的形式封装到一个数组中,从而更加方便地操作对象。

使用示例

现在我们来看一个具体的使用示例,如何使用 Object.values() 和 Object.entries() 来简化代码。

我们有一个简单的应用,需要将一个给定的对象以表格的形式展示出来,其中每一行代表一个对象的属性,每一列代表对象的值。我们可以使用以下代码来实现:

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

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

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

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

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

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

如上所示,我们使用 Object.keys() 方法获取对象的所有属性,然后使用 Object.values() 方法获取对象的所有属性值。接下来,我们遍历对象的所有属性,生成一个表格,最后将表格插入到指定的元素上。

我们也可以通过 Object.entries() 方法来实现同样的效果:

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

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

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

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

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

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

如上所示,我们使用了 Object.entries() 方法,将所有属性的键值对以二维数组的形式封装到一个数组中。接下来,我们遍历生成一个表格,最终将表格插入到指定的元素上。

结论

使用 ES8 中的 Object.values() 和 Object.entries() 方法能够帮助我们更加方便地操作对象,减少代码的重复,提高代码的可读性。我们可以使用这两个方法来简化代码,使代码更加简洁、易读。

总的来说,Object.values() 和 Object.entries() 方法是在一个对象操作中非常有用的工具,我们在实际开发中可以尝试使用它们,从而提高我们的开发效率。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6704fc9dd91dce0dc8512f6f

纠错
反馈