JavaScript中对象计算属性[var.prop]: 语法含义咨询

嘿，这个写法其实是ES6（ECMAScript 2015）里引入的计算属性名（Computed Property Names），专门用来解决动态定义对象属性名的需求～我来给你拆解清楚：

首先先提个小细节：你代码里的var.prop肯定是笔误啦——var是JavaScript的关键字，不能用来当变量名，这里应该是某个具体的对象，比如obj.prop之类的引用。另外原代码里param.func(args)后面多了个分号，属于语法错误，实际写的时候要去掉哦。

核心逻辑：计算属性名的作用 #

平时我们写对象字面量的时候，属性名都是固定的，比如：

const obj = {
  name: 'test',
  age: 20
};

但如果我们需要动态生成属性名（比如属性名来自某个变量、或者是某个表达式的结果），以前得先创建对象，再通过方括号赋值：

const key = 'name';
const obj = {};
obj[key] = 'test';

而ES6的计算属性名就允许我们直接在对象字面量里完成这个操作，用[表达式]来代替固定的属性名——JavaScript会先计算方括号里表达式的值，把结果作为最终的属性名。

拆解你的代码 #

修正笔误和语法问题后，你的代码应该是这样的：

function myFunc(param) { 
  return { [obj.prop]: param.func(args) }; 
}

这里的逻辑是：

1. 先计算obj.prop的值，把这个值作为返回对象的属性名
2. 执行param.func(args)，把函数执行的结果作为这个属性对应的值
3. 最终返回这个包含动态属性的对象

举个更直观的例子 #

比如我们想根据变量生成属性名：

const role = 'admin';
const permissions = {
  [`can_${role}_edit`]: true,
  [`can_${role}_delete`]: true
};
// 最终permissions等价于：
// { can_admin_edit: true, can_admin_delete: true }

这样是不是就清晰多了？

这个语法的好处就是让动态定义对象属性的代码更简洁、更易读，不用再拆分步骤啦～

内容的提问来源于stack exchange，提问作者Eddy_Kay