Javascript 如何使用（）=>；{…}不同于（）=>；

我发现了一个奇怪的问题

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

奇怪的是，这不起作用

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

而这是

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

---

我原本以为他们会做出同样的评价，但事实似乎并非如此。你知道为什么吗？

当你在一个箭头函数中打开一个块

{}

时，

返回不再是隐含的

你必须写下来：

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

Javascript ES6 arrow函数以一种特定的方式工作，最好通过一个示例来描述：


let multiply1=（number）=>number*2；
//当我们返回一个值时，我们可以将这个表达式放在同一行上
//这与：
设乘法2=（数）=>{返回数*2}；
//当我们有一个参数时，我们可以省略括号
让倍数3=number=>number*2；
//当我们想写多行时，我们必须放上如下括号：
设乘法4=（数）=>{
log（'insidearrow函数'）；
返回号码*2；
};
控制台日志（倍数1（2））；
console.log（倍数2（2））；
控制台日志（倍数3（2））；
控制台日志（倍数4（2））不同之处在于，当您使用
（）=>x
时，它实际上意味着
（）=>{return x}
，因此语句
article.category===filter
本身不会做任何事情，
{article.category==filter}
不会显式返回任何东西

（）=>{…}与（）=>

以下是上述差异的示例：

示例：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语句：

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


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

隐式意味着JavaScript引擎为我们做这件事。明确意味着我们需要做我们想做的事。我们可以从任何角度来考虑类似的问题。
第一种方法使用一段代码，因此需要一个return语句。第二个函数使用箭头函数的隐式返回
（article）=>article.category==filter）
是
（article）=>{return article.category==filter}）
这是如何获得如此多的赞成票的？只是好奇——它在语言规范中，在SO和其他地方都有文档记录。@DaveNewton很难找到正确的信息，有时就人们面临的某些问题进行对话更容易。我猜人们喜欢聊天，即使是在这样一个静态的论坛上。“隐式返回”是一个术语，如果有人想用谷歌搜索它的话。这相当于ES5及更早版本中的
函数（文章）{[…]}
，而
（文章）=>article.category==filter
相当于
函数（文章）{return[…]}
@IsmaelMiguel不，它们不是等价物。那么，它们的等价物是什么？
this.state.articles.filter((article) => {
  return article.category === filter 
})