JS数组中filter方法的使用实例
更新时间：2022年07月14日 15:52:44 作者：小李的代码经销商
在数组的使用中我们通常会有数组的过滤的需求,比如值在某个范围内的数字,用来组成一个新的数组,这就用到了数组的过滤,下面这篇文章主要给大家介绍了关于JS数组中filter方法使用的相关资料,需要的朋友可以参考下
（福利推荐：【腾讯云】服务器最新限时优惠活动，云服务器1核2G仅99元/年、2核4G仅768元/3年，立即抢购>>>：9i0i.cn/qcloud）
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
1、定义
filter()创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
2、语法
array.filter(function(currentValue,index,arr), thisValue);
3、参数说明
返回
4、用法
filter() 方法用于把Array中的某些元素过滤掉，然后返回剩下的未被过滤掉的元素。
5、注意事项
1、filter() 不会对空数组进行检测；
2、filter() 不会改变原始数组。
6、使用实例
1.返回数组array中所有元素都大于等于14的元素、返回等于14、返回大于某个值和小于某个值的元素的元素。
const array = [14, 17, 18, 32, 33, 16, 40]; const newArr = array.filter(num => num > 14) console.log(newArr);//打印 [17,18,32,33,16,40] // 查找某个值------------------------- const array = [14, 17, 18, 32, 33, 16, 40]; const newArr = array.filter(num => num == 14) console.log(newArr);//打印 [14] //返回大于某个值和小于某个值的元素 const array = [14, 17, 18, 32, 33, 16, 40]; const newArr = array.filter(num => num > 14 && num < 33) console.log(newArr);//打印 [17, 18, 32, 16]
2.数组去重操作：对数组array中所有相同的元素进行去重复操作。
const array = [2, 2, 'a', 'a', true, true, 15, 17]
const newArr = array.filter((item, i, arr) => {
return arr.indexOf(item) === i
})
console.log(newArr);//打印 [2, 'a', true, 15, 17]
//-------------------------------------------------------------------------
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 4, 5, 6, 7, 9,]
const newArr = array.filter((item, i, arr) => {
return arr.indexOf(item) === i
})
console.log(newArr);// 打印 [1, 2, 3, 4, 5, 6, 7, 8, 9]3、数组中保留奇数或者偶数。
//保留偶数----------------------------------------
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
const newArr = array.filter((item, i, arr) => {
return item % 2 === 0
})
console.log(newArr);// 打印 [2, 4, 6, 8, 10]
//保留奇数----------------------------------------
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
const newArr = array.filter((item, i, arr) => {
return item % 2 !== 0
})
console.log(newArr);// 打印 [1, 3, 5, 7, 9]4、去掉数组中的假值，比如：空字符串、undefined、null、0、false。
const array = [
{ id: 3 },
{ id: 4 },
{ id: null },
{ id: undefined },
{ id: '' },
{ id: 0 },
{ id: false }
]
const newArr = array.filter(({ id }) => id)
console.log(newArr);// 打印 [{ "id": 3 },{ "id": 4 }]
//-------------------------------------------------------------------
const array = [undefined, null, 3, 5, 'a', false, 0]
const newArr = array.filter(item => item)
console.log(newArr);// 打印 [3, 5, 'a']5、把对象数组array中的某个属性值取出来存到数组newArr中。
const array = [
{ name: "a", type: "letter" },
{ name: '1', type: "digital" },
{ name: 'c', type: "letter" },
{ name: '2', type: "digital" },
];
const newArr = array.filter((item, i, arr) => {
return item.type === "letter"
})
console.log(newArr);
// 打印 [{ "name": "a", "type": "letter" }, { "name": "c", "type":"letter" }]6、filter结合find方法，实现两个数组的补集的解决方法，oldArr的元素newArr中都有，在newArr中去掉所有的oldArr。
find() 方法返回数组中满足提供的测试函数的第一个元素的值。这里有四个元素，那么就会返回两个数组元素相等的值，这里取反就返回不相等的值， 不取反的时候因为30的元素不符合，所以不返回30的值。
const array = [32, 4, 11, 55, 46, 99, 104, 54, 16, 33, 78, 43, 40]
const oldArr = [32, 33, 16, 40, 30]
function myfunction() {
const result = array.filter(item1 => {
//此处取反去掉，将变换元素状态
return !oldArr.find(item2 => {
return item1 === item2
})
})
return result
}
const newArr = myfunction()
console.log(newArr);
// 取反打印 [4, 11, 55, 46, 99, 104, 54, 78, 43]
// 不取反打印 [32, 16, 33, 40] 此处30的元素不符合，所以不返回30的值附：多条件单数据筛选
根据单个名字或者单个年龄筛选，用filter方法，判断条件之间是或的关系。
// 根据名字或者年龄筛选
function filterByName2(aim, name, age) {
return aim.filter(item => item.name == name || item.age == age)
}
console.log(filterByName2(aim,'Leila',19))总结
到此这篇关于JS数组中filter方法使用的文章就介绍到这了,更多相关JS数组filter方法内容请搜索程序员之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持程序员之家！
相关文章
本文主要分享了js实现增加数字显示的环形进度条效果的示例代码。具有一定的参考价值，下面跟着小编一起来看下吧2017-02-02
由于各浏览器的js实现不同，因此各浏览器的原生对象（这里不涉及DOM实现，当然这也有区别）的原生方法也不尽相同，采用原生方法的好处显而易见，使用兼有效率，而且其中有些方法可能包含在以后的ECMAscript规范中2011-11-11
脚本使用了WScript.Shell和Scripting.FileSystemObject的组件，所以必须要在IE下面和打开安全选项中运行； 另外还用到了Jquery. 代码只是客户端代码， 至于服务器的接收代码网上好多了2010-12-12
Javascript跨域访问是web开发者经常遇到的问题，什么是跨域，就是一个域上加载的脚本获取或操作另一个域上的文档属性。下面这篇文章主要介绍了JavaScript用JSONP跨域请求数据的方法,需要的朋友可以参考借鉴，下面来一起看看吧。2017-01-01
这篇文章主要介绍了使用swiper自定义分页点击跳转指定页面方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
微信小程序也是有列表渲染和条件渲染的,下面这篇文章主要给大家介绍了关于微信小程序如何实现列表渲染和条件渲染的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-06-06
今天小编就为大家分享一篇laravel实现中文和英语互相切换的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
可以让你编辑浏览器中看到网页可编辑的实现代码。2009-10-10
这篇文章主要介绍了微信小程序如何获取用户头像和昵称，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
Add a Formatted Table to a Word Document
Add a Formatted Table to a Word Document...2007-06-06
最新评论