Question

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

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

很奇怪，这不起作用

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

这样做的时候

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

我本来以为他们会评估相同的结果，但事实并非如此。有什么想法吗？

Answer 1

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 2

（）=> {…}与（）=>
有何不同

+----+--------------------------------+---------------------------------------+
| #  | 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引擎为我们做到了。明确的意思是我们需要做我们想做的事情。我们在任何方面都可以认为相似。

（）=> {...}与（）=>有何不同

2 个答案: