原文： find() vs filter() in JavaScript – Differences Explained with Examples

JavaScript 开发人员经常被问到的一个面试问题是解释 find() 和 filter() 方法之间的区别。

在今天的教程中，我将带领你了解这些方法是什么，以及什么时候应该使用它们。

什么是 filter() 方法

该方法返回数组中满足回调函数中指定条件的所有元素。

让我们通过一个例子来看看它究竟是如何工作的。

const x = [1, 2, 3, 4, 5];

const y = x.filter(el => el*2 === 2);

console.log("y is: ", y); // y is: [1]
filter() 示例

如果你看一下上面例子的输出，y 的值是一个满足条件的 1 个元素的数组。这是因为 filter() 方法遍历了数组的所有元素，然后返回一个满足指定条件的过滤后的数组。

什么是 find() 方法

该方法返回数组中满足回调函数中指定条件的第一个元素。

让我们通过一个例子来看看它是如何工作的：

const x = [1, 2, 3, 4, 5];

const y = x.find(el => el*2 === 2);

console.log("y is: ", y); // y is: 1
find() 示例

现在，如果你看上面例子的输出，y 的值是 1。这是因为 find() 方法在数组中搜索满足指定条件的第一个元素。

上述例子的主要区别在于：

  • filter() 返回一个包含满足条件的元素的数组，但是 find() 返回满足条件的元素本身。
  • 在 filter() 中，整个数组被迭代，尽管被搜索的元素在开始时就存在。但是在 find() 中，一旦找到满足条件的元素，它就会被返回。

find() 和 filter() 的使用示例

当你有一个用例，预计会有超过 1 个元素被返回，你想对所有的元素进行操作，那么你可以使用 filter() 方法。但是如果你希望从数组中只返回一个元素，那么你可以使用 find()，避免额外的迭代。

让我们来看看这两种情况的例子：

1. filter() 使用示例

const x = [1, 2, 3, 4, 5];

const y = x.filter(el => el%2 === 0);

console.log("y is: ", y); // y is: [2, 4]

在上面的例子中，filter() 更有意义，因为你想遍历数组的所有元素，找到能被 2 整除的元素。

2. find() 使用示例

const emp = [
    {
        name: "Ram",
        empID: 101
    },
    {
        name: "Sham",
        empID: 102
    },
    {
        name: "Mohan",
        empID: 103
    }
];

const res = emp.find(el => el.empID === 102);

console.log("res is: ", res); // res is: {name: 'Sham', empID: 102}

在上面的例子中，find() 更有意义，因为只有一个雇员的 empID 是 102，所以 find() 有助于避免在数组中迭代第三个对象。

谢谢你阅读本文！

如果你觉得这篇文章有用，请与你的朋友和同事分享它。