JS数组find与filter方法区别详解：返回值、用法及示例

前言

JavaScript 在 ES6 标准中引入了多种数组方法，每种方法都有其特定的应用场景和优势。

在应用程序开发过程中，开发者经常需要利用数组方法来提取特定的值列表，或者获取满足条件的单个及多个匹配项。

在对比这两种方法的具体差异之前，我们需要先分别了解它们的基本工作原理。

JavaScript find() 方法

ES6 新增的 find() 方法用于返回数组中第一个满足测试函数条件的元素值。如果没有任何元素满足测试条件，该方法将返回 undefined。

语法

以下语法示例中使用了箭头函数作为测试回调。


find((element) => { /* ... */ } )
find((element, index) => { /* ... */ } )
find((element, index, array) => { /* ... */ } )

假设我们有一个包含 name、age 和 id 属性的用户对象列表，数据结构如下所示：


let users = [{
    id:1,
    name: 'John',
    age: 22
}, {
    id:2,
    name: 'Tom',
    age: 22
}, {
    id:3,
    name: 'Balaji',
    age: 24
}];

下面的代码演示了如何使用 find() 方法查找年龄大于 23 的第一个用户。


console.log(users.find(user => user.age > 23));
//console
//{ id: 3, name: 'Balaji', age:24}

接下来，我们尝试查找第一个年龄恰好为 22 的用户。


console.log(users.find(user => user.age === 22));
//console
//{ id: 1, name: 'John', age:22}

假设遍历结束后未找到任何匹配项，该方法将返回 undefined。


console.log(users.find(user => user.age === 25));
//console
//undefined

JavaScript filter() 方法

filter() 方法会创建一个新数组，其中包含所有通过测试函数的元素。如果没有元素满足测试条件，则返回一个空数组。

语法


filter((element) => { /* ... */ } )
filter((element, index) => { /* ... */ } )
filter((element, index, array) => { /* ... */ } )

我们将沿用上述相同的用户数组和测试函数来进行 filter 示例演示。

以下代码使用 filter() 方法查找所有年龄大于 23 的用户。


console.log(users.filter(user => user.age > 23));
//console
现在我们要过滤年龄为 22 岁的用户//[{ id: 3, name: 'Balaji', age:24}]

现在，我们过滤出所有年龄为 22 岁的用户。


console.log(users.filter(user => user.age === 22));
//console
//[{ id: 1, name: 'John', age:22},{ id: 2, name: 'Tom', age:22}]

假设未找到任何匹配项，该方法将返回一个空数组。


console.log(users.filter(user => user.age === 25));
//console
//[]

find() 和 filter() 的区别与共点

共点

高阶函数：这两个方法都属于高阶函数，即接收函数作为参数的函数。

区别

1、通过一个测试功能

find() 仅返回数组中第一个满足条件的元素。

filter() 则返回一个包含所有满足测试函数条件的新数组。

2、如果没有值满足测试函数

find() 返回 undefined；

filter() 返回一个空数组；

直接上代码


let arr = [
  {
    name: 'Rick',
    age: 60
  },

  {
    name: 'Rick',
    age: 70
  },

  {
    name: 'Morty',
    age: 14
  }

]

let findResult = arr.find(i => i.name === 'Rick')
let filterResult = arr.filter(i => i.name === 'Rick')

console.log(arr); 
/*  输出结果
  [
    {
      name: "Rick",
      age: 60
    },

    {
      name: "Rick",
      age: 70
    },

    {
      name: "Morty",
      age: 14
    }
  ]

*/

console.log(findResult);   // {name: "Rick", age: 60}
console.log(filterResult);  // [{name: "Rick", age: 60}, {name: "Rick", age: 70}]

根据以上代码的输出结果，可以发现 find 和 filter 都不会改变原数组。

总结

到此这篇关于JavaScript中find()和filter()方法的区别小结的文章就介绍到这了,更多相关js find() 和 filter() 方法的区别内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

JavaScript中find()和filter()方法的区别小结

前言

JavaScript find() 方法

JavaScript filter() 方法

find() 和 filter() 的区别与共点

直接上代码

总结

实用工具推荐