What-is-map-and-filter-in-JavaScript.png

map

假設(shè)我們有一個(gè)數(shù)組arrOne，其中存儲(chǔ)了一些數(shù)字，并且我們想對(duì)每個(gè)數(shù)字執(zhí)行一些計(jì)算。但是我們也不想弄亂原始數(shù)組。

這個(gè)時(shí)候我們就可以使用map函數(shù)來(lái)幫助我們實(shí)現(xiàn)。

let arrOne = [32, 45, 63, 36, 24, 11]

arrOne.map(value/element, index, array)

假設(shè)我們想在不更改原始數(shù)組的情況下將每個(gè)元素乘以 5。

這是執(zhí)行此操作的代碼：

let arrOne = [32, 45, 63, 36, 24, 11]
const multFive = (num) => {
    return num * 5; //'num' here, is the value of the array.
}
let arrTwo = arrOne.map(multFive)
console.log(arrTwo)

這是輸出：

[ 160, 225, 315, 180, 120, 55 ]

那么這里發(fā)生了什么？好吧，我有一個(gè)arrOne包含 6 個(gè)元素的數(shù)組。multFive接下來(lái)，我用“num”作為參數(shù)初始化了一個(gè)箭頭函數(shù)。這將返回num和 5 的乘積，其中“num”變量由 map() 方法提供數(shù)據(jù)。

如果您不熟悉箭頭函數(shù)但熟悉常規(guī)函數(shù)，箭頭函數(shù)與此相同：

function(num) {  
        return num * 5;
}

然后，我初始化了另一個(gè)變量arrTwo，該變量將存儲(chǔ) map() 方法創(chuàng)建的新數(shù)組中。

在“arrOne”數(shù)組上調(diào)用了 map() 方法。因此，map() 方法將從 index[0] 開(kāi)始選擇該數(shù)組的每個(gè)值，并對(duì)每個(gè)值執(zhí)行所需的計(jì)算。然后它將使用計(jì)算值形成一個(gè)新數(shù)組。

重要提示：請(qǐng)注意我是如何強(qiáng)調(diào)不更改原始數(shù)組的。那是因?yàn)檫@個(gè)屬性使 map() 方法與 'forEach()' 方法不同。map() 方法創(chuàng)建一個(gè)新數(shù)組，而“forEach()”方法用計(jì)算出的數(shù)組改變/更改原始數(shù)組。

filter

我們可以使用此方法根據(jù)提供的條件過(guò)濾數(shù)組。filter() 方法還會(huì)創(chuàng)建一個(gè)新數(shù)組。

舉個(gè)例子：假設(shè)你有一個(gè)數(shù)組arrName并且這個(gè)數(shù)組存儲(chǔ)了一堆數(shù)字?，F(xiàn)在，我們想看看哪些數(shù)字可以被3整除， 并從中創(chuàng)建一個(gè)單獨(dú)的數(shù)組。

這是執(zhí)行此操作的代碼：

let arrNum = [15, 39, 20, 32, 30, 45, 22]
function divByFive(num) {
  return num % 3 == 0
}
let arrNewNum = arrNum.filter(divByFive)
console.log(arrNewNum)

這是輸出：

[ 15, 39, 30, 45 ]

讓我們分解這段代碼。arrNum一個(gè)包含 7 個(gè)元素的數(shù)組。divByFive用“num”作為參數(shù)初始化了一個(gè)函數(shù)。每次為比較傳遞一個(gè)新的 num 時(shí)，它都會(huì)返回 true 或 false，其中 'num' 變量由 filter() 方法提供數(shù)據(jù)。

然后，我初始化了另一個(gè)變量arrNewNum，它將存儲(chǔ) filter() 方法將創(chuàng)建的新數(shù)組。

調(diào)用了arrNum數(shù)組的 filter() 方法。因此，filter() 方法將從 index[0] 開(kāi)始選擇該數(shù)組的每個(gè)值并對(duì)每個(gè)值執(zhí)行操作。然后它將使用計(jì)算值形成一個(gè)新數(shù)組。

reduce

假設(shè)我們想要求數(shù)組中所有元素的總和?，F(xiàn)在，您可以使用 for 循環(huán)或 forEach() 方法，但 reduce 是專(zhuān)門(mén)為此類(lèi)任務(wù)構(gòu)建的。

該reduce()方法通過(guò)對(duì)元素共同執(zhí)行所需的操作，將數(shù)組簡(jiǎn)化為單個(gè)值。

讓我們以上面的例子為例并對(duì)其使用reduce：

let arrNum = [15, 39, 20, 32, 30, 45, 22]
function sumOfEle(num, ind) {
  return num + ind;
}
let arrNum2 = arrNum.reduce(sumOfEle)
console.log(arrNum2)

這是輸出：

203

一切都與 map() 和 filter() 方法相同——但重要的是要了解 reduce 方法是如何工作的。

reduce() 方法沒(méi)有明確的語(yǔ)法。讓我們看看最簡(jiǎn)單的一個(gè)，它將為您提供使用 reduce() 的所有方法的要點(diǎn)。

下面是一些示例語(yǔ)法reduce()：

//Taking the above array for an example
let arrNum = [15, 39, 20, 32, 30, 45, 22]

arr.reduce((a1, a2) => { 
 return a1 + a2
})

看看這個(gè)語(yǔ)法。在這里，reduce 采用兩個(gè)參數(shù)，a1并且a2，其中a1充當(dāng)累加器，而a2具有索引值。

現(xiàn)在，在第一次運(yùn)行時(shí)，累加器等于零并a2保存數(shù)組的第一個(gè)元素。reduce 所做的是將 a2 保存的累加器中的值拋出并將其遞增到下一個(gè)。之后，reduce() 方法對(duì)兩個(gè)操作數(shù)執(zhí)行操作。在這種情況下，它是加法。

因此，基本上a1是累加器，當(dāng)前為零并a2保存 15。第一次運(yùn)行后，累加器中有 15 并a2保存下一個(gè)值，即 39。

所以，0 + 15 = 15

現(xiàn)在，在第二次運(yùn)行時(shí)，在累加器中減少 throwsa2的值 39，然后對(duì)兩個(gè)操作數(shù)執(zhí)行操作。

所以，15 + 39 = 54

現(xiàn)在，在第三次運(yùn)行時(shí)，累加器的總和為 15 和 39，即 54。a2現(xiàn)在，reduce 方法將 20 扔到累加器上，總和為54 + 20 = 74.

這個(gè)過(guò)程一直持續(xù)到數(shù)組結(jié)束。