日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢(xún)
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案
幫你精通JS：函數(shù)式編程的七件武器之Reduce與Map

 JavaScript是當(dāng)今流行語(yǔ)言中對(duì)函數(shù)式編程支持最好的編程語(yǔ)言。函數(shù)式編程的七個(gè)函數(shù)分別為：

創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括豐南網(wǎng)站建設(shè)、豐南網(wǎng)站制作、豐南網(wǎng)頁(yè)制作以及豐南網(wǎng)絡(luò)營(yíng)銷(xiāo)策劃等。多年來(lái)，我們專(zhuān)注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，豐南網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到豐南省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

 
 
 
 
    
  
  
  
  
  1. - reduce() and reduceRight() to apply an operation to a whole array, reducing it to a single result 
    2.   
  
  
  
  2. - map() to transform one array into another by applying a function to each of its elements 
    3.   
  
  
  
  3. - flat() to make a single array out of an array of arrays 
    4.   
  
  
  
  4. - flatMap() to mix together mapping and flattening 
    5.   
  
  
  
  5. - forEach() to simplify writing loops by abstracting the necessary looping code 
    6.

 以及 search 與 selection 的函數(shù)：

 
 
 
 
    
  
  
  
  
  1. - filter() to pick some elements from an array 
    2.   
  
  
  
  2. - find() and findIndex() to search for elements that satisfy a condition 
    3.   
  
  
  
  3. - A pair of predicates, every() and some(), to check an array for a Boolean test 
    4.

 一、array.reduce() 將數(shù)列降維至一個(gè)值

當(dāng)我們處理array的時(shí)候，總是陷入到無(wú)窮盡的loop循環(huán)之中，掉入進(jìn)瑣碎的陷阱，戕害我們的思維和大腦。

reduce的基本工作原理如下：

求數(shù)列的和

首先從耳熟能詳?shù)那髷?shù)列之和起步。

 
 
 
 
    
  
  
  
  
  1. const myArray = [22, 9, 60, 12, 4, 56]; 
    2.   
  
  
  
  2. const sum = (x, y) => x + y; 
    3.   
  
  
  
  3. const mySum = myArray.reduce(sum, 0); // 163 
    4.

 觀察其運(yùn)行軌跡：

 
 
 
 
    
  
  
  
  
  1. #+begin_src js :results output 
    2.   
  
  
  
  2. const myArray = [22, 9, 60, 12, 4, 56]; 
    3.   
  
  
  
  3. const sumAndLog = (x, y) => { 
    4.   
  
  
  
  4.  console.log(`${x}+${y}=${x + y}`); 
    5.   
  
  
  
  5.   return x + y; 
    6.   
  
  
  
  6. }; 
    7.   
  
  
  
  7. myArray.reduce(sumAndLog, 0); 
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9. #+end_src 
    10.   
  
  
  
  10.  
    11.   
  
  
  
  11. #+RESULTS: 
    12.   
  
  
  
  12. : 0+22=22 
    13.   
  
  
  
  13. : 22+9=31 
    14.   
  
  
  
  14. : 31+60=91 
    15.   
  
  
  
  15. : 91+12=103 
    16.   
  
  
  
  16. : 103+4=107 
    17.   
  
  
  
  17. : 107+56=163 
    18.

 求均值

有了reduce，我們得以用“描述”的方式，以decalratively的方式求得average:

 
 
 
 
    
  
  
  
  
  1. const average = arr => arr.reduce(sum, 0) / arr.length; 
    2.   
  
  
  
  2. console.log(average(myArray)); // 27.166667 
    3.

 求均值的第二種方法，將length寫(xiě)到里面：

 
 
 
 
    
  
  
  
  
  1. const average2 = (sum, val, ind, arr) => { 
    2.   
  
  
  
  2.   sum += val; 
    3.   
  
  
  
  3.   return ind === arr.length - 1 ? sum / arr.length 
    4.   
  
  
  
  4.          : sum; //將這作為思考的原材料 
    5.   
  
  
  
  5. }; 
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7. console.log(myArray.reduce(average2, 0)); // 27.166667s 
    8.

 更近一步，將average作為固有屬性：

 
 
 
 
    
  
  
  
  
  1. Array.prototype.average = function() { 
    2.   
  
  
  
  2.   return this.reduce((x, y) => x + y, 0) / this.length; 
    3.   
  
  
  
  3. }; 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. let myAvg = [22, 9, 60, 12, 4, 56].average(); // 27.166667 
    6.

 單詞計(jì)算多個(gè)值

