Javascript:回调中的无点样式

Question

所以我想要数组arr1的元素也恰好属于数组arr2。我认为arr1.filter(arr2.includes)应该可以解决问题，但它给了我一个错误(见下文)。不过，奇怪的是，arr1.filter(x => arr2.incudes(x))工作正常。即使函数arr2.includes和x => arr2.includes(x)在引用上不相等，它们不应该在相同的输入上采用相同的值吗？我在这里错过了什么？

> arr1 = ['a', 'b', 'c']
[ 'a', 'b', 'c' ]
> arr2 = ['a', 'c', 'd']
[ 'a', 'c', 'd' ]
>
> arr1.filter(x => arr2.includes(x))
[ 'a', 'c' ]
> arr1.filter(arr2.includes)
TypeError: Cannot convert undefined or null to object
at includes (<anonymous>)
at Array.filter (native)
at repl:1:6
... etc ...

Answer 1

有两个原因你不能只做arr1.filter(arr2.includes)：

1. arr2.includes只是对函数的引用，但您需要的是对函数和要使用它的数组的引用(arr2)。你可以通过使用Function.prototype.bind来解决这个问题，但是：

2. filter向其回调传递多个参数，而不仅仅是一个：它传递值、索引和原始数组。includes将尝试使用它收到的第二个参数作为开始搜索的索引，因此当filter向其传递索引时，它将使用该参数并跳过前导条目。

因此，通常的解决方案是使用一个包装函数，该函数知道它需要在arr2上使用includes，并且知道只传递一个参数 - 这就是你对箭头函数所做的。

但另请参阅Michał Perłakowski的答案，从函数式编程的角度使用实用程序函数来创建回调函数而不是内联创建它。

Answer 2

下面介绍如何实现可以以无点样式使用的includes函数：

const arr1 = ['a', 'b', 'c'];
const arr2 = ['a', 'c', 'd'];
const includes = arr => x => arr.includes(x);
console.log(arr1.filter(includes(arr2)));

如果你对JavaScript中的函数式编程感兴趣，你应该尝试Ramda库。使用 Ramda，您的代码可能如下所示：

const arr1 = ['a', 'b', 'c'];
const arr2 = ['a', 'c', 'd'];
// First option: R.flip
console.log(R.filter(R.flip(R.contains)(arr1), arr2));
// Second option: R.__ (placeholder argument)
console.log(R.filter(R.contains(R.__, arr1), arr2));

<script src="https://cdnjs.cloudflare.com/ajax/libs/ramda/0.24.1/ramda.min.js"></script>