箭头函数中使用ComputedPropertyName及map回调转箭头函数报错解决

其实很简单，核心是要区分箭头函数的代码块和对象字面量写法：

• 如果是单行返回对象：必须用小括号()把对象字面量包裹起来，不然JS引擎会把{}当成代码块解析，而非对象。比如：

const dynamicProp = 'studentName';
const createStudent = (name) => ({ [dynamicProp]: name });
// 调用后得到 { studentName: 'Bob' }

• 如果是多行箭头函数（需要添加额外逻辑）：直接在代码块里用return返回带ComputedPropertyName的对象即可，和普通函数写法一致：

const dynamicProp = 'grade';
const createStudent = (gradeLevel) => {
  // 这里可以加参数校验等额外逻辑
  if (gradeLevel < 1 || gradeLevel > 12) {
    throw new Error('Invalid grade level');
  }
  return { [dynamicProp]: gradeLevel };
};

先聊聊为什么会抛出SyntaxError: Unexpected token :：

当你写(score, index) => { [index]: score, student_id: id }时，箭头函数里的{}被JS引擎识别成了代码块的边界，而非对象字面量。这时[index]: score会被解析为标签语句（标签是index对应的数值），但标签语句后面不能直接跟逗号和student_id: id这类表达式，所以直接触发了语法错误。

修复有两种常用方式：

方式1：用小括号包裹对象字面量（单行简写） #

这是最简洁的写法，用()把整个对象包起来，明确告诉JS引擎这是要返回的对象，不是代码块：

const array = [10, 0, 90, 80, 50, 0, 60];
let id = 1;
const studentScores = array.map((score, index) => ({ [index]: score, student_id: id }));
console.log(studentScores);

方式2：保留大括号，显式添加return #

如果之后需要在map回调里加额外逻辑（比如给id自增、过滤分数等），这种写法更灵活：

const array = [10, 0, 90, 80, 50, 0, 60];
let id = 1;
const studentScores = array.map((score, index) => {
  // 比如这里可以添加id自增逻辑
  // id++;
  return { [index]: score, student_id: id };
});
console.log(studentScores);

内容的提问来源于stack exchange，提问作者Julius Dzidzevičius