學(xué)習(xí)如何使用最強(qiáng)大的 JavaScript 函數(shù)

?今天你將學(xué)習(xí)如何使用**最強(qiáng)大的**JavaScript函數(shù)。數(shù)組歸約“Array.reduce是最強(qiáng)大的

JavaScriptFunction.

時期。

”reduce有什么作用？為何如此強(qiáng)大？這是reduce的技術(shù)定義......Atotype.reduce()reduce()方法對數(shù)組的每個元素執(zhí)行（您提供的）reducer函數(shù)，從而產(chǎn)生單個輸出值。如果你問我的話，這沒什么幫助，所以讓我們邊做邊學(xué)1.求所有數(shù)字的總和（使用reduce）[3,2.1,5,8].reduce((total,number)=>total+number,0)//loop1:0+3//loop2:3+2.1//loop3:5.1+5//loop4:10.1+8//returns18.12.求所有相乘數(shù)的總和[3,2.1,5,8].reduce((total,number)=>total*number,1)如圖所示，將數(shù)組中的所有數(shù)字相加或相乘非常容易。但是，

-我說過，reduce是所有JS中最強(qiáng)大的函數(shù)。假設(shè)我們有3、4、10和60。假設(shè)我們想要獲得一些值?；蛘撸唧w地說，我們想要filter這些值，并且只返回小于10的值。通常，我們可以簡單地使用該filter函數(shù)，只返回小于10的數(shù)字。3.使用reduce進(jìn)行Array.Filter[3,4,10,60].filter(number=>number<10)好吧，使用reduce——我們可以做同樣的事情。[3,4,10,60].reduce((list,number)=>

number<10

?[...list,number]

:list,[])拉拉，我們用reduce替換了過濾器-很酷，但說實話。這仍然不能證明reduce它是所有JavaScript中最強(qiáng)大的功能。如果我告訴你，我們可以繼續(xù)沿著這條路走，并使用reduce替換JavaScript中的幾乎所有數(shù)組函數(shù)，會怎么樣？4.

重新創(chuàng)建Array.some使用Array.reduce[3,4,10,50].some(number=>number<50)//returnstrue(Wehavesomenumbersinthearrayarelessthan50)使用reduce，我們只需將初始值設(shè)置為false。如果條件已經(jīng)為真，那么我們返回該條件。如果條件尚不成立，那么我們檢查當(dāng)前數(shù)字是否滿足我們的條件。[3,4,10,50].reduce((condition,number)=>

condition===true

?condition

:number<50,false)請注意，這次我們以bool(false)作為初始值，而不是使用數(shù)字或數(shù)組。我們現(xiàn)在已經(jīng)求和、相乘、過濾并重新創(chuàng)建了一些（也稱為使用reduce有條件地檢查數(shù)組上的某些內(nèi)容）。我們還可以繼續(xù)Array.every使用using替換該函數(shù)，但由于這與替換usingArray.reduce類似，因此我們也可以輕松地做到這一點。Array.someArray.reduce5.Array.join4.使用

怎么樣Array.reduce？替換Array.join為Array.reduce['truck','car','people'].join('-')//"truck-car-people"使用Array.reduce我們可以編寫以下代碼['truck','car','people'].reduce((text,word)=>`${text}-${word}`,'')//"-truck-car-people"請注意，輸出的前面有一個破折號。作為函數(shù)的第一個參數(shù)接受的回調(diào)函數(shù)Array.reduce接受更多參數(shù)。我們可以使用第三個接受的參數(shù)來跟蹤我們index的reduce函數(shù)['truck','car','people'].reduce((text,word,index)=>

index===0

?word

:`${text}-${word}`,'')//"truck-car-people"設(shè)置第三個參數(shù)后，這個reduce函數(shù)現(xiàn)在將按照原始Array.join函數(shù)的方式運行至此，我們已經(jīng)使用reduce進(jìn)行替換了。Array.map數(shù)組過濾器數(shù)組.every，數(shù)組.some數(shù)組連接6.使用Reduce進(jìn)行Array.concat那么連接呢？在哪里可以將“1”、“2”和“3”的數(shù)組與另一個數(shù)組連接起來？[1,2,3].concat(['hey','world','mars'])//[1,2,3,'hey','world','mars']您將如何連接或組合數(shù)組reduce？[[1,2,3],['hey','world','mars']].reduce(

