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

数组过滤的方法最常用的就是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: "上海"}]
// 其它的大家自己测试复制代码

 

 

 

 

 

 

 

 

 

 

最后原文摘自https://blog.csdn.net/weixin_34090562/article/details/91397684