ES7 更新:enhanced object literals

阅读时长 4 分钟读完

ES7(ECMAScript 2016)是 ECMAScript 中的第七个版本。其中,ES7 增加了一项非常有用的特性:对象字面量的增强。

在以往的 ES6 或以前的版本中,使用对象字面量创建对象时,需要一个属性名和对应的属性值:

然而,在 ES7 中,对象字面量的语法被增强了,你可以更便捷地创建对象和定义属性。本文将介绍这些新特性,并且带你动手实践。

简化对象字面量属性的定义

在 ES7 中,你可以直接将变量名作为对象字面量中的属性名,这样就不用写键值对了:

代码中,obj 对象的 name 和 age 属性的值由变量的值自动决定。这个语法简洁易懂,而且使代码更干净。

定义方法

在 ES7 中,对象字面量语法还允许你定义对象的方法,而不仅仅是属性。定义方法的语法和定义属性类似:

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

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

这样,你可以更方便地将相关的代码组织在一个对象内部。

定义计算属性名

ES7 还允许你使用计算属性名定义对象字面量的属性。计算属性名就是用表达式作为属性名。例如,你可以使用一个变量作为属性名:

计算属性名能够让你在创建多个对象时更加便捷地生成不同属性名。

运用

假设我们想创建一个人物属性对象,用于描述一个虚拟角色的各个方面。这个对象包括名字、血量、等级等属性,还有一个方法用于攻击敌人。

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

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

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

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

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

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

这样,我们就成功地用 ES7 新特性创建了一个角色属性对象和敌人属性对象,并且成功地实现了攻击方法。

结论

以上便是 ES7 新特性中增强对象字面量的一些内容。这些语法是 ES7 中 JavaScript 开发人员极为期待的特性,它们能够让我们写出更加简洁明了的代码。

在实际工作中,我们应该尽量采纳这些新特性,并在项目中大量运用,以提高代码的可读性以及代码的可维护性。

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

纠错
反馈