JavaScript中map、reduce、filter和find的示例分析

這篇文章將為大家詳細(xì)講解有關(guān)JavaScript中map、reduce、filter和find的示例分析，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

循環(huán)

在 JavaScript 中，至少有四、五種實(shí)現(xiàn)循環(huán)的方法，最基礎(chǔ)的是 while 循環(huán)。我們首先先創(chuàng)建一個(gè)示例函數(shù)和數(shù)組：

// oodlify :: String -> String
function oodlify(s) {
 return s.replace(/[aeiou]/g, 'oodle');
}

const input = [
 'John',
 'Paul',
 'George',
 'Ringo',
];

現(xiàn)在有了一個(gè)數(shù)組，我們想要用 oodlify 函數(shù)處理每一個(gè)元素。如果用 while 循環(huán)，就類似于這樣：

let i = 0;
const len = input.length;
let output = [];
while (i < len) {
 let item = input[i];
 let newItem = oodlify(item);
 output.push(newItem);
 i = i + 1;
}

注意這里發(fā)生的事情，我們用了一個(gè)初始值為 0 的計(jì)數(shù)器 i，每次循環(huán)都會(huì)自增。而且每次循環(huán)中都和 len 進(jìn)行比較以保證循環(huán)特定次數(shù)以后終止循環(huán)。這種利用計(jì)數(shù)器進(jìn)行循環(huán)控制的模式太常用了，所以 JavaScript 提供了一種更加簡(jiǎn)潔的寫(xiě)法： for 循環(huán)，寫(xiě)起來(lái)如下：

const len = input.length;
let output = [];
for (let i = 0; i < len; i = i + 1) {
 let item = input[i];
 let newItem = oodlify(item);
 output.push(newItem);
}

這一結(jié)構(gòu)非常有用，while循環(huán)非常容易把自增的 i 給忘掉，進(jìn)而引起無(wú)限循環(huán)；而for循環(huán)把和計(jì)數(shù)器相關(guān)的代碼都放到了上面，這樣你就不會(huì)忘掉自增 i，這確實(shí)是一個(gè)很好的改進(jìn)?，F(xiàn)在回到原來(lái)的問(wèn)題，我們目標(biāo)是在數(shù)組的每個(gè)元素上運(yùn)行 oodlify() 函數(shù)，并且將結(jié)果放到一個(gè)新的數(shù)組中。

對(duì)一個(gè)數(shù)組中每個(gè)元素都進(jìn)行操作的這種模式也是非常普遍的。因此在 ES2015 中，引入了一種新的循環(huán)結(jié)構(gòu)可以把計(jì)數(shù)器也簡(jiǎn)化掉： for...of 循環(huán)。每一次返回?cái)?shù)組的下一個(gè)元素給你，代碼如下：

let output = [];
for (let item of input) {
 let newItem = oodlify(item);
 output.push(newItem);
}

這樣就清晰很多了，注意這里計(jì)數(shù)器和比較都不用了，你甚至都不用把元素從數(shù)組里面取出來(lái)。for...of 幫我們做了里面的臟活累活。如果現(xiàn)在用 for...of 來(lái)代替所有的 for 循環(huán)，其實(shí)就可以很大程度上降低復(fù)雜性。但是，我們還可以做進(jìn)一步的優(yōu)化。

mapping

for...of 循環(huán)比 for 循環(huán)更清晰，但是依然需要一些配置性的代碼。如不得不初始化一個(gè) output 數(shù)組并且每次循環(huán)都要調(diào)用 push() 函數(shù)。但有辦法可以讓代碼更加簡(jiǎn)潔有力，我們先擴(kuò)展一下問(wèn)題。

如果有兩個(gè)數(shù)組需要調(diào)用 oodlify 函數(shù)會(huì)怎么樣？

const fellowship = [
 'frodo',
 'sam',
 'gandalf',
 'aragorn',
 'boromir',
 'legolas',
 'gimli',
];

