不将对象赋值给变量，能否使用JavaScript计算属性名？

你遇到的语法错误和计算属性名本身无关，是箭头函数的语法歧义导致的：

当箭头函数直接返回对象字面量时，不能直接用{}包裹对象，因为JavaScript会把这个大括号解析成函数体的代码块，而不是对象定义。代码里的[${value}]: key在代码块里属于无效语法，所以抛出了Unexpected token ':'错误。

修正方法一：用圆括号包裹返回的对象 #

把对象字面量放在圆括号里，明确告诉JS这是要返回的对象，不是代码块：

const values = [['foo1', { value: 1 }], ['foo2', { value: 2 }], ['foo3', { value: 3 }]];
const result = values.map(([key, { value }]) => ({ [`${value}`]: key }));

修正方法二：显式使用return语句 #

如果习惯用大括号写函数体，就在里面显式添加return返回对象：

const values = [['foo1', { value: 1 }], ['foo2', { value: 2 }], ['foo3', { value: 3 }]];
const result = values.map(([key, { value }]) => {
  return { [`${value}`]: key };
});

补充说明 #

计算属性名完全支持直接在返回的对象中使用，不需要先把对象存到变量里，只是箭头函数的这个语法细节容易踩坑。只要解决了箭头函数的返回语法问题，就能正常使用计算属性名特性。

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