array.map() 中花括号的含义 [重复]答案

【问题标题】：Meaning of curly braces in array.map() [duplicate]array.map() 中花括号的含义 [重复]
【发布时间】：2020-05-06 13:13:45
【问题描述】：

我有一个.map() 函数，它可以更改data 数组中对象的isActive 属性值。但是用大括号将它包裹起来会返回我未定义的，而用括号包裹它或不包裹会返回更新的值。花括号在箭头函数中用作包装器，但它对 .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

【问题讨论】：

"但是.map() 的工作方式不同吗？" 不。.map 不知道函数是如何创建的，所以不管你是否使用@ 987654326@ 对函数的解释方式没有影响。
花括号用于支持多行任务。如果你的回调函数体有多行代码，那么你必须将它们包裹在花括号中。对于地图，您必须返回一些值。对于单行函数，您不需要使用return 关键字。它会自动返回值。

标签： javascript arrays ecmascript-6

【解决方案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 };
}

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

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

【讨论】：

“大括号周围的括号是“对象文字表达式”的语法” 不，{...} 是对象文字。括号告诉解析器将 { 解释为表达式的开头，而不是箭头函数体。
@FelixKling 感谢您纠正我。我实际上不知道如何用正确的词来表达它。您想直接编辑我的答案吗？我很感激。