const band = [
 'John',
 'Paul',
 'George',
 'Ringo',
];

很容易想到的方法是對(duì)每個(gè)數(shù)組都做循環(huán)：

let bandoodle = [];
for (let item of band) {
 let newItem = oodlify(item);
 bandoodle.push(newItem);
}

let floodleship = [];
for (let item of fellowship) {
 let newItem = oodlify(item);
 floodleship.push(newItem);
}

這確實(shí)ok，有能正確執(zhí)行的代碼，就比沒(méi)有好。但是重復(fù)的代碼太多了——不夠“DRY”。我們來(lái)重構(gòu)它以降低重復(fù)性，創(chuàng)建一個(gè)函數(shù)：

function oodlifyArray(input) {
 let output = [];
 for (let item of input) {
  let newItem = oodlify(item);
  output.push(newItem);
 }
 return output;
}

let bandoodle = oodlifyArray(band);
let floodleship = oodlifyArray(fellowship);

這看起來(lái)好多了，可是如果我們想使用另外一個(gè)函數(shù)該怎么辦？

function izzlify(s) {
 return s.replace(/[aeiou]+/g, 'izzle');
}

上面的 oodlifyArray() 一點(diǎn)用都沒(méi)有了。但如果再創(chuàng)建一個(gè) izzlifyArray() 函數(shù)的話，代碼又重復(fù)了。不管那么多，先寫(xiě)出來(lái)看看什么效果：

function oodlifyArray(input) {
 let output = [];
 for (let item of input) {
  let newItem = oodlify(item);
  output.push(newItem);
 }
 return output;
}

function izzlifyArray(input) {
 let output = [];
 for (let item of input) {
  let newItem = izzlify(item);
  output.push(newItem);
 }
 return output;
}

這兩個(gè)函數(shù)驚人的相似。那么是不是可以把它們抽象成一個(gè)通用的模式呢？我們想要的是：給定一個(gè)函數(shù)和一個(gè)數(shù)組，通過(guò)這個(gè)函數(shù)，把數(shù)組中的每一個(gè)元素做操作后放到新的數(shù)組中。我們把這個(gè)模式叫做 map 。一個(gè)數(shù)組的 map 函數(shù)如下：

function map(f, a) {
 let output = [];
 for (let item of a) {
  output.push(f(item));
 }
 return output;
}

這里還是用了循環(huán)結(jié)構(gòu)，如果想要完全擺脫循環(huán)的話，可以做一個(gè)遞歸的版本出來(lái)：

function map(f, a) {
 if (a.length === 0) { return []; }
 return [f(a[0])].concat(map(f, a.slice(1)));
}

遞歸解決方法非常優(yōu)雅，僅僅用了兩行代碼，幾乎沒(méi)有縮進(jìn)。但是通常并不提倡于在這里使用遞歸，因?yàn)樵谳^老的瀏覽器中的遞歸性能非常差。實(shí)際上，map 完全不需要你自己去手動(dòng)實(shí)現(xiàn)（除非你自己想寫(xiě)）。map 模式很常用，因此 JavaScript 提供了一個(gè)內(nèi)置 map 方法。使用這個(gè) map 方法，上面的代碼變成了這樣：

let bandoodle  = band.map(oodlify);
let floodleship = fellowship.map(oodlify);
let bandizzle  = band.map(izzlify);
let fellowshizzle = fellowship.map(izzlify);

可以注意到，縮進(jìn)消失，循環(huán)消失。當(dāng)然循環(huán)可能轉(zhuǎn)移到了其他地方，但是我們已經(jīng)不需要去關(guān)心它們了?，F(xiàn)在的代碼簡(jiǎn)潔有力，完美。

