js中的数组筛选fliter

本文探讨了JavaScript中的数组筛选,特别是针对多条件下的复合筛选。通过filter方法,可以实现单条件单数据、单条件多数据、多条件单数据和多条件多数据的筛选。文中列举了各种示例,包括按年龄和名字筛选、数组去重、保留奇数/偶数、去除特定值等,同时提到了filter与find方法的结合使用。
摘要由CSDN通过智能技术生成

有一个需求是在前端部分完成筛选功能,一次拿到所有数据,然后根据条件筛选。通常情况下筛选是后台给接口,在数据量不大的情况下,也有人可能会遇到前端筛选这样的情况。
一般情况下的单条件筛选,数组的filter方法就能够满足需求,本文讨论的重点是多条件下的复合筛选,并列出了几个相关知识点。

filter()创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。

array.filter(function(currentValue,index,arr), thisValue);

filter() 方法用于把Array中的某些元素过滤掉,然后返回剩下的未被过滤掉的元素。

filter() 不会对空数组进行检测;

filter() 不会改变原始数组。

单条件单数据筛选

根据单个名字筛选,用filter方法,判断name是否为目标名字即可

// 根据单个名字筛选
function filterByName(aim, name) {
   
    return aim.filter(item => item.name == name)
}
// 输入 aim 'Leila' 
//期望输出为 [{name:'Leila', age: 16, gender:'female'}]
console.log(filterByName(aim,'leila'))

单条件多数据筛选

根据多个名字筛选,这里是用for循环遍历目标数组,
然后用find方法找到后push到结果数组里,
用find方法是重名情况下也能得到想要的结果。
for循环可以用数组的一些遍历方法替代,代码可以更简化,
示例就是大概表达个意思。

// 根据多个名字筛选
function filterByName1(aim, nameArr) {
   
    let result = []
    for(let i = 0; i < nameArr.length; i++) {
   
        result.push(aim.find(item => item.name = nameArr[i]))
    }
    return result
}
// 输入 aim ['Anne','Jay'] 
//期望输出为 [{name:'Anne', age: 23, gender:'female'},{name:'Jay', age: 19, gender:'male'}]
console.log(filterByName1(aim,['Leila','Jay']))
// 有BUG 改进后
 

多条件单数据筛选

// 根据名字或者年龄筛选
function filterByName2(aim, name, age) {
   
    return aim.filter(item => item.name == name || item.age == age)
}
console.log(filterByName2(aim,'Leila',19))

多条件多数据筛选

//根据名字和年龄多元素筛选
export function multiFilter(array, filters) {
   
  const filterKeys = Object.keys(filters)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

都挺好,刚刚好

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值