搜索框,输入关键字过滤对象数组

数组过滤的方法最常用的就是filter,那首先先说一下filter

语法:arr.filter((item,index,arr) => { return 条件});

作用:遍历数组arr,返回满足条件的所有制,放到一个新的数组中

参数:item 数组的每一项,index 索引下标,arr数组自身(基本不用)

返回值:满足条件后的一个新的数组

let arr = [1,2,6,8,3,2]
let arrF = arr.filter((v) => {
    return v > 3
})
console.log(arrF) // [6,8]
// 简写:
let arrF1 = arr.filter(v => v > 3)
console.log(arrF1) // [6,8]复制代码

这里说一下简写规则:如果箭头函数的参数只有一个的话,参数外面的小括号可以省略,如果函数函数的{}内只有一行代码的话不仅可以省略大括号,而且return也可以省略

好的既然了解了filter我们开始进入正题,如果一个数组里包含对象,如何根据对象里面的一个属性去过滤出来呢

let arr = [
{    
    name: 'zhangsan',
    id: '12345',
    province: '上海',
},
{
    name: 'lisi',
    id: '12346',
    province: '江苏',
},
{
    name: 'wangwu',
    id: '13346',
    province: '安徽',
},
{
    name: 'zhaoliu',
    id: '63346',
    province: '山东',
}
]
/**
* arr: 对象数组
* filter: 过滤字段
* keyWord: 输入的字符
*/
function queryArrByType(arr, filter, keyWord) {
    if (!(filter instanceof Array) && !(typeof filter)) throw new TypeError('filter must be a array or string')
    if (typeof filter === 'string') filter = [filter]
    return arr.filter(item => {
        for (var key of filter) {
            if (item[key] && item[key].indexOf(keyWord) !== -1) {
                return true
            }
        }
        return false
    })
}

let arrFilter1 = queryArrByType(arr, ['name','id'], 'zhao')
console.log(arrFilter1) // [{name: "zhaoliu", id: "63346", province: "山东"}]
let arrFilter2 = queryArrByType(arr, ['name','province'], '上')
console.log(arrFilter2) // [{name: "zhangsan", id: "12345", province: "上海"}]
// 其它的大家自己测试复制代码

这里先写这一种很实用的搜索过滤方法,因为时间的关系后期会逐渐补全我所知道的更多的方法


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值