() => {...} 与 () => [重复] 有何不同答案

【问题标题】：How is () => {...} different from () => [duplicate]() => {...} 与 () => [重复] 有何不同
【发布时间】：2021-06-28 10:05:01
【问题描述】：

我发现了一个奇怪的问题。

给定一个过滤器和一个对象数组，我想只选择那些与过滤器匹配的对象。

奇怪的是，这不起作用

this.state.articles.filter((article) => {
  article.category === filter 
})

虽然这样做

this.state.articles.filter((article) => article.category === filter )

我原本以为他们会评估相同，但似乎并非如此。任何想法为什么？

【问题讨论】：

第一个使用了代码块，所以需要一个return语句。第二个使用箭头函数的隐式返回
(article) => article.category === filter ) 是(article) => { return article.category === filter })
见developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
这是如何获得这么多支持的？只是好奇——它在语言规范中，它记录在 SO 和其他地方。
@DaveNewton 很难找到正确的信息，有时就人们面临的某些问题进行对话会更容易。我猜人们喜欢说话，即使是在像 SO 这样的静态论坛上。

标签： javascript

【解决方案1】：

当您在箭头函数中打开块 {} 时，return 不再隐含。

你必须把它写下来：

this.state.articles.filter((article) => {
  return article.category === filter 
})

【讨论】：

“隐式返回”是一个术语，如果有人想用谷歌搜索的话。
这相当于function(article){ [...] }，在ES5和更早的版本中，而(article) => article.category === filter相当于function(article){ return [...] }。
@IsmaelMiguel 不，它们不相等。
那么它们的等价物是什么？

【解决方案2】：

Javascript ES6 箭头函数以特定方式工作，可以通过示例进行最佳描述：

let multiply1 = (number) => number * 2;
// When we are returning one value we can put this expression on the same line

// this is the same as:
let multiply2 = (number) => { return number * 2};

//when we have 1 argument we can omit the parentheses
let multiply3 = number => number * 2;


// When we want to write multiple line we have to put brackets like this:
let multiply4 = (number) => { 
console.log('inside arrow function');
return number * 2;
};

console.log(multiply1(2));
console.log(multiply2(2));
console.log(multiply3(2));
console.log(multiply4(2));

当箭头函数返回一个表达式时，不必显式编写return 语句和方括号{} 非常方便。这允许更简洁的代码。

【讨论】：

【解决方案3】：

() => {…} 与 () => 有何不同

+----+--------------------------------+---------------------------------------+
| #  | Using curly brace              | Without curly brace                   |
+-------------------------------------+---------------------------------------+
| 1. | Needs explicit return          | Returns the statement implicitly      |
| 2. | `undefined` if no return used  | Returns the value of expression       |
| 3. | return {} // ok                | {} // buggy, ({}) // ok               |
| 4. | Useful for multi-line code     | Useful for single line code           |
| 5. | Okay even for single line      | Buggy for multi line                  |
+----+--------------------------------+---------------------------------------+

以下是上述差异的示例：

示例：1

// Needs explicit return
() => {
  return value
}
// Returns the value
() => value

示例：2

// Returns undefined
() => {
  1 == true
}
// Returns true
() => 1 == true // returns true

示例：3

// ok, returns {key: value}
() => {
  return {key: value}
}
// Wrap with () to return an object
() => {key: value} // buggy
() => ({key: value}) // ok

示例：4

// Useful for multi-line code
() => {
  const a = 1
  const b = 2
  return a * b
}
// Useful for single line code
() => 1 * 2

示例：5

// Okay even for single line code
() => { return 1 }
// Buggy for multi-line code
() => const a = 123; const b = 456; a + b; // buggy
() => 
     const a = 123
     const b = 456
     a + b // still buggy

使用过滤功能时，return statement is required通过测试：

包含通过测试的元素的新数组。如果没有元素通过测试，则返回一个空数组。

因此，使用() => 形式，您隐式返回值，它将通过测试并正常工作。但是当您使用() => {...} 时，您并没有明确返回该语句，并且不会按预期工作。它只是返回一个空对象。

因此，要使您的代码按预期工作，您应该使用 return 语句：

this.state.articles.filter((article) => {
  return article.category === filter 
})

PS：我用的是隐式和显式两个词，在 JavaScript 中到底是什么？

隐式意味着 JavaScript 引擎为我们做这件事。明确意味着我们需要做我们想做的事。我们可以在任何方面进行类似的思考。

【讨论】：

【解决方案4】：

不同之处在于，当您使用() => x 时，它实际上意味着() => { return x }，所以article.category === filter 语句本身不会做任何事情，{ article.category === filter } 不会显式返回任何东西。

【讨论】：