前端数组方法汇总集锦

前言
数组主要使用场景有:
存储和处理数据:数组是一种有序的数据结构,可以用来存储和处理多个相关的数据。在前端开发中,我们经常使用数组来存储和处理列表、表格、选项等数据。
循环和遍历:数组提供了循环和遍历的功能,可以方便地对数组中的每个元素进行操作。在前端开发中,我们经常使用循环和遍历来处理列表、表格、选项等数据。
数据过滤和转换:数组提供了一些方法可以对数组进行过滤和转换。例如,我们可以使用filter()方法来过滤数组中的元素,使用map()方法来对数组中的每个元素进行转换。
数据排序和查找:数组提供了一些方法可以对数组进行排序和查找。例如,我们可以使用sort()方法来对数组进行排序,使用indexOf()方法来查找数组中的元素。

一、常见的数组方法

1.1 push

将指定的元素添加到数组的末尾,并返回新的数组长度

const arr = ['春', '夏', '秋']console.log('arr', arr.push('冬'), arr)

 1.2 pop

从数组中删除最后一个元素,并返回该元素的值

const arr = ['春', '夏', '秋']console.log('arr新的长度', arr.push('冬'), 'arr', arr)console.log('pop返回', arr.pop(), 'arr', arr)

1.3 shift

从数组中删除第一个元素,并返回该元素的值

const arr = ['春', '夏', '秋']console.log('arr新的长度', arr.push('冬'), 'arr', arr)console.log('pop返回', arr.pop(), 'arr', arr)console.log('shift方法', arr.shift(), 'arr', arr)

 1.4 unshift

向数组首位添加一个或多个元素,并返回新的数组长度

const arr = ['春', '夏', '秋']console.log('arr新的长度', arr.push('冬'), 'arr', arr)console.log('pop返回', arr.pop(), 'arr', arr)console.log('shift方法', arr.shift(), 'arr', arr)console.log('unshift', arr.unshift('春'), 'arr', arr)console.log('unshift', arr.unshift('四季', '天气'), 'arr', arr)

 1.5 concat

合并多个数组或值,返回一个新的数组

console.log('concat会返回新的值不改变原数据', arr.concat('数据拼接'), 'arr', arr)

 1.6 slice

截取数组的一部分,返回一个新的数组

const arr1 = ['0', '1', '2', '3', '4']const arr2 = ['0', '1', '2', '3', '4']console.log('slice的使用', arr1.slice(2), '截一个而且只截下标为4', arr2.slice((1, 4)))

1.7 splice

删除、替换或添加数组的元素,并返回被删除的元素

const name = ['前', '端', '百', '草', '阁']name.splice(2, 0, '你好') // 从第三个元素开始删,删0个,并且在第三个元素前加上 '你好'console.log('name', name)

1.8 fliter

过滤数组中的元素,返回一个新的数组)

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present']const result = words.filter(word => word.length > 6) // 循环筛选出 长度大于6的 并返回一个新的数组console.log(result) //  ["exuberant", "destruction", "present"]

1.9 map

对数组中的每个元素进行操作,返回一个新的数组

const array1 = [1, 4, 9, 16]const map1 = array1.map(item => item * 2) // 循环进行一个每一项都乘以2的操作 并返回一个 新数组console.log(map1) // [2, 8, 18, 32]

 1.10 sort

对数组进行排序

const arr3 = [1000,10,1,4,3,2,77]const arr4 = [1000,10,1,4,3,2,77]arr3.sort((x,y) => x - y) // 正序console.log(arr3) //  [1, 2, 3, 4, 10, 77, 1000]arr4.sort((x,y) => y - x) // 倒序console.log(arr4) // [1000, 77, 10, 4, 3, 2, 1]

 1.11 reverse

翻转数组中的元素

const arr5 = [1, 2, 3, 4, 5]arr5.reverse()console.log(arr5) //  [5, 4, 3, 2, 1]

 1.12 indexOf

查找数组中指定元素的索引

const arr6 = [1, 2, 3, 4, 5, 3]const num = arr6.indexOf(3) // 查找 3 出现的索引 只能查找到首次出现的索引console.log(num) // 2const num1 = arr6.indexOf(6) // 查找 6 出现的索引 找不到为-1console.log(num1) // -1

 1.13 find

查找数组中符合条件的第一个元素

const array2 = [5, 12, 8, 130, 44]const found = array2.find(item => item > 10) // 找到第一个大于10的元素console.log(found) // 12

 1.14 findIndex

查找数组中符合条件的第一个元素的索引

const array3 = [5, 12, 8, 130, 44]console.log('findIndex', array3.findIndex(i => i > 10))

 1.15 includes

判断一个数组是否包含一个指定的值

const array4 = [1, 2, 3, 4, 5]console.log('includes', array4.includes(4))

 1.16 every

