Question

在Electron + Vue.js + ES7项目的旧代码中，有Javascript在对象元素的名称周围使用方括号，而我找不到这种语法的来源。这看起来对您熟悉吗？它是最新的Ecmascript吗？这是否表明我不知道的构建中的编译器？

const state = {
  [SUBMISSIONS]: [],
  [LAST_OPENED_ROW_ID]: -1
}

const mutations = {
  [SUBMISSION] (s, data) {
    return Object.assign(s, { [SUBMISSION]: data })
  }
}

Answer 1

要将对象的键设置为变量，可以将变量封装在大括号[]

中

在某处，它可能被定义为：

const SUBMISSIONS = 'submissions'

这是React环境中大量采用的模式。

Answer 2

此代码[]中的代码用于动态键，[]中的表达式已解析，最终值用作键名

let dynamic = 'some key'

let obj = {
  [dynamic] : 'some value'
}

console.log(obj)

Ref

Answer 3

这是ES6中引入的computed property。

从ECMAScript 2015开始，对象初始化程序语法还支持计算的属性名称。这样就可以将表达式放在方括号[]中，该表达式将被计算并用作属性名称。这让人想起了属性访问器语法的括号符号，您可能已经使用它来读取和设置属性了。

浏览器对计算出的属性名称的兼容性：

Chrome：从47版起
Edge：受支持
Firefox：从版本34起
Internet Explorer：不支持
Opera：从版本34起
Safari：从版本8起
Android Webview：从版本47起
Chrome for Android：从47版起
Firefox for Android：从版本34起
Opera for Android：从版本34起
iOS上的Safari：从版本8起
三星Internet：从5.0版开始
Node.js：受支持

source

方括号中对象成员的标识符

3 个答案: