Array 实例方法 filter 的实现

Array.prototype.filter()

filter() 方法创建一个新数组，其中包含通过所提供函数实现的测试的所有元素。 换句话说，它会筛选出原始数组中满足条件的元素，并将其组成一个新的数组返回。 filter() 不会改变原数组，但是传入的回调函数可以改变原数组。

语法

filter(callbackFn) 
filter(callbackFn, thisArg)

参数

1、callbackFn：为数组中的每个元素执行的函数。返回的真值会将元素追加到新数组中（是追加不是添加），否则返回一个假值。

该函数被调用时将传入以下参数：

• element：数组中当前正在处理的元素。
• index：正在处理的元素在数组中的索引。
• array：调用了 filter() 的数组本身。

2、thisArg（可选）：执行 callbackFn 时用作 this 的值。

返回值

返回给定数组的一部分的浅拷贝，其中只包括通过提供的函数实现的测试的元素。 如果没有元素通过测试，则返回一个空数组。

用法

第一种（推荐）

const array = [1, 2, 3]
const newArray = array.filter((element, index, array) => {
    // 返回真假值判断
    return Object.is(element, 2)
})
// [2]

第二种（基于 this 进行操作时）

const thisArg = { value: 1 }
const array = [1, 2, 3]
const newArray = array.filter(function (element, index, array) {
    // 返回真假值判断
    return Object.is(element, this.value)
}, thisArg)
// [1]

描述

filter() 方法是一个迭代方法。它为数组中的每个元素调用提供的 callbackFn 函数一次，并构造一个由所有返回真值的元素值组成的新数组。

callbackFn 仅在已分配值的数组索引处被调用。它不会在稀疏数组中的空槽处被调用。

请注意，在第一次调用 callbackFn之前，数组的长度已经被保存。因此：

• 当开始调用 filter() 时，callbackFn 将不会访问超出数组初始长度的任何元素。
• 对已访问索引的更改不会导致再次在这些元素上调用 callbackFn。
• 如果数组中一个现有的、尚未访问的元素被 callbackFn 更改，则它传递给 callbackFn 的值将是该元素被修改后的值。被删除的元素则不会被访问。

上述类型的并发修改经常导致难以理解的代码，通常应避免（特殊情况除外）。

filter() 方法是通用的。它只期望 this 值具有 length 属性和整数键属性。

实现 filter 方法

从上面 filter 描述总结实现 filter 时注意实现这三点。

• 回调函数调用之前，数组的长度已经被保存。
• 回调函数不会在稀疏数组中的空槽处被调用。
• 返回值是所有真值的元素值组成的新数组。

Array.prototype.myFilter = function (fun, context) {
    if (!Object.is(typeof fun, 'function')) {
        throw TypeError(`${typeof fun} is not a function`)
    }
    const length = this.length // 数组的长度已经被保存
    const newArr = []
    for (let i = 0; i < length; i++) {
        if (Object.hasOwn(this, i)) {  // 跳过稀疏数组
            const result = fun.call(context, this[i], i, this)
            if (result) {
                newArr.push(this[i]) // 追加符合过滤条件的元素
            }
        }
    }
    return newArr
}

结语

到这里 Array 实例方法 filter 实现完成啦。

JavaScript 中的 Array 类型提供了一系列强大的实例方法。在 Array 实例方法实现系列专栏中，我将深入探讨一些常见的 Array 实例方法，解析它们的实现原理。

如果有错误或者不严谨的地方，请大家务必给予指正，十分感谢。欢迎大家在评论区中讨论。