判断数组内的所有元素是否都能通过指定函数的测试

const array5 = [1, 30, 39, 29, 10, 13];const res = array5.every(item => item > 0) // 判断数组中每一个元素是否都大于0console.log(res); // trueconst res2 = array5.every(item => item > 30) // 判断数组中每一个元素是否都大于30console.log(res2); 

 1.17 some

判断数组中是否至少有一个元素通过了指定函数的测试

const array5 = [1, 30, 39, 29, 10, 13];const res = array5.some(item => item > 0) // 判断数组中每一个元素是否都大于0console.log(res); // trueconst res2 = array5.some(item => item > 100) // 判断数组中每一个元素是否都大于30console.log(res2); // false

1.18 join

将一个数组的所有元素连接成一个字符串并返回这个字符串

const elements = ['Fire', 'Air', 'Water'];const res6 = elements.join() // 将数组中每一个元素用逗号连接console.log(res6); // Fire,Air,Waterconst res4 = elements.join('-') // 将数组中每一个元素用-连接console.log(res4); // Fire-Air-Waterconst res5 = elements.join('') // 将数组中每一个元素用''连接console.log(res5); // FireAirWater

 1.19 reduce

计算数组所有元素的总和

const array10 = [1, 2, 3, 4];const initialValue = 0;// 0+1+2+3+4const sumWithInitial = array10.reduce((accumulator, currentValue) => accumulator + currentValue,initialValue);// initialValue 是初始值console.log(sumWithInitial); // 10

 1.20 forEach

数组循环遍历

const array11 = ['春', '夏', '秋', '冬'];array11.forEach(element => console.log(element));

1.21 fill 

此方法通过用静态值填充数组来更改原始数组。你可以将所有元素更改为静态或少数选定元素。

const arr = ['1', '2', '3', '4']console.log('fill的使用', arr.fill('0', 1, 3)) // ['1', '0', '0', '4']const arr1 = ['1', '2', '3', '4']console.log('fill的使用', arr1.fill('0')) // ['0', '0', '0', '0']

二、 将平铺的数组结构转换为tree型数组结构

这里先给出平铺的数组结构,其中pid是他的父亲,id是他自己

[{"id": "604e21feb205b95968e13129","pid": "","name": "总裁办","code": "1001","manager": "管理员","introduce": "公司战略部","createTime": "2021-03-14 22:47:25"},{"id": "604e222bb205b95968e1312a","pid": "","name": "行政部","code": "XZB","manager": "管理员","introduce": "行政部","createTime": "2021-03-14 22:47:25"},{"id": "604e223fb205b95968e1312b","pid": "","name": "人事部","code": "RSB","manager": "管理员","introduce": "人事部","createTime": "2021-03-14 22:47:25"},{"id": "604e2251b205b95968e1312c","pid": "","name": "财务部","code": "CWB","manager": "管理员","introduce": "财务部","createTime": "2021-03-14 22:47:25"},{"id": "604e2262b205b95968e1312d","pid": "604e2251b205b95968e1312c","name": "财务核算部","code": "CWHSB","manager": "管理员","introduce": "财务核算部","createTime": "2021-03-14 22:47:25"},{"id": "604e227db205b95968e1312e","pid": "604e2251b205b95968e1312c","name": "税务管理部","code": "SWGLN","manager": "管理员","introduce": "税务管理部","createTime": "2021-03-14 22:47:25"},{"id": "604e2297b205b95968e1312f","pid": "604e2251b205b95968e1312c","name": "薪资管理部","code": "XZGLB","manager": "管理员","introduce": "薪资管理部","createTime": "2021-03-14 22:47:25"},{"id": "6051ad90e93db6522c1d00d2","pid": "","name": "技术部","code": "JSB","manager": "孙财","introduce": "技术部","createTime": "2021-03-17 15:18:23"},{"id": "6051adb6e93db6522c1d00d3","pid": "6051ad90e93db6522c1d00d2","name": "Java研发部","code": "JYFB","manager": "管理员","introduce": "JAVA研发部","createTime": "2021-03-17 15:18:23"},{"id": "6051add6e93db6522c1d00d4","pid": "6051ad90e93db6522c1d00d2","name": "Python研发部","code": "PYFB","manager": "罗晓晓","introduce": "Python研发部","createTime": "2021-03-17 15:18:23"},{"id": "6051adefe93db6522c1d00d5","pid": "6051ad90e93db6522c1d00d2","name": "Php研发部","code": "PhpYFB","manager": "孙财","introduce": "Php研发部","createTime": "2021-03-17 15:18:23"},{"id": "6051ae03e93db6522c1d00d6","pid": "","name": "运营部","code": "YYB","manager": "孙财","introduce": "运营部","createTime": "2021-03-17 15:18:23"},{"id": "6051ae15e93db6522c1d00d7","pid": "","name": "市场部","code": "SCB","manager": "孙财","introduce": "市场部","createTime": "2021-03-17 15:18:23"},{"id": "6051ae28e93db6522c1d00d8","pid": "6051ae15e93db6522c1d00d7","name": "北京事业部","code": "BJSYB","manager": "孙财","introduce": "BJSYB","createTime": "2021-03-17 15:18:23"},{"id": "6051ae3de93db6522c1d00d9","pid": "6051ae15e93db6522c1d00d7","name": "上海事业部","code": "SHSYB","manager": "文吉星","introduce": "上海事业部","createTime": "2021-03-17 15:18:23"}]

