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

极客

　　js中find和filter方法大家在工作中会经常遇到,那么他们有什么区别呢？这篇文章主要给大家介绍了关于JavaScript中find()和 filter()方法区别的相关资料,需要的朋友可以参考下

前言
　　JavaScript 在 ES6 上有很多数组方法，每种方法都有独特的用途和好处。
　　在开发应用程序时，大多使用数组方法来获取特定的值列表并获取单个或多个匹配项。
　　在列出这两种方法的区别之前，我们先来一一了解这些方法。

JavaScript find() 方法
　　ES6 find() 方法返回通过测试函数的第一个元素的值。如果没有值满足测试函数，则返回 undefined。
　　语法
　　以下语法中使用的箭头函数。

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

复制代码

　　我们有一个包含名称 age 和 id 属性的用户对象列表，如下所示：

2. let users = [{
3.     id:1,
4.     name: 'John',
5.     age: 22
6. }, {
7.     id:2,
8.     name: 'Tom',
9.     age: 22
10. }, {
11.     id:3,
12.     name: 'Balaji',
13.     age: 24
14. }];

复制代码

　　以下代码使用 find() 方法查找年龄大于 23 的第一个用户。

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

复制代码

　　现在我们要找到第一个年龄为 22 的用户

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

复制代码

　　假设没有找到匹配意味着它返回 undefined

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

复制代码

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

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

复制代码

　　我们将使用相同的用户数组和测试函数作为过滤器示例。
　　以下代码使用 filter() 方法查找年龄大于 23 的第一个用户。

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

复制代码

　　现在我们要过滤年龄为 22 岁的用户

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

复制代码

　　假设没有找到匹配意味着它返回一个空数组

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

复制代码

find() 和 filter() 的区别与共点
　　共点
　　高阶函数：这两个函数都是高阶函数。
　　区别
　　1、通过一个测试功能
　　find() 返回第一个元素。
　　filter() 返回一个包含所有通过测试函数的元素的新数组。
　　2、如果没有值满足测试函数
　　find() 返回未定义；
　　filter() 返回一个空数组；

直接上代码

2. let arr = [
3.   {
4.     name: 'Rick',
5.     age: 60
6.   },
8.   {
9.     name: 'Rick',
10.     age: 70
11.   },
13.   {
14.     name: 'Morty',
15.     age: 14
16.   }
18. ]
20. let findResult = arr.find(i => i.name === 'Rick')
21. let filterResult = arr.filter(i => i.name === 'Rick')
23. console.log(arr);
24. /*  输出结果
25.   [
26.     {
27.       name: "Rick",
28.       age: 60
29.     },
31.     {
32.       name: "Rick",
33.       age: 70
34.     },
36.     {
37.       name: "Morty",
38.       age: 14
39.     }
40.   ]
42. */
44. console.log(findResult);   // {name: "Rick", age: 60}
45. console.log(filterResult);  // [{name: "Rick", age: 60}, {name: "Rick", age: 70}]

复制代码

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

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

---