const addName = name => ({firstnmae : 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

  }

Answer 2

单线箭头函数将返回结果值。

例如：

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

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

const add = (a, b) => {

  a + b;

};

为了让上面的返回一个值，你需要 return 关键字：

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 语句，而另一个有 return 语句的缩写形式，可以在箭头函数中用于返回对象而无需明确的 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'}，引擎怎么知道你要返回一个对象，而不是在看到 {} 大括号时打开一个函数体？

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

Answer 4

这两个功能都是arrow functions.

Function 1是一个隐式返回箭头函数，因此即使return未使用显式{username: name}，也会返回该对象。

• 功能 1

const function1 = name => ({username: name})

当使用隐式返回箭头函数以及要返回的对象时，应该将其包装在(). 如果我们不将它包装在{...}or中(...)，那么它将是一个无效的语法

//Invalid syntax --> Will throw an error. Hence it should be wrapper with `()`
const function1 = name => {username: name}

Function 2但是函数定义中的 as包装在{ ... }. 由于函数中没有 return 语句，因此不会返回任何内容。

• 功能二

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