javascript - array.map() 中大括号的含义

Question

这个问题已经有答案了:

Curly Brackets in Arrow Functions (3 个回答)

已关闭 3 年前。

我有一个.map()改变的函数 isActive data 中对象的属性值大批。然而，用大括号包裹它会返回未定义的结果，而用括号包裹它或不包裹它会返回更新后的值。大括号用作箭头函数中的包装器，但它对于 .map() 的工作方式是否有所不同？

    const newData = data.map((data) => {
      data.label === label ? { ...data, isActive: !data.isActive } : data,
    });
    console.log(newData) 
    //undefined



    const newData = data.map((data) => 
      data.label === label ? { ...data, isActive: !data.isActive } : data,
    );
    console.log(newData) 
    //returns updated newData

Answer 1

这就是箭头函数的行为。箭头函数语法设计得简洁。

(arg) => [single expression]

如果箭头后面是一个不带花括号的单个表达式，则意味着返回该表达式的值。 return 关键字被省略。

如果箭头后面包含大括号，则大括号内的内容将被视为普通函数体，如果要返回值，则必须使用 return 关键字。

因此 (x) => x + 1 被转换为:

function (x) {
  return x + 1;
}

并且 (x) => { x + 1 } 被翻译为:

function (x) {
  x + 1;
}

我还必须补充一点，(x) => ({ x }) 被翻译为:

function (x) {
  return { x: x };
}

大括号{...}可以表示对象文字、函数体或代码块。

为了消除歧义，您需要在大括号两边加上括号，告诉解析器将 {...} 解释为“对象文字表达式”。