Array.prototype.filter()

filter() 方法創(chuàng)建一個(gè)新數(shù)組，其中包含通過(guò)所提供函數(shù)實(shí)現(xiàn)的測(cè)試的所有元素。 換句話說(shuō)，它會(huì)篩選出原始數(shù)組中滿足條件的元素，并將其組成一個(gè)新的數(shù)組返回。 filter() 不會(huì)改變?cè)瓟?shù)組，但是傳入的回調(diào)函數(shù)可以改變?cè)瓟?shù)組。

語(yǔ)法

filter(callbackFn) 
filter(callbackFn, thisArg)

參數(shù)

1、callbackFn：為數(shù)組中的每個(gè)元素執(zhí)行的函數(shù)。返回的真值會(huì)將元素追加到新數(shù)組中（是追加不是添加），否則返回一個(gè)假值。

該函數(shù)被調(diào)用時(shí)將傳入以下參數(shù)：

• element：數(shù)組中當(dāng)前正在處理的元素。
• index：正在處理的元素在數(shù)組中的索引。
• array：調(diào)用了 filter() 的數(shù)組本身。

2、thisArg（可選）：執(zhí)行 callbackFn 時(shí)用作 this 的值。

返回值

返回給定數(shù)組的一部分的淺拷貝，其中只包括通過(guò)提供的函數(shù)實(shí)現(xiàn)的測(cè)試的元素。 如果沒有元素通過(guò)測(cè)試，則返回一個(gè)空數(shù)組。

用法

第一種（推薦）

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

第二種（基于 this 進(jìn)行操作時(shí)）

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() 方法是一個(gè)迭代方法。它為數(shù)組中的每個(gè)元素調(diào)用提供的 callbackFn 函數(shù)一次，并構(gòu)造一個(gè)由所有返回真值的元素值組成的新數(shù)組。

callbackFn 僅在已分配值的數(shù)組索引處被調(diào)用。它不會(huì)在稀疏數(shù)組中的空槽處被調(diào)用。

請(qǐng)注意，在第一次調(diào)用 callbackFn之前，數(shù)組的長(zhǎng)度已經(jīng)被保存。因此：

• 當(dāng)開始調(diào)用 filter() 時(shí)，callbackFn 將不會(huì)訪問(wèn)超出數(shù)組初始長(zhǎng)度的任何元素。
• 對(duì)已訪問(wèn)索引的更改不會(huì)導(dǎo)致再次在這些元素上調(diào)用 callbackFn。
• 如果數(shù)組中一個(gè)現(xiàn)有的、尚未訪問(wèn)的元素被 callbackFn 更改，則它傳遞給 callbackFn 的值將是該元素被修改后的值。被刪除的元素則不會(huì)被訪問(wèn)。

上述類型的并發(fā)修改經(jīng)常導(dǎo)致難以理解的代碼，通常應(yīng)避免（特殊情況除外）。

filter() 方法是通用的。它只期望 this 值具有 length 屬性和整數(shù)鍵屬性。

實(shí)現(xiàn) filter 方法

從上面 filter 描述總結(jié)實(shí)現(xiàn) filter 時(shí)注意實(shí)現(xiàn)這三點(diǎn)。

• 回調(diào)函數(shù)調(diào)用之前，數(shù)組的長(zhǎng)度已經(jīng)被保存。
• 回調(diào)函數(shù)不會(huì)在稀疏數(shù)組中的空槽處被調(diào)用。
• 返回值是所有真值的元素值組成的新數(shù)組。

Array.prototype.myFilter = function (fun, context) {
    if (!Object.is(typeof fun, 'function')) {
        throw TypeError(`${typeof fun} is not a function`)
    }
    const length = this.length // 數(shù)組的長(zhǎng)度已經(jīng)被保存
    const newArr = []
    for (let i = 0; i < length; i++) {
        if (Object.hasOwn(this, i)) {  // 跳過(guò)稀疏數(shù)組
            const result = fun.call(context, this[i], i, this)
            if (result) {
                newArr.push(this[i]) // 追加符合過(guò)濾條件的元素
            }
        }
    }
    return newArr
}

結(jié)語(yǔ)

到此這篇關(guān)于JavaScript中Array實(shí)例方法filter的實(shí)現(xiàn)原理的文章就介紹到這了,更多相關(guān)JavaScript Array filter實(shí)現(xiàn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論