JavaScript。const addName = name => ({firstnmae : name})和addName2 = ( name ) => {{name:name}之间的区别是什么？

Question

我目前正在学习JavaScript，我很难理解这两个函数之间的区别。我以为他们是平等的，但他们的行为完全不同。

职能1：

const function1 = name => ({username: name}) // this is returning a object, even tho there is no 
                                             // return

职能2：`

const function2 = (name) => { {username : name }} // this is returning nothing as expected

Answer 1

第二个函数很有趣。第二个函数不创建对象。它是一个带有块{}和的函数。您可以通过向对象文本添加另一个属性来验证它，它将引发一个错误：

​

const function2 = (name) => { { username: name, firstname: name } }

​

它被解释成这样，这是一个无效的标签：

const function2 = (name) => {
  {
    username: name,
    firstname: name
  }
}

第一个问题已经在许多这样的问题中得到了解释。它是一个箭头函数，它隐式地返回对象。

• When should I use return in es6 Arrow Functions?
• ECMAScript 6 arrow function that returns an object

Answer 2

一个线性箭头函数将返回结果值。

例如：

const add = (a, b) => a + b;

然而，多行箭头函数(或使用{ & }定义的函数)不会返回值：

const add = (a, b) => {
  a + b;
};

为了使上面的值返回一个值，您需要返回关键字：

const add = (a, b) => {
  return a + b;
};

混乱的部分

您的情况有点混乱，因为您处理的是一个对象文本：

{ username: name }

这个语法表示一个“对象”。javascript中的对象类似于其他语言中的关联数组--也就是说，它们类似于以字符串作为索引的数组。您将看到一个常见的示例如下：

const person = { name: 'Joseph', age: 33 }

// output the name:
console.log(person.name);

// output the age:
console.log(person.age);

因此，通过在第一个示例中将对象文字包装为父类，您可以将其维护为一行箭头函数，然后返回对象文本。第二个例子实际上是一个多行定义，它将再次.没有返回值。

Answer 3

不同之处在于，一个将没有返回语句，而另一个则有一个返回语句的简短形式，可以在箭头函数中使用它来返回对象，而不需要使用return语句。

// invalid syntax
const foo = () => {returns: 'object'}

// valid syntax
const foo = () => ({returns: 'object'})


// long form would look like 
const foo = () => {
    return {returns: 'object'}
}

问题是，当编写foo = () => {returns: 'object'}时，当引擎看到{}花括号时，它如何知道您想返回一个对象而不是打开一个函数体？

为了让引擎知道它应该是一个应该返回的对象，您可以将它封装在父母中。