js数组中filter方法的使用和实现

MDN定义

filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

语法

var newArray = arr.filter(callback(element[, index[, selfArr]])[, thisArg])

参数

callback
循环数组每个元素时调用的回调函数。回调函数返回 true 表示保留该元素，false 则不保留。它接受以下三个参数：
（1）element
数组中当前正在处理的元素。
（2）index可选
正在处理的元素在数组中的索引。
（3）selfArr可选
调用了 filter 方法的数组本身。

thisArg可选
执行 callback 时，用于 改变callback函数this 的值。

返回值

一个新的、由调用callback函数返回值为true的元素组成的数组，如果callback函数调用米没有返回true，则返回空数组。

详细描述

filter 方法循环数组中的每个元素时调用一次 callback 函数，并利用所有使得 callback 回调函数返回 true 或等价于 true 的值的元素创建一个新数组。注意：callback 回调函数只会在已经赋值的索引上被调用，对于那些已经被删除或者从未被赋值的索引不会被调用。那些没有通过 callback 测试的元素会被跳过，不会被包含在新数组中。

callback 回调函数被调用时传入三个参数：
1.数组当前元素的值
2.元素在数组中的索引
3.被遍历的数组本身

如果为 filter 提供一个 thisArg 参数，则它会被作为 callback 被调用时的 this 值。否则，callback 的 this 值在非严格模式下将是全局对象，严格模式下为 undefined。（callback 函数最后的this指向根据this指向规则进行确定）
filter 不会改变原数组，它返回过滤后的新数组。（虽然filter 方法本身不会改变原数组，但是我们可以在callback函数中进行改变）。

filter 遍历的元素范围在第一次调用 callback 之前就已经确定了。在调用 filter 之后被添加到数组中的元素不会被 filter 遍历到。如果已经存在的元素被改变了，则他们传入 callback 的值是 filter 遍历到它们那一刻的值。被删除或从来未被赋值的元素不会被遍历到。

使用示例

    let arr = [1,3, ,7]
    const newArray = arr.filter((element, index, selfArr) => {
        console.log(index, this)
        return element > 3
    }, {a: 9})
    console.log(newArray)
    // 0 Window 
    // 1 Window 
    // 3 Window 
    // [7]

上述代码结果返回一个新的数组newArray 里面包含所有大于3的原数组arr中的元素，再执行中传入callback回调函数为箭头函数，并传递了改变callback函数this指向的参数thisArg，由打印结果可以看出当callback函数为箭头函数时，thisArg参数没有作用，并且再循环的过程中，原数组中的空值也不会调用传入的callback函数。下面我们看下传入普通函数时的使用：

    let arr1 = ['a', 'ab', 'c']
    const newArry1 = arr1.filter(function(element, index, selfArr){
        console.log(index, this)
        selfArr.push('ac')
        return element.length > 1
    },{a:9})
    console.log(newArry1)
    console.log(arr1)
    // 0 {a: 9}
    // 1 {a: 9}
    // 2 {a: 9}
    // ["ab"]
    // (6) ["a", "ab", "c", "ac", "ac", "ac"]

上述代码过滤的结果返回一个新的数组newArray1里面包含原数组arr1中所有length大于1 的元素。在执行的过程中传入的callback函数为普通函数，根据打印结果可以看出，当callback为普通函数的时候，它的this就会指向传入的thisArg参数，并且在执行callback函数的时候虽然改变了原数组arr1，但是filter方法并不会去遍历新增加的元素。除了传入自定义的函数外我们还可以传入js一些原生的方法如：

    let arr2 = [1,0,null,undefined,'','1']
    const newArray2 = arr2.filter(Boolean)
    console.log(newArray2)
    //  [1, "1"]

上述代码过滤的结果返回一个新的数组newArray2里面包含了原数组中所有经过转换后为true的元素。经过上面的描述和使用接下来就模拟实现自己的filter方法

步骤思路

1、将模拟实现的方法挂在到数组的原型上
2、传入callback参数和thisArg参数
3、创建一个新数组并获取调用该方法原数组的长度（利用this指向规则）
4、利用hasOwnProperty 方法过滤删除的值和空值
5、利用call方法调用callback函数并改变它的指向为thisArg参数
6、根据callback函数返回是否为true，将当前循环的元素添加到数组
7、返回新数组

实现代码

    Array.prototype.myFilter = function(callback, thisArg) {
        // 获取数组的长度，确定循环的次数
        const length = this.length
        let newArray = []
        for (let index = 0; index < length; index++) {
            // 利用hasOwnProperty方法过滤原数组空值和已经删除的值
            if (this.hasOwnProperty(index)) {
                // 利用call方法改变callback函数this的指向
                if (callback.call(thisArg, this[index], index, this)) newArray.push(this[index])
            }
        }
        return newArray
    }

测试验证

Array.prototype.myFilter = function(callback, thisArg) {
        // 获取数组的长度，确定循环的次数
        const length = this.length
        let newArray = []
        for (let index = 0; index < length; index++) {
            // 利用hasOwnProperty方法过滤原数组空值和已经删除的值
            if (this.hasOwnProperty(index)) {
                // 利用call方法改变callback函数this的指向
                if (callback.call(thisArg, this[index], index, this)) newArray.push(this[index])
            }
        }
        return newArray
    }

    let arr = [1,3, ,7]
    const newArray = arr.myFilter((element, index, selfArr) => {
        console.log(index, this)
        return element > 3
    }, {a: 9})
    console.log(newArray)
    // 0 Window 
    // 1 Window 
    // 3 Window 
    // [7]

    let arr1 = ['a', 'ab', 'c']
    const newArry1 = arr1.myFilter(function(element, index, selfArr){
        console.log(index, this)
        selfArr.push('ac')
        return element.length > 1
    },{a:9})
    console.log(newArry1)
    console.log(arr1)
    // 0 {a: 9}
    // 1 {a: 9}
    // 2 {a: 9}
    // ["ab"]
    // (6) ["a", "ab", "c", "ac", "ac", "ac"]

    let arr2 = [1,0,null,undefined,'','1']
    const newArray2 = arr2.myFilter(Boolean)
    console.log(newArray2)
    //  [1, "1"]

由打印结果可以看出结果和原方法一致。