雖然 reduce 只能返回單個(gè)結(jié)果，但是此返回結(jié)果卻可以包含多個(gè)元素，比如是object。

 
 
 
 
    
  
  
  
  
  1. const average3 = arr => { 
    2.   
  
  
  
  2.   const sumCount = arr.reduce( 
    3.   
  
  
  
  3.     (accum, value) => ({sum: value + accum.sum, count: accum.count + 1}), 
    4.   
  
  
  
  4.     {sum: 0, count: 0} 
    5.   
  
  
  
  5.   ); 
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7.   return sumCount.sum / sumCount.count; 
    8.   
  
  
  
  8. }; 
    9.   
  
  
  
  9.  
    10.   
  
  
  
  10. console.log(average3([7, 11, 19, 23])); 
    11.

 以array的方式改寫(xiě)：

 
 
 
 
    
  
  
  
  
  1. const average4 = arr => { 
    2.   
  
  
  
  2.   const sumCount = arr.reduce( 
    3.   
  
  
  
  3.     (accum, value) => [accum[0] + value, xaccum[1] + 1], 
    4.   
  
  
  
  4.     [0, 0] 
    5.   
  
  
  
  5.   ); 
    6.   
  
  
  
  6.   return sumCount[0] / sumCount[1]; 
    7.   
  
  
  
  7. }; 
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9. console.log(average4(myArray)); // 27.166667 
    10.

 從右往左的折疊

工作原理如下圖：

比如 reverse 字符串的常規(guī)解決方案為：

 
 
 
 
    
  
  
  
  
  1. const reverseString = str => { 
    2.   
  
  
  
  2.   let arr = str.split(""); 
    3.   
  
  
  
  3.   arr.reverse(); 
    4.   
  
  
  
  4.   return arr.join(""); 
    5.   
  
  
  
  5. }; 
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7. console.log(reverseString("MONTEVIDEO"));  // OEDIVETNOM 
    8.

 而reduceRight的解題方案呢，

 
 
 
 
    
  
  
  
  
  1. const reverseString2 = str => 
    2.   
  
  
  
  2.   str.split("").reduceRight((x, y) => x + y, ""); 
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4. console.log(reverseString2("OEDIVETNOM"));  // MONTEVID 
    5.

 二、array.map 從數(shù)學(xué)到編程

map首先是數(shù)學(xué)上的概念。

從object中提取數(shù)據(jù)

 
 
 
 
    
  
  
  
  
  1. const markers = [ 
    2.   
  
  
  
  2.   {name: "AR", lat: -34.6, lon: -58.4}, 
    3.   
  
  
  
  3.   {name: "BO", lat: -16.5, lon: -68.1}, 
    4.   
  
  
  
  4.   {name: "BR", lat: -15.8, lon: -47.9}, 
    5.   
  
  
  
  5.   {name: "CL", lat: -33.4, lon: -70.7}, 
    6.   
  
  
  
  6.   {name: "CO", lat:   4.6, lon: -74.0}, 
    7.   
  
  
  
  7.   {name: "EC", lat:  -0.3, lon: -78.6}, 
    8.   
  
  
  
  8.   {name: "PE", lat: -12.0, lon: -77.0}, 
    9.   
  
  
  
  9.   {name: "PY", lat: -25.2, lon: -57.5}, 
    10.   
  
  
  
  10.   {name: "UY", lat: -34.9, lon: -56.2}, 
    11.   
  
  
  
  11.   {name: "VE", lat:  10.5, lon: -66.9}, 
    12.   
  
  
  
  12. ]; 
    13.   
  
  
  
  13.  
    14.   
  
  
  
  14. let averageLat = average(markers.map(x => x.lat)); // -15.76 
    15.   
  
  
  
  15. let averageLon = average(markers.map(x => x.lon)); // -65.53 
    16.   
  
  
  
  16. // extended array.prototype 
    17.   
  
  
  
  17. let averageLat2 = markers.map(x => x.lat).average(); 
    18.   
  
  
  
  18. let averageLon2 = markers.map(x => x.lon).average(); 
    19.

 悄無(wú)聲息的處理數(shù)據(jù)

