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

Question

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

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

奇怪的是,这不起作用

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

虽然这样做

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

我原本以为他们会评价相同,但似乎并非如此.有什么想法吗？

Answer 1

当您{}在箭头功能中打开一个块时,return不再暗示.

你必须写下来:

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

Answer 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语句和方括号是非常方便的{}.这允许更简洁的代码.

Answer 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语句才能通过测试：

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

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

因此，为了使代码按预期工作，应使用return语句：

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

PS：我使用的是隐式和显式词，就JavaScript而言到底是什么？

隐式意味着JavaScript引擎为我们做到了。明确的意思是我们需要做我们想做的事情。我们可以在任何方面认为相似。