JavaScript中find()和 filter()方法的区别小结
前言
JavaScript 在 ES6 上有很多数组方法,每种方法都有独特的用途和好处。
在开发应用程序时,大多使用数组方法来获取特定的值列表并获取单个或多个匹配项。
在列出这两种方法的区别之前,我们先来一一了解这些方法。
JavaScript find() 方法
ES6 find() 方法返回通过测试函数的第一个元素的值。如果没有值满足测试函数,则返回 undefined。
语法
以下语法中使用的箭头函数。
find((element) => { /* ... */ } ) find((element, index) => { /* ... */ } ) find((element, index, array) => { /* ... */ } )
我们有一个包含名称 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() 方法查找年龄大于 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() 返回未定义;
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() 方法的区别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
text-align:justify实现文本两端对齐 兼容IE
对于text-align 我们再熟悉不过了,可是它有个justify属性,平时很少用到,就鲜为人知了。justify是一种文本靠两边布局方式,一般应用于书刊杂志排版;合理运用text-align:justify 有时会省去很多开发的时间,通过本文介绍text-align:justify实现文本两端对齐 兼容IE2015-08-08jquery pagination插件动态分页实例(Bootstrap分页)
这篇文章主要为大家分享了Bootstrap静态分页和jquery pagination插件动态分页两个实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2016-12-12JavaScript函数之call、apply以及bind方法案例详解
这篇文章主要介绍了JavaScript函数之call、apply以及bind方法案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-08-08
最新评论