日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

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

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
解析與盤點數(shù)組array的5類22種方法

 JS是唯一幾乎全面支持函數(shù)式編程的流行語言，而函數(shù)編程的起點是處理數(shù)組。因此，我們首先來盤點 array 數(shù)組的5類22種方法。

創(chuàng)新互聯(lián)是一家以網(wǎng)站設(shè)計建設(shè)，重慶小程序開發(fā)、網(wǎng)站開發(fā)設(shè)計，網(wǎng)絡(luò)軟件產(chǎn)品開發(fā)，企業(yè)互聯(lián)網(wǎng)推廣服務(wù)為主的民營科技公司。主要業(yè)務(wù)涵蓋:為客戶提供網(wǎng)站策劃、網(wǎng)站設(shè)計、網(wǎng)站開發(fā)、域名與空間、網(wǎng)站優(yōu)化排名、買友情鏈接等服務(wù)領(lǐng)域。憑借建站老客戶口碑做市場，建設(shè)網(wǎng)站時，根據(jù)市場搜索規(guī)律和搜索引擎的排名收錄規(guī)律編程，全力為建站客戶設(shè)計制作排名好的網(wǎng)站，深受老客戶認可和贊譽。

一、數(shù)組變形 Transform (函數(shù)范式的純函數(shù))

首先列出對數(shù)組變形操作的沒有side-effects的函數(shù)。

1) reduce 2) map 3) flat 4) flatMap 5) fill 6) forEach。其中 forEach 非 pure-function, 但屬于隱性迭代方法，故而分類在此。

 
 
 
 
    
  
  
  
  
  1. // 1.reduce 
    2. 
  
  
  
  
  2. let total = [ 0, 1, 2, 3 ].reduce( ( acc, cur ) => acc + cur, 
    3. 
  
  
  
  
  3.                                   0); 
    4. 
  
  
  
  
  4. // 2.map  
    5. 
  
  
  
  
  5. const maped = [4, 7, 9, 18].map(x => x * 2); 
    6. 
  
  
  
  
  6.  
    7. 
  
  
  
  
  7. // 3.flat 
    8. 
  
  
  
  
  8. let arr2 = [5, 2, 3].flat(); 
    9. 
  
  
  
  
  9.  
    10. 
  
  
  
  
  10. // 4.flatMap 
    11. 
  
  
  
  
  11. [5, 8, 9, 6].flatMap(x => [[x * 2]]); 
    12. 
  
  
  
  
  12.   
    13. 
  
  
  
  
  13. // 5.fill 非純函數(shù)，但是因為常用于構(gòu)建 range 用于迭代，因此分類到這里 
    14. 
  
  
  
  
  14. Array(5).fill(0) 
    15. 
  
  
  
  
  15.  
    16. 
  
  
  
  
  16. // 6.forEach 非純函數(shù)，作為 map 處理有 side-effect 問題的替代方案。 
    17. 
  
  
  
  
  17. ['x', 'y', 'z'].forEach(el => console.log(el)); 
    18.

 二、數(shù)組邏輯判斷 logic predicates(函數(shù)范式的純函數(shù))

函數(shù)范式的六個methods之后，我們繼續(xù)考察用于邏輯判斷的高階函數(shù):

1) filter 2) find 3) findIndex 4) includes 5) indexOf 6) some 7) every 以及我們可以自己構(gòu)建頗有幫助 range 與 not。

其中 include 是 find 應(yīng)用于一個元素，而 indexOf 則是 findIndex 用于一個元素。

 
 
 
 
    
  
  
  
  
  1. // 1.filter 
    2. 
  
  
  
  
  2. [23, 76, 98, 101].filter( v => v > 30 && v < 100); //[ 76, 98 ] 
    3. 
  
  
  
  
  3.  
    4. 
  
  
  
  
  4. // 2.find 只需要單個元素則用 find 
    5. 
  
  
  
  
  5. [23, 76, 98, 101].find( v => v > 30 && v < 100); // 76  
    6. 
  
  
  
  
  6.  
    7. 
  
  
  
  
  7. // 3.findIndex 查找單個元素的index 
    8. 
  
  
  
  
  8. [23, 76, 98, 101].findIndex( v => v > 30 && v < 100); // 1 
    9. 
  
  
  
  
  9.  
    10. 
  
  
  
  
  10. // 4.includes 是 find 查找特定元素 
    11. 
  
  
  
  
  11. [23, 76, 98, 101].includes(77) // false 
    12. 
  
  
  
  
  12.  
    13. 
  
  
  
  
  13. // 5.indexOf 是 findIndex 查找某個特定元素的 index，返回值為 -1  
    14. 
  
  
  
  
  14. [23, 76, 98, 101].indexOf(77) // -1 
    15. 
  
  
  
  
  15.  
    16. 
  
  
  
  
  16. // 6.some 
    17. 
  
  
  
  
  17. [23, 76, 98, 101].some(v => v > 30 && v < 100) //true 
    18. 
  
  
  
  
  18.  
    19. 
  
  
  
  
  19. // 7.every 
    20. 
  
  
  
  
  20. [23, 76, 98, 101].every(v => v > 30 && v < 100) //false 
    21.

 三、非函數(shù)式的數(shù)組變形(純函數(shù))

