返回列表 回复 发帖

[JavaScript] ES6中对象可计算属性名

  1. var person = {
  2.     'first name': w3cplus
  3. }
  4. console.log(person['first name']); // => w3cplus
复制代码
这种模式仅适用于属性名提前已知或可被字符串字面量表示的情况。然而当一个属性名存在一个变量中或者需要计算时,在ES5中是无法使用对象字面量是无法定义属性的。但在ES6中,可在对象字面量中使用可计算属性名称,其语法与引用对象实例的可计算属性名相同,也是使用中括号[]。比如:
  1. let lastName = 'last name';
  2. let person = {
  3.     'first name': 'w3cplus',
  4.     [lastName]: 'damo'
  5. }

  6. console.log(person['first name']);  // => w3cplus
  7. console.log(person[lastName]);      // => damo
复制代码
在对象字面量中使用方括号表示的该属性名称是可计算的,它的内容将被求值并被最终转化为一个字符串,因而同样可以使用表达式作为属性的可计算名称,如:
  1. var suffix = 'name';
  2. ver person = {
  3.     ['first' + suffix]: 'w3cplus',
  4.     ['last' + suffix]: 'damo'
  5. }

  6. console.log(person['first name']);  // => w3cplus
  7. console.log(person['last name']);   // => damo
复制代码
上面示例中[]表达式计算了来的字符串分别是first name和last name,然后他们可以用于属性引用。任何可用于对象实例括号记法的属性名,也可以作为字面量中的计算属性名。
返回列表