解析与盘点数组array的5类22种方法

 JS是唯一几乎全面支持函数式编程的流行语言，而函数编程的起点是处理数组。因此，我们首先来盘点 array 数组的5类22种方法。

创新互联是一家以网站设计建设，重庆小程序开发、网站开发设计，网络软件产品开发，企业互联网推广服务为主的民营科技公司。主要业务涵盖:为客户提供网站策划、网站设计、网站开发、域名与空间、网站优化排名、买友情链接等服务领域。凭借建站老客户口碑做市场，建设网站时，根据市场搜索规律和搜索引擎的排名收录规律编程，全力为建站客户设计制作排名好的网站，深受老客户认可和赞誉。

一、数组变形 Transform (函数范式的纯函数)

首先列出对数组变形操作的没有side-effects的函数。

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 非纯函数，但是因为常用于构建 range 用于迭代，因此分类到这里 
    14. 
  
  
  
  
  14. Array(5).fill(0) 
    15. 
  
  
  
  
  15.  
    16. 
  
  
  
  
  16. // 6.forEach 非纯函数，作为 map 处理有 side-effect 问题的替代方案。 
    17. 
  
  
  
  
  17. ['x', 'y', 'z'].forEach(el => console.log(el)); 
    18.

 二、数组逻辑判断 logic predicates(函数范式的纯函数)

函数范式的六个methods之后，我们继续考察用于逻辑判断的高阶函数:

1) filter 2) find 3) findIndex 4) includes 5) indexOf 6) some 7) every 以及我们可以自己构建颇有帮助 range 与 not。

其中 include 是 find 应用于一个元素，而 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.

 三、非函数式的数组变形(纯函数)

以上两组12个函数均为函数范式编程的纯函数。接下来考察，其他对数组变形的纯函数。(纯函数是指没有side-effect副作用的函数)：

1) concat 2) join 3) slice 4) splice (非纯函数，将会修改原数组，放在此处只与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.

 四、操作数据结构 (非纯函数)

Array可以作为两种抽象结构数据的载体：分别为 stack 和 queue。

1) push 2) pop 3) shift 4) unshift 5)splice(splice属于特殊方法，因为更改了原数组，放在此处)

 
 
 
 
    
  
  
  
  
  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 组合构建 stack 数据结构。 
    10. 
  
  
  
  
  10. > arr.pop() 
    11. 
  
  
  
  
  11. 120 
    12. 
  
  
  
  
  12. > arr 
    13. 
  
  
  
  
  13. [ 23, 76, 98, 101 ] 
    14. 
  
  
  
  
  14.  
    15. 
  
  
  
  
  15. // 3.shift 从数组头部取出元素，与push组合构建 queue 数据结构 
    16. 
  
  
  
  
  16. > arr.shift() 
    17. 
  
  
  
  
  17. 23 
    18. 
  
  
  
  
  18. > arr 
    19. 
  
  
  
  
  19. [ 76, 98, 101 ] 
    20. 
  
  
  
  
  20.  
    21. 
  
  
  
  
  21. // 4. unshift 从数组头部添加元素 
    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 为特殊的方法，用于拼接数组 
    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.

 五、数组排序 (非纯函数)

最后以无处而不在的排序收尾，无论是 sort 还是 reverse 都直接在原数组上修改，也就是 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.

 六、思维导图总结

本文名称：解析与盘点数组array的5类22种方法
网页网址：http://www.shufengxianlan.com/qtweb/news8/148408.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

App开发知识

分类信息网站

中晴建设　　 　做网站价格　　 　成都光华电信机房　　 　广西弘博建站　　 　网站营销　　 　成都网站制作　　 　资阳网站建设　　 　网上商城管理系统　　 　兴发搬家　　 　抖音短视频拍摄　　 　蓬安网站建设　　 　企业微信定制　　 　云主机　　 　成都全网营销　　 　3D立体画　　 　网站运营　　 　广安搬家公司　　 　重庆主机托管　　 　什邡做网站　　 　成都手机网站开发