es6 对象的key值, 为什么能够这么写?

Question

看到个写法, 有点不解, 代码如下

let a = 'user'
const actions = {
  'test' () {
    console.log(444444)
  },
   // 为什么能够这么定义函数
  [`${a}test2`] () {
    console.log(555555)
  },
}

为什么es6能够这么定义函数, 加了中括号却不是数组?

Answer 1

一开始想的思路错了, 以为是es6 template strings的玩法, 其实这更字符串模版什么关系, 是es6 object 的 Computed property names, 英文文档描述的更详细.

Answer 2

这里其实和对象动态传值一致的，相当于

var str = "userFn"
var obj = {
    [str](){
        
    }
}
<==>
var obj[str] = function(){} 

es6是为了让了更容易声明一个对象，没想到你反而不明白了。。。

Answer 3

12.2.6.8 Runtime Semantics: Evaluation

ComputedPropertyName : [ AssignmentExpression ]

1. Let exprValue be the result of evaluating AssignmentExpression.

2. Let propName be GetValue(exprValue).

3. ReturnIfAbrupt(propName).

4. Return ToPropertyKey(propName).

ECMAScript® 2015 Language Specification

Answer 4

这是为对象设置一个变量属性，

比如

var key = "test";

var obj = {
    key : 'key',
    [key]:key
}

你输出试试看。

中括号不是 ES6 的语法

字符串里能写变量才是ES6语法，那个是模板字符串

var variable = 'Hello'
var str  =  `${variable} World`;
console.log(str) // Hello World

Answer 5

这和 es6 没什么太大关系吧？ xx() 是 es6 的写法，实际等于 xx: function();中括号并不是，xx.xx === xx[xx]，区别在于中括号里是变量，是不确定的。`` 是字符串新写法。