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

Question

我有一个.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

那\xe2\x80\x99是箭头函数的行为。箭头函数语法设计得简洁。

\n

(arg) => [single expression]\n

\n

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

\n

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

\n

所以(x) => x + 1翻译为：

\n

function (x) {\n  return x + 1;\n}\n

\n

并(x) => { x + 1 }翻译为：

\n

function (x) {\n  x + 1;\n}\n

\n

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

\n

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

\n

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

\n

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

\n