看一個(gè)我們想當(dāng)然的應(yīng)用：

 
 
 
 
    
  
  
  
  
  1. ["123.45", "67.8", "90"].map(parseFloat); 
    2.   
  
  
  
  2. // [123.45, 67.8, 90] 
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4. ["123.45", "-67.8", "90"].map(parseInt); 
    5.   
  
  
  
  5. // [123, NaN, NaN] 
    6.

 這是因?yàn)?parseInt 有一個(gè) optional 的參數(shù) radix。

數(shù)列的表示方法

現(xiàn)在我們來(lái)創(chuàng)建一個(gè) range.

 
 
 
 
    
  
  
  
  
  1. const range = (start, stop) => 
    2.   
  
  
  
  2.   new Array(stop - start).fill(0).map((v, i) => start + i); 
    3.   
  
  
  
  3. // 必須寫(xiě)一個(gè)v，也必須寫(xiě) new 
    4.   
  
  
  
  4. let from2To6 = range(2, 7); // [2, 3, 4, 5, 6] 
    5.

 嘗試求乘方：

 
 
 
 
    
  
  
  
  
  1. const range = (start, stop) => 
    2.   
  
  
  
  2.   new Array(stop - start).fill(0).map((v, i) => start + i); 
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4. const factorialByRange = n => range(1, n + 1).reduce((x, y) => x * y, 1); 
    5.   
  
  
  
  5.  
    6.   
  
  
  
  6. factorialByRange(5); // 120 
    7.   
  
  
  
  7. factorialByRange(3); 
    8.

 嘗試字母表：

 
 
 
 
    
  
  
  
  
  1. const ALPHABET = range("A".charCodeAt(), "Z".charCodeAt() + 1).map(x => 
    2.   
  
  
  
  2.   String.fromCharCode(x) 
    3.   
  
  
  
  3. ); 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. // ["A", "B", "C", ... "X", "Y", "Z"] 
    6.

 用 reduce 構(gòu)造 map

reduce是所有其他函數(shù)的起點(diǎn)，

 
 
 
 
    
  
  
  
  
  1. const myMap = (arr, fn) => arr.reduce((x, y) => x.concat(fn(y)), []); 
    2.

嘗試兩種不同的解決方案：

 
 
 
 
    
  
  
  
  
  1. const myArray = [22, 9, 60, 12, 4, 56]; 
    2.   
  
  
  
  2. const dup = x => 2 * x; 
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4. console.log(myArray.map(dup));    // [44, 18, 120, 24, 8, 112] 
    5.   
  
  
  
  5. console.log(myMap(myArray, dup)); // [44, 18, 120, 24, 8, 112] 
    6.   
  
  
  
  6. console.log(myArray);             // [22, 9, 60, 12, 4, 56] 
    7.

 【編輯推薦】

  1. Windows10這功能已如同殘廢！教你如何徹底關(guān)閉它
  2. C++和C++程序員誰(shuí)先完蛋？
  3. 2021年值得關(guān)注的人工智能趨勢(shì)
  4. RAID磁盤(pán)陣列到底適不適合你？一文讀懂
  5. Windows 10是絕唱！微軟新系統(tǒng)開(kāi)始換版本號(hào)了

分享文章：幫你精通JS：函數(shù)式編程的七件武器之Reduce與Map
網(wǎng)站路徑：http://www.dlmjj.cn/article/dpjdgec.html