百度360必应搜狗淘宝本站头条
当前位置:网站首页 > IT技术 > 正文

帮你精通JS:解析与盘点数组array的5类22种方法

wptr33 2025-03-14 21:29 21 浏览

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 > 30 && v < 100 76 3.findindex index 23 76 98 101.findindex> v > 30 && v < 100 1 4.includes find 23 76 98 101.includes77 false 5.indexof findindex index -1 23 76 98 101.indexof77 -1 6.some 23 76 98> v > 30 && v < 100 true 7.every 23 76 98> 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()


六、思维导图总结

相关推荐

redis的八种使用场景

前言:redis是我们工作开发中,经常要打交道的,下面对redis的使用场景做总结介绍也是对redis举报的功能做梳理。缓存Redis最常见的用途是作为缓存,用于加速应用程序的响应速度。...

基于Redis的3种分布式ID生成策略

在分布式系统设计中,全局唯一ID是一个基础而关键的组件。随着业务规模扩大和系统架构向微服务演进,传统的单机自增ID已无法满足需求。高并发、高可用的分布式ID生成方案成为构建可靠分布式系统的必要条件。R...

基于OpenWrt系统路由器的模式切换与网页设计

摘要:目前商用WiFi路由器已应用到多个领域,商家通过给用户提供一个稳定免费WiFi热点达到吸引客户、提升服务的目标。传统路由器自带的Luci界面提供了工厂模式的Web界面,用户可通过该界面配置路...

这篇文章教你看明白 nginx-ingress 控制器

主机nginx一般nginx做主机反向代理(网关)有以下配置...

如何用redis实现注册中心

一句话总结使用Redis实现注册中心:服务注册...

爱可可老师24小时热门分享(2020.5.10)

No1.看自己以前写的代码是种什么体验?No2.DooM-chip!国外网友SylvainLefebvre自制的无CPU、无操作码、无指令计数器...No3.我认为CS学位可以更好,如...

Apportable:拯救程序员,IOS一秒变安卓

摘要:还在为了跨平台使用cocos2d-x吗,拯救objc程序员的奇葩来了,ApportableSDK:FreeAndroidsupportforcocos2d-iPhone。App...

JAVA实现超买超卖方案汇总,那个最适合你,一篇文章彻底讲透

以下是几种Java实现超买超卖问题的核心解决方案及代码示例,针对高并发场景下的库存扣减问题:方案一:Redis原子操作+Lua脚本(推荐)//使用Redis+Lua保证原子性publicbo...

3月26日更新 快速施法自动施法可独立设置

2016年3月26日DOTA2有一个79.6MB的更新主要是针对自动施法和快速施法的调整本来内容不多不少朋友都有自动施法和快速施法的困扰英文更新日志一些视觉BUG修复就不翻译了主要翻译自动施...

Redis 是如何提供服务的

在刚刚接触Redis的时候,最想要知道的是一个’setnameJhon’命令到达Redis服务器的时候,它是如何返回’OK’的?里面命令处理的流程如何,具体细节怎么样?你一定有问过自己...

lua _G、_VERSION使用

到这里我们已经把lua基础库中的函数介绍完了,除了函数外基础库中还有两个常量,一个是_G,另一个是_VERSION。_G是基础库本身,指向自己,这个变量很有意思,可以无限引用自己,最后得到的还是自己,...

China&#39;s top diplomat to chair third China-Pacific Island countries foreign ministers&#39; meeting

BEIJING,May21(Xinhua)--ChineseForeignMinisterWangYi,alsoamemberofthePoliticalBureau...

移动工作交流工具Lua推出Insights数据分析产品

Lua是一个适用于各种职业人士的移动交流平台,它在今天推出了一项叫做Insights的全新功能。Insights是一个数据平台,客户可以在上面实时看到员工之间的交流情况,并分析这些情况对公司发展的影响...

Redis 7新武器:用Redis Stack实现向量搜索的极限压测

当传统关系型数据库还在为向量相似度搜索的性能挣扎时,Redis7的RedisStack...

Nginx/OpenResty详解,Nginx Lua编程,重定向与内部子请求

重定向与内部子请求Nginx的rewrite指令不仅可以在Nginx内部的server、location之间进行跳转,还可以进行外部链接的重定向。通过ngx_lua模块的Lua函数除了能实现Nginx...