持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第11天，点击查看活动详情

语法

array.filter(function(item,index,arr), ins)

参数

参数1：回调函数（必需）

参数2：传递给回调函数的this指针（可选）

回调函数

参数1：当前元素

参数2：当前元素的下标

参数3：原数组

let list = [1, 2, 3];
list.filter(function (item, index, arr) {
    console.log(item, index, arr);
});

this指针

let list = [1, 2, 3];
let ins = { haha: '我的传进来的this' };
list.filter(function () {
    console.log(this);
}, ins);

如果不传，默认是全局window变量：

let list = [1, 2, 3];
list.filter(function () {
    console.log(this);
});

返回值

返回数组，包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组。

let list = [1, 2, 3];
let res = list.filter(item => item > 1);
console.log(res);

let list = [1, 2, 3];
let res = list.filter(item => item > 3);
console.log(res);

使用

简单过滤

筛选出性别为男的数据：

let list = [
    { sex: 'male', score: 90, name: 'Jane' },
    { sex: 'male', score: 80, name: 'Jay' },
    { sex: 'female', score: 90, name: 'Lili' }
];
let res = list.filter(item => item.sex === 'male');
console.log(res);

双重过滤

在条件中写

let list = [
    { sex: 'male', score: 90, name: 'Jane' },
    { sex: 'male', score: 80, name: 'Jay' },
    { sex: 'female', score: 90, name: 'Lili' }
];
let res = list.filter(item => item.sex === 'male' && item.score >= 90);
console.log(res);

分两次filter

let list = [
    { sex: 'male', score: 90, name: 'Jane' },
    { sex: 'male', score: 80, name: 'Jay' },
    { sex: 'female', score: 90, name: 'Lili' }
];
let res = list.filter(item => item.sex === 'male').filter(item => item.score >= 90);
console.log(res);

效果是一样的，个人是更偏向于在条件中一次性过滤出想要的数据，分多次filter一个是能够说明filter返回了一个新数组，因为数组才可以使用filter,另一个就是可能对于新手来说，更有助于认识filter的作用。

手写

理清需求

函数接收2个参数，一个回调函数，一个this指向
函数会遍历数组每一项，将符合条件的项筛选出来
回调函数接收3个参数：当前元素、下标、原数组
回调函数可通过函数的第二个参数改变this指向
函数返回一个筛选后的数组，如果没有符合条件的项，则返回空数组根据需求，不难写出以下代码：

Array.prototype._filter = function (callback, ins) {
    let res = [];
    for (let i = 0; i < this.length; i++) {
        if (callback.call(ins, this[i], i, this)) {
            res.push(this[i])
        }
    }
    return res;
};

测试

let res = [1, 2, 3]._filter(function (item, index, arr) {
    console.log(item, index, arr);
    console.log(this);
    return item > 1;
}, { o: 100 });
console.log(res);

let res = [1, 2, 3]._filter(item => item > 3);
console.log(res);

返回的结果完全符合预期，以上就是手写filter的核心代码，是不是so easy。

结语

今天关于数组filter的介绍就讲到这里，关注我获取更多有关数组方法的讲解，后续会持续更新。我是末世未然，一个爱折腾的新晋奶爸，祝好

手写数组方法（三）：filter

语法

参数