以上兩組12個函數(shù)均為函數(shù)范式編程的純函數(shù)。接下來考察，其他對數(shù)組變形的純函數(shù)。(純函數(shù)是指沒有side-effect副作用的函數(shù))：

1) concat 2) join 3) slice 4) splice (非純函數(shù)，將會修改原數(shù)組，放在此處只與slice對比，作為提醒)

 
 
 
 
    
  
  
  
  
  1. // 1.concat  
    2. 
  
  
  
  
  2. ['x', 'y', 'z'].concat([9, 8, 7]); 
    3. 
  
  
  
  
  3.  
    4. 
  
  
  
  
  4. // 2.join 
    5. 
  
  
  
  
  5. ['x', 'y', 'z'].join(","); 
    6. 
  
  
  
  
  6.  
    7. 
  
  
  
  
  7. // 3.slice 
    8. 
  
  
  
  
  8. ['x', 'y', 'z'].slice(1, 3); 
    9. 
  
  
  
  
  9.  
    10. 
  
  
  
  
  10. // 4.splice放到第四組中，此處只為提醒與slice相對比。 
    11.

 四、操作數(shù)據(jù)結(jié)構(gòu) (非純函數(shù))

Array可以作為兩種抽象結(jié)構(gòu)數(shù)據(jù)的載體：分別為 stack 和 queue。

1) push 2) pop 3) shift 4) unshift 5)splice(splice屬于特殊方法，因為更改了原數(shù)組，放在此處)

 
 
 
 
    
  
  
  
  
  1. let arr = [23, 76, 98, 101]; 
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3. // 1. push 元素添加到尾部 
    4. 
  
  
  
  
  4. > arr.push(120) 
    5. 
  
  
  
  
  5. 5 
    6. 
  
  
  
  
  6. > console.log(arr) 
    7. 
  
  
  
  
  7. [ 23, 76, 98, 101, 120 ] 
    8. 
  
  
  
  
  8.  
    9. 
  
  
  
  
  9. // 2.pop 以上 push 與 pop 組合構(gòu)建 stack 數(shù)據(jù)結(jié)構(gòu)。 
    10. 
  
  
  
  
  10. > arr.pop() 
    11. 
  
  
  
  
  11. 120 
    12. 
  
  
  
  
  12. > arr 
    13. 
  
  
  
  
  13. [ 23, 76, 98, 101 ] 
    14. 
  
  
  
  
  14.  
    15. 
  
  
  
  
  15. // 3.shift 從數(shù)組頭部取出元素，與push組合構(gòu)建 queue 數(shù)據(jù)結(jié)構(gòu) 
    16. 
  
  
  
  
  16. > arr.shift() 
    17. 
  
  
  
  
  17. 23 
    18. 
  
  
  
  
  18. > arr 
    19. 
  
  
  
  
  19. [ 76, 98, 101 ] 
    20. 
  
  
  
  
  20.  
    21. 
  
  
  
  
  21. // 4. unshift 從數(shù)組頭部添加元素 
    22. 
  
  
  
  
  22. > arr.unshift(59, 145) 
    23. 
  
  
  
  
  23. 5 
    24. 
  
  
  
  
  24. > arr 
    25. 
  
  
  
  
  25. [ 59, 145, 76, 98, 101 ] 
    26. 
  
  
  
  
  26.  
    27. 
  
  
  
  
  27. // 5.splice 為特殊的方法，用于拼接數(shù)組 
    28. 
  
  
  
  
  28. > arr.splice(1, 2, 55, 66, 77, 88) 
    29. 
  
  
  
  
  29. [ 145, 76 ] 
    30. 
  
  
  
  
  30. > arr 
    31. 
  
  
  
  
  31. [ 59, 55,  66, 77, 88, 98, 101 ] 
    32.

 五、數(shù)組排序 (非純函數(shù))

最后以無處而不在的排序收尾，無論是 sort 還是 reverse 都直接在原數(shù)組上修改，也就是 inplace 操作。

1) sort 2) reverse

 
 
 
 
    
  
  
  
  
  1. // 1. sort  
    2. 
  
  
  
  
  2. [23, 76, 98, 101].sort((x,y) => x - y) 
    3. 
  
  
  
  
  3.  
    4. 
  
  
  
  
  4. // 2.reverse 
    5. 
  
  
  
  
  5. [23, 76, 98, 101].reverse() 
    6.

 六、思維導(dǎo)圖總結(jié)


新聞名稱：解析與盤點數(shù)組array的5類22種方法
本文路徑：http://www.5511xx.com/article/djhihep.html