将平铺结构转换为树形结构

function tranListToTreeData(list) {// 定义两个变量 一个用来解决映射关系 更快速的匹配到id对应的数据const map = {}// 存放最后生成的树形数组const treeList = []// 目前数组还是平铺状态,先做好映射关系list.forEach(item => {// 这样map这个对象里面的键值对 就是id和数据的对应关系map[item.id] = item})list.forEach(item => {// 无论是item 还是parent 都是一个对象 涉及浅拷贝 拿的都是地址const parent = map[item.pid]if (parent) {if (!parent.children) {parent.children = []}parent.children.push(item)} else {treeList.push(item)}})return treeList
}

之前的数据结构

现在的数据结构

三、对数组相关的查询常见方法。

1、找出数组中的最大数

const arr = ['1', '2', '3', '4']console.log('找出来最大值', Math.max.apply(null, arr))

2、找出数组中的最小数

const arr = ['1', '2', '3', '4']console.log('找出来最小值', Math.min.apply(null, arr))

四、数组常见的一些工作场景

前端工作常见数组数据处理的一些场景总结_码路老默007的博客-CSDN博客

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/201192.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

DependencyProperty.Register:wpf 向别的xaml传递参数

一.使用背景:在A.xaml中嵌入B.xaml,并且向B.xaml传递参数。 函数介绍: public static DependencyProperty Register(string name, Type propertyType, Type ownerType );name(string): 依赖属性的名称。在…

CmakeLists编译的动态库.so移动到其他位置后,提示找不到该库的依赖库解决办法

主要问题: 最近在搞海康SDK调用相机,发现在linux下一直调用不起来相机,总是提示error code:29,注册失败,重新编译优惠存在找不到依赖库的问题。 1.异常 CmakeLists编译的动态库.so移动到其他位置后&#…

【擎标】CCID信息系统服务商交付能力等级认证标准

为顺应信息技术服务业发展趋势及市场需求,维护市场秩序,加强行业自律,促进信息系统服务商交付能力的不断提高,增强信息系统服务商创新能力和国际竞争力,支撑信息系统服务商转型提升,中国软件行业协会、企业…

Python (十二) 文件

程序员的公众号:源1024,获取更多资料,无加密无套路! 最近整理了一份大厂面试资料《史上最全大厂面试题》,Springboot、微服务、算法、数据结构、Zookeeper、Mybatis、Dubbo、linux、Kafka、Elasticsearch、数据库等等 …

CCFCSP试题编号:201912-2试题名称:回收站选址

这题只要比较坐标的四周&#xff0c;然后计数就可以了。 #include <iostream> using namespace std;int main() {int n;cin >> n;int arr[1005][2] { 0 };int res[5] { 0 };int up 0;int down 0;int left 0;int right 0;int score 0;for (int i 0; i <…

矩阵运算_矩阵的协方差矩阵/两个矩阵的协方差矩阵_求解详细步骤示例

1. 协方差矩阵定义 在统计学中&#xff0c;方差是用来度量单个随机变量的离散程度&#xff0c;而协方差则一般用来刻画两个随机变量的相似程度。 参考&#xff1a; 带你了解什么是Covariance Matrix协方差矩阵 - 知乎 2. 协方差矩阵计算过程 将输入数据A进行中心化处理得到A…

移远通信推出六款新型天线,为物联网客户带来更丰富的产品选择

近日&#xff0c;移远通信重磅推出六款新型天线&#xff0c;覆盖5G、非地面网络&#xff08;NTN&#xff09;等多种新技术&#xff0c;将为物联网终端等产品带来全新功能和更强大的连接性能。 移远通信COO张栋表示&#xff1a;“当前&#xff0c;物联网应用除了需要高性能的天线…

JOSEF信号继电器 JX-18A/2 电压 220VAC辅助电源 板后接线

JX-18/2A系列信号继电器 JX-18A/2A1信号继电器&#xff1b; JX-18A/2A2信号继电器&#xff1b; JX-18B /2A1信号继电器; JX-18B/2A2信号继电器; JX-18C/2A1信号继电器; JX-18C/2A2信号继电器; JX-18E/2A1信号继电器; JX-18E/2A2信号继电器; JX-18D/2A1信号继电器; JX…