為什么這個(gè)代碼這么簡(jiǎn)單呢？這可能是個(gè)很傻的問(wèn)題，不過(guò)也請(qǐng)思考一下。是因?yàn)槎虇?？不是，?jiǎn)潔并不代表不復(fù)雜。它的簡(jiǎn)單是因?yàn)槲覀儼褑?wèn)題分離了。有兩個(gè)處理字符串的函數(shù)： oodlify 和 izzlify，這些函數(shù)并不需要知道關(guān)于數(shù)組或者循環(huán)的任何事情。同時(shí)，有另外一個(gè)函數(shù)：map ，它來(lái)處理數(shù)組，它不需要知道數(shù)組中元素是什么類型的，甚至你想對(duì)數(shù)組做什么也不用關(guān)心。它只需要執(zhí)行我們所傳遞的函數(shù)就可以了。把對(duì)數(shù)組的處理中和對(duì)字符串的處理分離開(kāi)來(lái)，而不是把它們都混在一起。這就是為什么說(shuō)上面的代碼很簡(jiǎn)單。

reducing

現(xiàn)在，map 已經(jīng)得心應(yīng)手了，但是這并沒(méi)有覆蓋到每一種可能需要用到的循環(huán)。只有當(dāng)你想創(chuàng)建一個(gè)和輸入數(shù)組同樣長(zhǎng)度的數(shù)組時(shí)才有用。但是如果你想要向數(shù)組中增加幾個(gè)元素呢？或者想找一個(gè)列表中的最短字符串是哪個(gè)？其實(shí)有時(shí)我們對(duì)數(shù)組進(jìn)行處理，最終只想得到一個(gè)值而已。

來(lái)看一個(gè)例子，現(xiàn)在一個(gè)數(shù)組里面存放了一堆超級(jí)英雄：

const heroes = [
 {name: 'Hulk', strength: 90000},
 {name: 'Spider-Man', strength: 25000},
 {name: 'Hawk Eye', strength: 136},
 {name: 'Thor', strength: 100000},
 {name: 'Black Widow', strength: 136},
 {name: 'Vision', strength: 5000},
 {name: 'Scarlet Witch', strength: 60},
 {name: 'Mystique', strength: 120},
 {name: 'Namora', strength: 75000},
];

現(xiàn)在想找最強(qiáng)壯的超級(jí)英雄。使用 for...of 循環(huán)，像這樣：

let strongest = {strength: 0};
for (hero of heroes) {
 if (hero.strength > strongest.strength) {
  strongest = hero;
 }
}

雖然這個(gè)代碼可以正確運(yùn)行，可是實(shí)在太爛了。看這個(gè)循環(huán)，每次都保存到目前為止最強(qiáng)的英雄。繼續(xù)提需求，接下來(lái)我們想要所有超級(jí)英雄的總強(qiáng)度：

let combinedStrength = 0;
for (hero of heroes) {
 combinedStrength += hero.strength;
}

在這兩個(gè)例子中，都在循環(huán)開(kāi)始之前初始化了一個(gè)變量。然后在每一次的循環(huán)中，處理一個(gè)數(shù)組元素并且更新這個(gè)變量。為了使這種循環(huán)套路變得更加明顯一點(diǎn)，現(xiàn)在把數(shù)組中間的部分抽離到一個(gè)函數(shù)當(dāng)中。并且重命名這些變量，以進(jìn)一步突出相似性。

function greaterStrength(champion, contender) {
 return (contender.strength > champion.strength) ? contender : champion;
}

function addStrength(tally, hero) {
 return tally + hero.strength;
}

const initialStrongest = {strength: 0};
let working = initialStrongest;
for (hero of heroes) {
 working = greaterStrength(working, hero);
}
const strongest = working;

const initialCombinedStrength = 0;
working = initialCombinedStrength;
for (hero of heroes) {
 working = addStrength(working, hero);
}
const combinedStrength = working;

用這種方式來(lái)寫(xiě)，兩個(gè)循環(huán)變得非常相似了。它們兩個(gè)之間唯一的區(qū)別是調(diào)用的函數(shù)和初始值不同。兩個(gè)的功能都是對(duì)數(shù)組進(jìn)行處理，最終得到一個(gè)值。所以，我們創(chuàng)建一個(gè) reduce 函數(shù)來(lái)封裝這個(gè)模式。