(list,array)=>[...list,...array],[])//[1,2,3,'hey,'world','mars']使用組合數(shù)組的好處Array.reduce是我們可以“連接”任意數(shù)量的數(shù)組。簡單地說，通過傳入更多數(shù)組，我們將使用reduce自動組合（也稱為連接）它們。這樣，我們就復(fù)制了Array.concat使用Array.reduce讓我們再看幾個例子。首先，讓我們創(chuàng)建一些人。letsarah={name:'sarah',email:'sarah@',id:1}lettim={name:'tim',email:'tim@',id:2}letlen={name:'len',email:'len@',id:3}7.使用按姓名對人員進(jìn)行分組Array.reduce當(dāng)我們按名字對人進(jìn)行分組時我們想要的示例people.len//GetsLen//{name:'len',email:'len@',id:3}people.sarah//Getssarah//{name:'sarah',email:'sarah@',id:1}使用reduce按姓名對人員進(jìn)行分組將reduce函數(shù)的初始值設(shè)置為一個對象構(gòu)建一個對象，其中關(guān)鍵是人的名字（[]）該值為person對象（[]:person）示例（這不起作用）letpeople=[sarah,tim,len].reduce((people,person)=>{

[]:person,

...people},{})在上面的例子中我們會得到一個錯誤未捕獲的語法錯誤：意外的標(biāo)記“：”每當(dāng)我們使用簡寫函數(shù)返回一個對象時，我們需要將其括在括號中將返回對象的方括號括在圓括號中以修復(fù)錯誤letpeople=[sarah,tim,len].reduce((people,person)=>({

[]:person,

...people}),{})啦啦，我們現(xiàn)在有一個人員對象，其中人員按姓名分組如果我們?nèi)?，people.len我們會得到lenpeople.len//{name:'len',email:'len@',id:3}如果我們?nèi)サ脑抪eople.sarah我們會得到莎拉people.sarah//{name:'sarah',email:'sarah@',id:1}如果我們?nèi)サ脑抪eople.tim我們會得到蒂姆people.tim//{name:'tim',email:'tim@',id:2}如果我們想要我們所有的people？//people{

sarah:{name:'sarah',email:'sarah@',id:1},

tim:{name:'tim',email:'tim@',id:2},

len:{name:'len',email:'len@',id:3},}8.使用Reduce按給定鍵提取值數(shù)組更重要的是，如果我們只想獲取人員的姓名怎么辦？letnames=[sarah,tim,len].reduce((names,person)=>[

...names,

],[])//['sarah','tim','len']如果我們只想獲取人們的電子郵件怎么辦？letemails=[sarah,tim,len].reduce((emails,person)=>[

...emails,

person.email],[])//['sarah@','tim@','len@']9.使用Reduce展平多層嵌套數(shù)組更重要的是，如果我們有一個嵌套數(shù)組的數(shù)組怎么辦？letlist_of_arrays=[

['sub_one','sub_two','sub_three'],

[

['nested_sub_one','nested_sub_two'],

['nested_sub_three','nested_sub_four']

],

'one',

'two',

'three']讓我們使用數(shù)組列表，當(dāng)然還可以使用reducelist_of_arrays.reduce((flattened,item)=>{

if(Array.isArray(item)===false){

return[...flattened,item]

}

if(Array.isArray(item)&&Array.isArray(item[0])){

return[

...flattened,

....item.reduced((flatten,nested_list)=>[...flatten,...nested_list,[])

]

]

}

return[...flattened,...item]},[])啦啦，我們已經(jīng)扁平化了多層嵌套數(shù)組的列表。輸出["sub_one","sub_two","sub_three","nested_sub_one","nested_sub_two","nested_sub_three","nested_sub_four","one","two","three"]筆記：我們只處理最多3層深度的嵌套子數(shù)組，但是您當(dāng)然可以在該函數(shù)上花費更多時間，并使用遞歸來非常簡單地使用reduce來展平無限嵌套層深的數(shù)組。更強(qiáng)大的Reduce用例好吧，現(xiàn)在讓我們深入研究一些更強(qiáng)大但不常用的用例Array.reduce。10.在字符串上應(yīng)用格式化程序我將從一系列字符串開始。letstrings=['cool-link','helloworldofjavascript','goodbye,itsbeenswell']接下來讓我們創(chuàng)建一個formatters.