【计算机方向】通信、算法、自动化、机器人、电子电气、计算机工程、控制工程、计算机视觉~~~~~合集!!!

◆本文为大家梳理了近期可投的EI国际会议&#xff0c;涵盖计算机各个学科方向&#xff0c;均可EI检索 本期EI会议汇总合集涵盖领域&#xff1a;计算机视觉、物联网、算法、通信、智能技术、人工智能、人机交互、机器人、电子电气等众多领域&#xff01; 本期所推荐的EI会议有…

java:application.properties的详细使用以及区分环境

文章目录 什么是application.properties文件&#xff1f;如何在Java中使用application.properties文件&#xff1f;将数据注入到 Bean 中使用自定义的配置文件使用命令行参数进行配置配置文件的优先级加载外部的配置文件多环境配置1、创建配置文件2、在 application.properties…

RabbitMQ消息队列快速入门

RabbitMQ消息队列快速入门 初始MQ MQ全称为Message Queue&#xff0c;即消息队列&#xff0c;是在消息的传输过程中保存消息的容器。它是典型的生产者-消费者模型。 生产者不断向消息队列中生产消息&#xff0c;消费者不断的从队列中获取消息。消息的生产和消费都是异步的&am…

Windows本地搭建rtmp推流服务

前言 开发时偶尔需要使用rtmp直播流做视频流测试&#xff0c;苦于网上开源的rtmp视频流都已经失效&#xff0c;无奈只好尝试在本地自己搭建一个rtmp的推流服务&#xff0c;方便测试使用。 一、工具准备 Nginx&#xff1a;使用nginx-rtmp-win64推流工具FFmpeg&#xff1a;官方…

上海亚商投顾:北证50指数大涨 机器人概念股掀涨停潮

上海亚商投顾前言&#xff1a;无惧大盘涨跌&#xff0c;解密龙虎榜资金&#xff0c;跟踪一线游资和机构资金动向&#xff0c;识别短期热点和强势个股。 一.市场情绪 三大指数昨日震荡反弹&#xff0c;黄白二线有所分化&#xff0c;题材热点轮动表现。北证50指数大涨超3%&#…

劲松HPV防治诊疗中心提醒:做完HPV检查后,需留意这些事项!

在接受HPV检查后&#xff0c;有一些注意事项需要您注意。首先&#xff0c;要遵循医生的建议&#xff0c;并按照医生的指示进行后续治疗和随访。 其次&#xff0c;检查后可能会有些不适感&#xff0c;这是正常的现象&#xff0c;不必过于担心。但是&#xff0c;如果不适感持续加…

产品工程师工作的职责十篇(合集)

一、岗位职责的作用意义 1.可以最大限度地实现劳动用工的科学配置; 2.有效地防止因职务重叠而发生的工作扯皮现象; 3.提高内部竞争活力&#xff0c;更好地发现和使用人才; 4.组织考核的依据; 5.提高工作效率和工作质量; 6.规范操作行为; 7.减少违章行为和违章事故的发生…

9. BeanFactory 和 ApplicationContext有什么区别?

BeanFactory 和 ApplicationContext有什么区别&#xff1f; BeanFactory和ApplicationContext是Spring的两大核心接口&#xff0c;都可以当做Spring的容器。其中ApplicationContext是 BeanFactory的子接口。 依赖关系 BeanFactory&#xff1a;是Spring里面最顶层的接口&#…

2023 IDEA大会开幕 共探AI新篇章下的技术创新与创业

11月22日&#xff0c;AI与数字经济领域一年一度的科创盛会&#xff0c;2023 IDEA大会在深圳举行。IDEA研究院创院理事长、美国国家工程院外籍院士沈向洋在会上发表主旨演讲&#xff0c;发布IDEA研究院的重磅研产结晶与市场化成果&#xff1b;在大咖云集的论坛环节&#xff0c;多…

Android:Google三方库之Firebase集成详细步骤(一)

前提条件 安装最新版本的 Android Studio&#xff0c;或更新为最新版本。使用您的 Google 账号登录 Firebase请注意&#xff0c;依赖于 Google Play 服务的 Firebase SDK 要求设备或模拟器上必须安装 Google Play 服务 将Firebase添加到应用&#xff1a; 方式&#xff1a;使用…

CI/CD相关概念学习

文章目录 CI/CD相关概念学习前言CI/CD相关概念介绍集成地狱持续集成持续交付持续部署Devops CI/CD相关应用介绍JenkinsTekton PipelinesSpinnakerTravis CIGoCD CI/CD相关概念学习 前言 本文主要是介绍一些 CI/CD 相关的概念&#xff0c;通过阅读本文你将快速了解 CI/CD 是什么…