function reduce(f, initialVal, a) {
 let working = initialVal;
 for (item of a) {
  working = f(working, item);
 }
 return working;
}

reduce 模式在 JavaScript 中也是很常用的，因此 JavaScript 為數(shù)組提供了內(nèi)置的方法，不需要自己來(lái)寫(xiě)。通過(guò)內(nèi)置方法，代碼就變成了：

const strongestHero = heroes.reduce(greaterStrength, {strength: 0});
const combinedStrength = heroes.reduce(addStrength, 0);

ok，如果足夠細(xì)心的話，你會(huì)注意到上面的代碼其實(shí)并沒(méi)有短很多。不過(guò)也確實(shí)比自己手寫(xiě)的 reduce 代碼少寫(xiě)了幾行。但是我們的目標(biāo)并不是使代碼變短或者少寫(xiě)，而是降低代碼復(fù)雜度?，F(xiàn)在的復(fù)雜度降低了嗎？我會(huì)說(shuō)是的。把處理每個(gè)元素的代碼和處理循環(huán)代碼分離開(kāi)來(lái)了，這樣代碼就不會(huì)互相糾纏在一起了，降低了復(fù)雜度。

reduce 方法乍一看可能覺(jué)得非?；A(chǔ)。我們舉的 reduce 大部分也比如做加法這樣的簡(jiǎn)單例子。但是沒(méi)有人說(shuō) reduce 方法只能返回基本類型，它可以是一個(gè) object 類型，甚至可以是另一個(gè)數(shù)組。當(dāng)我第一次意識(shí)到這個(gè)問(wèn)題的時(shí)候，自己也是豁然開(kāi)朗。所以其實(shí)可以用 reduce 方法來(lái)實(shí)現(xiàn) map 或者 filter，這個(gè)留給讀者自己做練習(xí)。

filtering

現(xiàn)在我們有了 map 處理數(shù)組中的每個(gè)元素，有了 reduce 可以處理數(shù)組最終得到一個(gè)值。但是如果想獲取數(shù)組中的某些元素該怎么辦？我們來(lái)進(jìn)一步探索，現(xiàn)在增加一些屬性到上面的超級(jí)英雄數(shù)組中：

const heroes = [
 {name: 'Hulk', strength: 90000, sex: 'm'},
 {name: 'Spider-Man', strength: 25000, sex: 'm'},
 {name: 'Hawk Eye', strength: 136, sex: 'm'},
 {name: 'Thor', strength: 100000, sex: 'm'},
 {name: 'Black Widow', strength: 136, sex: 'f'},
 {name: 'Vision', strength: 5000, sex: 'm'},
 {name: 'Scarlet Witch', strength: 60, sex: 'f'},
 {name: 'Mystique', strength: 120, sex: 'f'},
 {name: 'Namora', strength: 75000, sex: 'f'},
];

ok，現(xiàn)在有兩個(gè)問(wèn)題，我們想要：

找到所有的女性英雄；
找到所有能量值大于500的英雄。
使用普通的 for...of 循環(huán)，會(huì)得到如下代碼：

let femaleHeroes = [];
for (let hero of heroes) {
 if (hero.sex === 'f') {
  femaleHeroes.push(hero);
 }
}

let superhumans = [];
for (let hero of heroes) {
 if (hero.strength >= 500) {
  superhumans.push(hero);
 }
}

邏輯嚴(yán)密，看起來(lái)還不錯(cuò)？但是里面又出現(xiàn)了重復(fù)的情況。實(shí)際上，區(qū)別在于 if 的判斷語(yǔ)句，那么能不能把 if 語(yǔ)句重構(gòu)到一個(gè)函數(shù)中呢？

function isFemaleHero(hero) {
 return (hero.sex === 'f');
}

function isSuperhuman(hero) {
 return (hero.strength >= 500);
}

