方括号中的对象成员标识符[重复]答案

【问题标题】：Object member's identifier in square brackets [duplicate]方括号中的对象成员标识符[重复]
【发布时间】：2019-09-13 17:33:55
【问题描述】：

在 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 })
  }
}

【问题讨论】：

标签： javascript

【解决方案1】：

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

在某个地方，它可能被定义为：

const SUBMISSIONS = 'submissions'

这是一种在 React 环境中被大量采用的模式。

【讨论】：

是的，const SUBMISSIONS = 'submissions' 完全正确。

【解决方案2】：

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

let dynamic = 'some key'

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

console.log(obj)

Ref

【讨论】：

【解决方案3】：

也就是 ES6 中引入的computed property。

从 ECMAScript 2015 开始，对象初始值设定项语法也支持计算属性名称。这允许您将表达式放在括号 [] 中，该表达式将被计算并用作属性名称。这让人想起属性访问器语法的括号表示法，您可能已经用它来读取和设置属性。

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

Chrome：从版本 47 开始
边缘：支持
Firefox：从版本 34 开始
Internet Explorer：不支持
Opera：从版本 34 开始
Safari：从版本 8 开始
Android 网络视图：从版本 47 开始
Android 版 Chrome：从版本 47 开始
Firefox for Android：从版本 34 开始
Opera for Android：从版本 34 开始
iOS 上的 Safari：从版本 8 开始
三星互联网：从 5.0 版开始
Node.js：支持

source

【讨论】：

重载数组初始值设定项语法以提供计算属性名称评估的双重职责是一个奇怪的选择。解析器/编译器必须根据上下文进行区分。花括号和结构化返回的类似情况，但至少在那里你有key:value 符号来区分。可能是由于 UTF-8/ASCII 0-127 中可用的有限不可打印符号集（其中前 32 个字符中的大多数对现代设备没有用处）。