在 ES6 中,我们已经可以使用属性简写来声明对象,例如:
-- -------------------- ---- ------- ----- ---- - ------- ----- --- - --- ----- ---- - - ----- --- -- ------------------ -- - ----- ------- ---- -- -
ES7 中,我们又新增了一个属性初始值简写的语法糖,它允许我们在声明对象的同时给属性赋初始值,例如:
-- -------------------- ---- ------- ----- ---- - - ----- ------- ---- --- ------------- - ------ ------------- ----- - -- -------------------------------- -- ----- ----
上面的代码中,我们使用了一个名为 getFullName
的函数来返回用户的全名。在 ES7 中,我们可以使用属性初始值简写来简化这个过程,例如:
-- -------------------- ---- ------- ----- ---- - - ----- ------- ---- --- ------------- - ------ ------------- ----- -- ------------------ ------ -- ------------------------ -- ------
上面的代码使用了属性计算名来为 user 对象添加一个 color 属性,并使用了属性初始值简写来给这个属性赋值。这个语法非常的简单易懂,只要记住要使用方括号将属性名括起来即可。
除此之外,属性初始值简写还可以用于声明函数,例如:
const user = { name: "John", age: 30, getFullName: () => `${this.name} Doe` }; console.log(user.getFullName()); // "undefined Doe"
上面的代码中,我们声明了一个箭头函数 getFullName,但是因为箭头函数不绑定 this,所以当我们调用这个函数时会返回 undefined。
要解决这个问题,我们可以使用属性初始值简写来声明一个普通函数,例如:
-- -------------------- ---- ------- ----- ---- - - ----- ------- ---- --- ------------- - ------ ------------- ----- - -- -------------------------------- -- ----- ----
上面的代码中,我们使用了属性初始值简写来声明了一个普通函数 getFullName,这个函数能够正确地返回用户的全名。
总结:
ES7 中新增的属性初始值简写语法糖使得我们能够更加轻松地声明对象和函数,提高了代码的可读性和可维护性。在日常开发中,我们应当多加利用这个语法糖,让我们的代码更加简洁精炼。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/647a357d968c7c53b06099b0