JavaScript 过滤器数组 使用 JavaScript Filter() 方法过滤数组

2025-06-07

JavaScript 过滤器数组使用 JavaScript Filter() 方法过滤数组

过滤不需要的元素以减小数组的大小很有趣，对吧？JavaScript 数组过滤方法让它变得更加有趣。

在我上一篇博文中，我介绍了 JavaScript 中的数组 map 方法。如果您错过了，可以点击此链接查看。在上一篇博文的示例中，我们看到了如何在应用于数组元素的回调函数中使用逻辑表达式。以下是代码片段：

    const numbers = [4, 9, 36, 49];

    let oddSquareRoots = numbers.map((num) => {
       if(num % 2 != 0) {
           return Math.sqrt(num)     
       }
       return num;
    })

    console.log(oddSquareRoots);
Enter fullscreen mode Exit fullscreen mode

虽然这是可能的，但并不理想。更有效的方法是使用过滤方法。现在，让我们回答这个问题：什么是过滤方法？如何使用它？

理解过滤方法

根据 MDN 文档：

filter() 方法创建一个新数组，其中包含通过所提供函数实现的测试的所有元素。

让我们通过一个例子进一步简化这一点。

如果你有一个随机数数组（例如人物的年龄），并且你只需要大于某个特定数字（例如 18）的数字。如何使用普通的 for 循环来实现呢？

    const ages = [11, 34, 8, 9, 23, 51, 17, 40, 14];

    let olderThan18 = [];

    for (let i = 0; i < ages.length; i++) {
        if(ages[i] > 18){
            olderThan18.push(ages[i])
        }
    }

    console.log(olderThan18); // [34, 23, 51, 40]
Enter fullscreen mode Exit fullscreen mode

使用过滤方法会简单得多，如下所示：

    const ages = [11, 34, 8, 9, 23, 51, 17, 40, 14];

    let olderThan18 = ages.filter((age) => age > 18);

    console.log(olderThan18); //[34, 23, 51, 40]
Enter fullscreen mode Exit fullscreen mode

PS：示例中我们使用了箭头函数。如果您不理解它的语法，请参考这篇文章。

无需使用 for 循环，我们就能获得相同的结果，而且使用起来更加容易。

如果我们决定在使用过滤方法之前声明回调函数，我们可以这样做：

    const ages = [11, 34, 8, 9, 23, 51, 17, 40, 14];
    const isOlderThan18 = (age) => age > 18;

    let olderThan18 = ages.filter(isOlderThan18);

    console.log(olderThan18); // [34, 23, 51, 40]
Enter fullscreen mode Exit fullscreen mode

让我们看一下过滤方法的语法。

Filter() 方法的语法

过滤方法的基本语法如下：

    let newArray = array.filter(callback);
Enter fullscreen mode Exit fullscreen mode

在哪里

  • newArray - 返回的新数组
  • array - 调用过滤方法的数组
  • 回调 - 应用于数组每个元素的回调函数

回调函数可以接受三个参数

  • element - 当前正在处理的元素
  • index - 正在处理的当前元素的索引
  • array - 调用过滤器的原始数组

考虑到这些论点，我们还可以将语法写为：

   let newArray = array.filter(callback(element, index, array));

   or

   let newArray = array.filter((element, index, array) => {
        //filter 'em elements
    })
Enter fullscreen mode Exit fullscreen mode
以下是有关过滤方法的一些注意事项。

  1. 它返回一个新数组。

  2. 它不会改变调用它的原始数组，即原始数组保持不变。

  3. filter 方法处理的元素范围在第一次调用之前设置。如果在 map 开始后向数组中添加了新元素，则回调不会处理该元素。

何时使用过滤方法

当您只想要数组中满足所需条件的项目时。

使用过滤方法的示例

以下是使用过滤方法可以执行的两个示例。

示例 1：过滤对象数组

假设你有一个包含国家/地区数组，并且你只想筛选位于特定大洲的国家/地区。这是一个使用数组过滤方法的示例。

    const countries = [
        { name: 'Nigeria', continent: 'Africa'},
        { name: 'Nepal', continent: 'Asia'},
        { name: 'Angola', continent: 'Africa'},
        { name: 'Greece', continent: 'Europe'},
        { name: 'Kenya', continent: 'Africa'},
        { name: 'Greece', continent: 'Europe'}
    ]

    let asianCountries = countries.filter(country => {
        return country.continent === 'Asia';
    })

    console.log(asianCountries); // [{name: "Nepal", continent: "Asia"}]
Enter fullscreen mode Exit fullscreen mode

示例 2：在数组中搜索特定字母

给定一个单词数组，你想找出哪些单词包含特定的字母。例如，你想把包含特定字母的女性名字组合在一起，方法如下。

    const names = ['Victoria', 'Pearl', 'Olivia', 'Annabel', 'Sandra', 'Sarah'];
    const filterItems = (letters) => {
        return names.filter(name => name.indexOf(letters) > -1);
    } 

    console.log(filterItems('ia')); // ["Victoria", "Olivia"]
Enter fullscreen mode Exit fullscreen mode

结论

因此，在这篇文章中，我们看到了 JavaScript Filter 方法如何轻松地过滤数组中的元素。

还记得文章开头提到的例子吗？你能尝试使用 filter 方法来实现同样的效果吗？

有任何问题或补充？请留言。

感谢您的阅读:)

无耻的插件🙈

如果您想进一步了解我，请点击这里访问我的网站。

文章来源：https://dev.to/sarah_chima/filter-arrays-with-the-javascript-filter-method-261n
Devto 翻译
PREV
ES6 中的对象解构
NEXT
ES6 中的箭头函数