通常，我將這些稱為過濾器-但它們并不是真正的過濾器。他們只是格式化字符串。這些格式化程序?qū)嶋H上是回調(diào)函數(shù)。首先，我們將創(chuàng)建一個破折號到空格格式化程序（用空格替換破折號）。將使用正則表達(dá)式來實現(xiàn)此格式化程序。letdashesToSpaces=str=>str.replace(/-/g,'')接下來，我們將創(chuàng)建一個大寫字符串格式化程序。letcapitalize=str=>`${str[0].toUpperCase()}${str.slice(1)}`然后，我們將創(chuàng)建一個字符串限制器格式化程序。如果字符串大于給定長度，則用三個點替換該長度限制之后的字符。letlimiter=str=>str.length>10?`${str.slice(0,10)}...`:strformatters最后，我們將使用所有字符串格式化程序創(chuàng)建一個數(shù)組。letformatters=[dashesToSpaces,capitalize,limiter]請記住，我們有字符串?dāng)?shù)組。letstrings=['cool-link','helloworldofjavascript','goodbye,itsbeenswell']我們的目標(biāo)：我們的目標(biāo)是將格式化程序數(shù)組中的每個格式化程序應(yīng)用到字符串?dāng)?shù)組中的每個字符串上。使用reduce，我們可以簡單地這樣做！strings.reduce((list,str)=>[

formatters.reduce((string,format)=>format(string),str),

...list

],[])_就像這樣，我們使用reduce在字符串?dāng)?shù)組上應(yīng)用格式化程序數(shù)組。_原始字符串?dāng)?shù)組['cool-link','helloworldofjavascript','goodbye,itsbeenswell']輸出（使用reduce應(yīng)用字符串格式化程序后）["Goodbye,i...","Helloworl...","Coollink"]11.按房間對學(xué)生進(jìn)行分組（使用reduce）首先我們創(chuàng)建一些學(xué)生letstudents=[

{name:'Sally',room:'A'},

{name:'tim',room:'A'},

{name:'nick',room:'B'},

{name:'rick',room:'C'},

{name:'sarah',room:'B'},

{name:'pam',room:'C'}]我們想按學(xué)生的房間對他們進(jìn)行分組所以我們要做的就是使用students.reduce.students.reduce((class_rooms,student)=>({}),{})請注意，我們在再次隱式返回的對象周圍使用了括號。當(dāng)我們使用簡寫函數(shù)返回一個對象時，我們必須使用({})語法-如果我們嘗試直接返回一個對象而不進(jìn)行包裝，()我們將收到錯誤。接下來，我們要使用學(xué)生房間作為鑰匙：students.reduce((rooms,student)=>({

...rooms,

[student.room]:rooms[student.room]

?[...rooms[student.room],student]

:[student]}),{})現(xiàn)在，我們的學(xué)生按房間/班級分組。{

A:[{name:'sally',room:'A'},{name:'tim',room:'A'}],

B:[{name:'nick',room:'B'},{name:'sarah',room:'B'}],

C:[{name:'rick',room:'C'},{name:'pam',room:'C'}],}我們已經(jīng)成功地按學(xué)生的房間對學(xué)生進(jìn)行了分組-這就是我們按歸約進(jìn)行分組的方式。這就是我對reduce的了解。我想最大的收獲是，reduce是一種超級方法-確實是如此！使用reduce可以做任何其他數(shù)組方法可以做的事情。Array.filter.map.filter.forEach您可以使用單個reduce函數(shù)來完成相同的目標(biāo)。如果您需要按鍵對一大堆對象進(jìn)行分組，請使用reduce。如果您需要提取與給定鍵相關(guān)的值？使用reduce。如果您需要應(yīng)用多個過濾器，但又不想通過多次迭代同一數(shù)組來提高時間復(fù)雜度-請使用reduce。如果您想展平嵌套數(shù)組的數(shù)組，其中每個嵌套數(shù)組可能有更多嵌套數(shù)組，而每個嵌套數(shù)組也可能沒有任何嵌套數(shù)組？使用reduce。如果你需要對一些數(shù)字進(jìn)行求和、乘以一些數(shù)字、減去總和或進(jìn)行任何類型的算術(shù)——reduce會再次起作用。如果需要組合一些數(shù)組怎么辦？使用reduce。如果您需要組合一些對象怎么辦？使用reduce。如果您想擁有一種方法，您知道它可以完成所有工作，并且讓您感覺作為軟件工程師更加強(qiáng)大和高效，該怎么辦？使用reduce！在我看來，forEach是JavaScript生態(tài)系統(tǒng)中最被高估的方法，reduce是JS生態(tài)系統(tǒng)中最被低估的方法。作為最后一個例子，讓我們以這個最后的例子來說明reduce有多牛。[{name:'CleanCodeStudio'},{belief:'Simplify!'},{should_follow:'Si,senor!'}].reduce((last