let femaleHeroes = [];
for (let hero of heroes) {
 if (isFemaleHero(hero)) {
  femaleHeroes.push(hero);
 }
}

let superhumans = [];
for (let hero of heroes) {
 if (isSuperhuman(hero)) {
  superhumans.push(hero);
 }
}

這種只返回 true 或者 false 的函數(shù)，我們一般把它稱作斷言（predicate）函數(shù)。這里用了斷言（predicate）函數(shù)來(lái)判斷是否需要保留當(dāng)前的英雄。

上面代碼的寫(xiě)法會(huì)看起來(lái)比較長(zhǎng)，但是把斷言函數(shù)抽離出來(lái)，可以讓重復(fù)的循環(huán)代碼更加明顯?，F(xiàn)在把種循環(huán)抽離到一個(gè)函數(shù)當(dāng)中。

function filter(predicate, arr) {
 let working = [];
 for (let item of arr) {
  if (predicate(item)) {
   working = working.concat(item);
  }
 }
}

const femaleHeroes = filter(isFemaleHero, heroes);
const superhumans = filter(isSuperhuman, heroes);

同 map 和 reduce 一樣，JavaScript 提供了一個(gè)內(nèi)置數(shù)組方法，沒(méi)必要自己來(lái)實(shí)現(xiàn)（除非你自己想寫(xiě)）。用內(nèi)置數(shù)組方法，上面的代碼就變成了：

const femaleHeroes = heroes.filter(isFemaleHero);
const superhumans = heroes.filter(isSuperhuman);

為什么這段代碼比 for...of 循環(huán)好呢？回想一下整個(gè)過(guò)程，我們要解決一個(gè)“找到滿足某一條件的所有英雄”。使用 filter 使得問(wèn)題變得簡(jiǎn)單化了。我們需要做的就是通過(guò)寫(xiě)一個(gè)簡(jiǎn)單函數(shù)來(lái)告訴 filter 哪一個(gè)數(shù)組元素要保留。不需要考慮數(shù)組是什么樣的，以及繁瑣的中間變量。取而代之的是一個(gè)簡(jiǎn)單的斷言函數(shù)，僅此而已。

與其他的迭代函數(shù)相比，使用 filter 是一個(gè)四兩撥千斤的過(guò)程。我們不需要通讀循環(huán)代碼來(lái)理解到底要過(guò)濾什么，要過(guò)濾的東西就在傳遞給它的那個(gè)函數(shù)里面。

finding

filter 已經(jīng)信手拈來(lái)了吧。這時(shí)如果只想找一個(gè)英雄該怎么辦？比如找 “Black Widow”。使用 filter 會(huì)這樣寫(xiě)：

function isBlackWidow(hero) {
 return (hero.name === 'Black Widow');
}

const blackWidow = heroes.filter(isBlackWidow)[0];

這段代碼的問(wèn)題是效率不夠高。filter 會(huì)檢查數(shù)組中的每一個(gè)元素，而我們知道這里面只有一個(gè) “Black Widow”，當(dāng)找到她的時(shí)候就可以停住，不用再看后面的元素了。那么，依舊利用斷言函數(shù)，我們寫(xiě)一個(gè) find 函數(shù)來(lái)返回第一次匹配上的元素。

function find(predicate, arr) {
 for (let item of arr) {
  if (predicate(item)) {
   return item;
  }
 }
}

const blackWidow = find(isBlackWidow, heroes);

同樣地，JavaScript 已經(jīng)提供了這樣的方法：

const blackWidow = heroes.find(isBlackWidow);

find 再次體現(xiàn)了四兩撥千斤的特點(diǎn)。通過(guò) find 方法，把問(wèn)題簡(jiǎn)化為：你只要關(guān)注如何判斷你要找的東西就可以了，不必關(guān)心迭代到底怎么實(shí)現(xiàn)等細(xì)節(jié)問(wèn)題。

關(guān)于“JavaScript中map、reduce、filter和find的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。