网站首页 > 技术文章 正文
JS是唯一几乎全面支持函数式编程的流行语言,而函数编程的起点是处理数组。因此,我们首先来盘点 array 数组的5类22种方法。
一、数组变形 Transform (函数范式的纯函数)
首先列出对数组变形操作的没有side-effects的函数。
1) reduce 2) map 3) flat 4) flatMap 5) fill 6) forEach。其中 forEach 非 pure-function, 但属于隐性迭代方法,故而分类在此。
// 1.reduce
let total = [ 0, 1, 2, 3 ].reduce( ( acc, cur ) => acc + cur,
                                  0);
// 2.map 
const maped = [4, 7, 9, 18].map(x => x * 2);
// 3.flat
let arr2 = [5, 2, 3].flat();
// 4.flatMap
[5, 8, 9, 6].flatMap(x => [[x * 2]]);
 
// 5.fill 非纯函数,但是因为常用于构建 range 用于迭代,因此分类到这里
Array(5).fill(0)
// 6.forEach 非纯函数,作为 map 处理有 side-effect 问题的替代方案。
['x', 'y', 'z'].forEach(el => console.log(el));二、数组逻辑判断 logic predicates(函数范式的纯函数)
函数范式的六个methods之后,我们继续考察用于逻辑判断的高阶函数:
1) filter 2) find 3) findIndex 4) includes 5) indexOf 6) some 7) every 以及我们可以自己构建颇有帮助 range 与 not。
其中 include 是 find 应用于一个元素,而 indexOf 则是 findIndex 用于一个元素。
// 1.filter
[23, 76, 98, 101].filter( v => v > 30 && v < 100); //[ 76, 98 ]
// 2.find 只需要单个元素则用 find
[23, 76, 98, 101].find( v => v > 30 && v < 100); // 76 
// 3.findIndex 查找单个元素的index
[23, 76, 98, 101].findIndex( v => v > 30 && v < 100); // 1
// 4.includes 是 find 查找特定元素
[23, 76, 98, 101].includes(77) // false
// 5.indexOf 是 findIndex 查找某个特定元素的 index,返回值为 -1 
[23, 76, 98, 101].indexOf(77) // -1
// 6.some
[23, 76, 98, 101].some(v => v > 30 && v < 100) //true
// 7.every
[23, 76, 98, 101].every(v => v > 30 && v < 100) //false三、非函数式的数组变形(纯函数)
以上两组12个函数均为函数范式编程的纯函数。接下来考察,其他对数组变形的纯函数。(纯函数是指没有side-effect副作用的函数):
1) concat 2) join 3) slice 4) splice (非纯函数,将会修改原数组,放在此处只与slice对比,作为提醒)
// 1.concat 
['x', 'y', 'z'].concat([9, 8, 7]);
// 2.join
['x', 'y', 'z'].join(",");
// 3.slice
['x', 'y', 'z'].slice(1, 3);
// 4.splice放到第四组中,此处只为提醒与slice相对比。四、操作数据结构 (非纯函数)
Array可以作为两种抽象结构数据的载体:分别为 stack 和 queue。
1) push 2) pop 3) shift 4) unshift 5)splice(splice属于特殊方法,因为更改了原数组,放在此处)
let arr = [23, 76, 98, 101];
// 1. push 元素添加到尾部
> arr.push(120)
5
> console.log(arr)
[ 23, 76, 98, 101, 120 ]
// 2.pop 以上 push 与 pop 组合构建 stack 数据结构。
> arr.pop()
120
> arr
[ 23, 76, 98, 101 ]
// 3.shift 从数组头部取出元素,与push组合构建 queue 数据结构
> arr.shift()
23
> arr
[ 76, 98, 101 ]
// 4. unshift 从数组头部添加元素
> arr.unshift(59, 145)
5
> arr
[ 59, 145, 76, 98, 101 ]
// 5.splice 为特殊的方法,用于拼接数组
> arr.splice(1, 2, 55, 66, 77, 88)
[ 145, 76 ]
> arr
[ 59, 55,  66, 77, 88, 98, 101 ]五、数组排序 (非纯函数)
最后以无处而不在的排序收尾,无论是 sort 还是 reverse 都直接在原数组上修改,也就是 inplace 操作。
1) sort 2) reverse
// 1. sort 
[23, 76, 98, 101].sort((x,y) => x - y)
// 2.reverse
[23, 76, 98, 101].reverse()六、思维导图总结
猜你喜欢
- 2025-01-13 【JS 数组分类】多场景实现数组分类
 - 2025-01-13 JavaScript数组之map、filter、reduce使用详解
 - 2025-01-13 JS几种数组遍历方式以及性能分析对比
 - 2025-01-13 JS数组过滤元素的方法
 - 2025-01-13 js中的数组拷贝(浅拷贝,深拷贝)
 - 2025-01-13 js常用数组API方法汇总
 - 2025-01-13 JS怎么实现有序数组合并?
 - 2025-01-13 JavaScript数组剖析
 - 2025-01-13 JavaScript重构技巧—数组,类名和条件
 - 2025-01-13 JavaScript数组的简单排序
 
- 最近发表
 - 
- 聊一下 gRPC 的 C++ 异步编程_grpc 异步流模式
 - [原创首发]安全日志管理中心实战(3)——开源NIDS之suricata部署
 - 超详细手把手搭建在ubuntu系统的FFmpeg环境
 - Nginx运维之路(Docker多段构建新版本并增加第三方模
 - 92.1K小星星,一款开源免费的远程桌面,让你告别付费远程控制!
 - Go 人脸识别教程_piwigo人脸识别
 - 安卓手机安装Termux——搭建移动服务器
 - ubuntu 安装开发环境(c/c++ 15)_ubuntu安装c++编译器
 - Rust开发环境搭建指南:从安装到镜像配置的零坑实践
 - Windows系统安装VirtualBox构造本地Linux开发环境
 
 
- 标签列表
 - 
- cmd/c (90)
 - c++中::是什么意思 (84)
 - 标签用于 (71)
 - 主键只能有一个吗 (77)
 - c#console.writeline不显示 (95)
 - pythoncase语句 (88)
 - es6includes (74)
 - sqlset (76)
 - apt-getinstall-y (100)
 - node_modules怎么生成 (87)
 - chromepost (71)
 - flexdirection (73)
 - c++int转char (80)
 - mysqlany_value (79)
 - static函数和普通函数 (84)
 - el-date-picker开始日期早于结束日期 (76)
 - js判断是否是json字符串 (75)
 - c语言min函数头文件 (77)
 - asynccallback (87)
 - localstorage.removeitem (77)
 - vector线程安全吗 (73)
 - java (73)
 - js数组插入 (83)
 - mac安装java (72)
 - 无效的列索引 (74)
 
 
