JS返回结构答案

【问题标题】：JS return structure [duplicate]JS返回结构
【发布时间】：2021-12-12 10:41:42
【问题描述】：

JavaScript 的 return 语句中的 {} 和 () 有什么区别？

const fruits = [
  {
    name: "FaceBook",
    nickname: "FB",
  },
  {
    name: "Youtube",
    nickname: "YT",
  },
  {
    name: "AmazonWebService",
    nickname: "AWS",
  },
];
const count = fruits.reduce((acc, cur) => {
  return { ...acc, [cur.nickname]: cur.name };  // What does {} of return mean here?
}, {});

【问题讨论】：

返回一个全新的object，扩展acc 的所有属性，并添加一个新属性，其键为cur.nickname，这是一个计算值，一个值为cur.name。跨度>

标签： javascript arrays web

【解决方案1】：

由于return 不是function，而是statement，因此它在语法上类似于不使用括号的其他简单控制流语句，如break 和continue > 要么。

所以return 中的括号就像其他任何地方的括号一样，用于计算顺序或只是分组。

但是，当您在 return 中使用 大括号 来返回新的 object 时，这也适用于其他任何地方。

总之，它们与return 声明无关。

【讨论】：

【解决方案2】：

如果你使用{}，它会将它作为一个对象返回，所以你需要在其中添加一个键。

更多解释请参见下面的示例：

function test1() {
  return 'ok'
}

function test2() {
  return ('ok')
}

function test3() {
  return { message: 'ok' } // it won't accept: return {'ok'}
}

console.log(test1())
console.log(test2())
console.log(test3())

在您的情况下，[cur.nickname] 是关键。 cur.name 是值

【讨论】：

【解决方案3】：

{} 是一个literal object initializer，用于构造一个新的初始化对象。

() 是表达式的简单分组。 return ( ...acc, [cur.nickname]: cur.name ) 将返回最后一个表达式 cur.name，因为 comma operator 从左到右计算并返回最后一个表达式。

【讨论】：

【解决方案4】：

return { ...acc, [cur.nickname]: cur.name }; 将返回一个新的Object

【讨论】：