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 syntaxconst foo = () => {returns: 'object'}// valid syntaxconst 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}，也会返回该对象。功能 1const 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 }}