filter()方法的应用及底层原理的剖析

1.filter(fn,obj) 的使用方法

filter(fn,obj)方法可以对数组中的元素进行过滤，将满足条件的元素返回到一个新数组。

var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
function fn(ele,index,self){
    if(ele > 5){
        return true;//当函数返回true时即表示该元素被过滤出来
    }else{
        return false;//函数执行结果返回false表示元素不会被过滤
    }
}
var newArr = arr.filter(fn,{});//第二个参数的传入可以改变函数fn this的指向；newArr用来储存被过滤出来的元素
console.log(newArr);//[6, 7, 8, 9]

注意事项：

1.数组中的filter(fn,obj)方法必须需要传一个参数且该参数必须是一个函数,否则就会报错。（即不能不传参数，且必须为函数）

2.第一个参数fn必须是一个函数，fn()中this默认指向window,如果Array.filter()传有第二个参数obj，则第一个参数的this将指向obj.
 

2.Array.filter()底层原理剖析

下面我们用原生JS方法来模仿Array.filter()的功能，从而了解filter的工作原理

Array.prototype.myfilter = function(fn,obj){
    var arr = [];//定义一个数组，来存放被过滤出来的元素
    var This = obj || window;//将This赋值为obj,如果obj没有传入，则This默认为window
    for(var i = 0;i<this.length;i++){
        if(fn.call(This,this[i],i,this)){//改变函数fn的this指向，并且判断函数fn执行的结果是否为true,如果为true则是我们需要过滤的元素。
            arr.push(this[i]);//将过滤出来的元素存放到arr数组中
        }
    }
    return arr;//将用于存放过滤元素的数组返回。
}

filter()和forEach()底层原理具有相似性，如果向进一步了解forEach()

可以参考forEach()方法的应用及底层原理的剖析