前端开发中常见的20个数组方法，你掌握了几个？

news2024/12/25 9:10:30

文章目录

  • 前言
  • 一、常见的数组方法
    • 1.1 push (将指定的元素添加到数组的末尾，并返回新的数组长度)
    • 1.2 pop (从数组中删除最后一个元素，并返回该元素的值)
    • 1.3 shift (从数组中删除第一个元素，并返回该元素的值)
    • 1.4 unshift (向数组首位添加一个或多个元素，并返回新的数组长度)
    • 1.5 concat (合并多个数组或值，返回一个新的数组)
    • 1.6 slice (截取数组的一部分，返回一个新的数组)
    • 1.7 splice (删除、替换或添加数组的元素，并返回被删除的元素)
    • 1.8 fliter (过滤数组中的元素，返回一个新的数组)
    • 1.9 map (对数组中的每个元素进行操作，返回一个新的数组)
    • 1.10 sort (对数组进行排序)
    • 1.11 reverse (翻转数组中的元素)
    • 1.12 indexOf (查找数组中指定元素的索引)
    • 1.13 find (查找数组中符合条件的第一个元素)
    • 1.14 findIndex (查找数组中符合条件的第一个元素的索引)
    • 1.15 includes (判断一个数组是否包含一个指定的值)
    • 1.16 every (判断数组内的所有元素是否都能通过指定函数的测试)
    • 1.17 some(判断数组中是否至少有一个元素通过了指定函数的测试)
    • 1.18 join (将一个数组的所有元素连接成一个字符串并返回这个字符串)
    • 1.19 reduce (计算数组所有元素的总和)
    • 1.20 forEach(数组循环遍历)
    • 二、 将平铺的数组结构转换为tree型数组结构
  • 总结

前言

数组是每种语言都必须打交道的，重要程度不言而喻！
数组在前端开发中的主要使用场景有：
存储和处理数据：数组是一种有序的数据结构，可以用来存储和处理多个相关的数据。在前端开发中，我们经常使用数组来存储和处理列表、表格、选项等数据。
循环和遍历：数组提供了循环和遍历的功能，可以方便地对数组中的每个元素进行操作。在前端开发中，我们经常使用循环和遍历来处理列表、表格、选项等数据。
数据过滤和转换：数组提供了一些方法可以对数组进行过滤和转换。例如，我们可以使用filter()方法来过滤数组中的元素，使用map()方法来对数组中的每个元素进行转换。
数据排序和查找：数组提供了一些方法可以对数组进行排序和查找。例如，我们可以使用sort()方法来对数组进行排序，使用indexOf()方法来查找数组中的元素。
所以数组方法是前端人员必不可少的技能！你还在遇到一次查一次吗！一起学习吧！

以下是本篇文章正文内容，讲解各种数组方法

一、常见的数组方法

1.1 push (将指定的元素添加到数组的末尾，并返回新的数组长度)

        let name = ['前', '端', '百'];
        const res = name.push('草','阁'); // 想往数组末端添加几个元素，就传入几个参数
        console.log(name); 
        console.log(res); // 返回新的数组长度

在这里插入图片描述

1.2 pop (从数组中删除最后一个元素，并返回该元素的值)

        let name = ['前', '端', '百','草','阁'];
        const res = name.pop(); // 返回被删的那个元素 这里是 '阁'
        console.log(name);
        console.log(res);

在这里插入图片描述

1.3 shift (从数组中删除第一个元素，并返回该元素的值)

        let name = ['前', '端', '百','草','阁'];
        const res = name.shift(); // 返回被删的那个元素 这里是 '前'
        console.log(name);
        console.log(res);

在这里插入图片描述

1.4 unshift (向数组首位添加一个或多个元素，并返回新的数组长度)

        let name = [ '百','草','阁'];
        const res = name.unshift('前', '端'); // 向数组开头添加一个或多个元素
        console.log(name);
        console.log(res); // 返回添加后数组的长度

在这里插入图片描述

1.5 concat (合并多个数组或值，返回一个新的数组)

        let name1 = ['前', '端']; // 数组
        let name2 = [ '百','草']; // 数组
        let name3 = '阁'; // 值
        const res = name1.concat(name2,name3); // name1数组 拼接上 name2数组 以及 name3值
        console.log(name1,name2,name3); // 原数组和值都不曾改变
        console.log(res); // 返回一个新数组

在这里插入图片描述

1.6 slice (截取数组的一部分，返回一个新的数组)

        let name = ['前', '端', '百','草','阁'];
        const res = name.slice(2); // 从第三个元素开始截取直至最后一个元素
        const res2 = name.slice(1,3) // 从第二个开始截取!
到第四个元素 但不包括第四个元素 左闭右开
        console.log(res);
        console.log(res2);

在这里插入图片描述
值得一提的是，slice的参数可以传入负数，-1代表最后一个元素，-2代表倒二个元素

        let name = ['前', '端', '百','草','阁'];
        const res = name.slice(-2); // 从倒二个元素开始截取直至最后一个元素
        const res2 = name.slice(0,-1) // 从第一个开始截取到最后一个个元素 但不包括最后一个元素 左闭右开
        console.log(res);
        console.log(res2);

在这里插入图片描述

1.7 splice (删除、替换或添加数组的元素，并返回被删除的元素)

        let name = ['前', '端', '百','草','阁'];
        name.splice(2,0,'你好'); // 从第三个元素开始删，删0个，并且在第三个元素前加上 '你好'
        console.log(name);
        const res = name.splice(0,2,'你','好','呀') // 从第一个元素开始删，删2个，并且添加上两个元素
        console.log(name);
        console.log(res); // 被删除的元素 '前' '端'

在这里插入图片描述

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 arr = [1000,10,1,4,3,2,77]
        const arr2 = [1000,10,1,4,3,2,77]
        arr.sort((x,y) => x - y) // 正序
        console.log(arr); //  [1, 2, 3, 4, 10, 77, 1000]
        arr2.sort((x,y) => y - x) // 倒序
        console.log(arr2); // [1000, 77, 10, 4, 3, 2, 1]

1.11 reverse (翻转数组中的元素)

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

1.12 indexOf (查找数组中指定元素的索引)

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

1.13 find (查找数组中符合条件的第一个元素)

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

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

        const array1 = [5, 12, 8, 130, 44];
        const found = array1.findIndex(item => item > 10); // 找到第一个大于10的元素的索引
        console.log(found); // 1

1.15 includes (判断一个数组是否包含一个指定的值)

        const pets = ['cat', 'dog', 'bat'];
        const res = pets.includes('cat') // 数组里是否包含 'cat' 是的话返回true 不是的话返回false
		console.log(res); // true

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

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

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

        const array1 = [1, 30, 39, 29, 10, 13];
        const res = array1.some(item => item > 10) // 判断数组中是否至少有一个元素大于10
        console.log(res); // true
        const res2 = array1.some(item => item > 100) // 判断数组中是否至少有一个元素大于100
        console.log(res2); // false

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

        const elements = ['Fire', 'Air', 'Water'];

        const res = elements.join() // 将数组中每一个元素用逗号连接
        console.log(res); // Fire,Air,Water

        const res1 = elements.join('-') // 将数组中每一个元素用-连接
        console.log(res1); // Fire-Air-Water
        
        const res2 = elements.join('') // 将数组中每一个元素用''连接
        console.log(res2); // FireAirWater

1.19 reduce (计算数组所有元素的总和)

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

1.20 forEach(数组循环遍历)

		const array1 = ['a', 'b', 'c'];
		array1.forEach(element => console.log(element)); 
		// a
		// b
		// b

二、 将平铺的数组结构转换为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
}

转换完后的tree型数组结构渲染出的结果
在这里插入图片描述
这里利用的数组方法有，用forEach进行数组的循环遍历，利用map进行Id的映射

总结

在本文中，我们探讨了一些常用的数组方法，这些方法能够帮助我们对数组进行各种操作和转换。我们介绍了一些常用的数组方法，包括添加和删除元素、合并和拆分数组、以及对数组进行排序和搜索等。我们还学习了如何使用迭代方法来遍历数组，并了解了一些高级的数组操作，如过滤、映射等。通过学习这些数组方法，我们能够更加高效和灵活地处理数组数据，提高编程效率和代码质量。熟能生巧！

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

路径规划算法：基于鹈鹕优化的路径规划算法- 附代码

路径规划算法：基于鹈鹕优化的路径规划算法- 附代码

路径规划算法：基于鹈鹕优化的路径规划算法- 附代码 文章目录 路径规划算法：基于鹈鹕优化的路径规划算法- 附代码1.算法原理1.1 环境设定1.2 约束条件1.3 适应度函数 2.算法结果3.MATLAB代码4.参考文献 摘要：本文主要介绍利用智能优化算法鹈鹕…
阅读更多...
VirtualBox单机版安装K8S+TF

VirtualBox单机版安装K8S+TF

本文参考自：kubernetes最新版安装单机版v1.21.5_kubernetes下载_qq759035366的博客-CSDN博客 只用一台VB虚拟机，装K8S加Tungsten Fabric。 0. 提前避坑： 0.1 Tungsten Fabric的VRouter对Linux内核版本有要求，以下内核版本才…
阅读更多...
音视频——码率、帧率越高越清晰？分辨率、像素、dpi的关系

音视频——码率、帧率越高越清晰？分辨率、像素、dpi的关系

一 前言 本期我介绍一下视频的一些基础概念，如帧率、码率、分辨率、像素、dpi、视频帧、I帧、P帧、gop等。我i初步学习音视频，给这些专业词汇进行扫盲 会解释多少码率是清晰的，是否帧率越高越流畅等问题。 这些概念是比较杂乱的&#xff0c…
阅读更多...
微信二维码登录，修改下面提示的字体和样式

微信二维码登录，修改下面提示的字体和样式

背景 由于业务需要，需要把微信二维码下面默认的提示文字进行修改，如下图所示： 需要修改上面红色框内选择的字体，在研究的过程中，发现好多人都在查询这个问题，并且有些网友思路也是对的。可能只是方式没对。…
阅读更多...
库存扣减设计和下单

库存扣减设计和下单

这里写目录标题 前言正文库存设计原则常见库存扣减方案秒杀订单域设计整体服务领域模型领域服务领域事件之下单下单整体流程同步下单库存预扣减库存扣减 总结参考链接 前言 大家好，我是练习两年半的Java练习生，前面我们已经介绍了领域驱动和缓存设计&am…
阅读更多...
路径规划算法：基于金豺优化的路径规划算法- 附代码

路径规划算法：基于金豺优化的路径规划算法- 附代码

路径规划算法：基于金豺优化的路径规划算法- 附代码 文章目录 路径规划算法：基于金豺优化的路径规划算法- 附代码1.算法原理1.1 环境设定1.2 约束条件1.3 适应度函数 2.算法结果3.MATLAB代码4.参考文献 摘要：本文主要介绍利用智能优化算法金豺…
阅读更多...
【网络编程】应用层协议——HTTPS协议（数据的加密与解密）

【网络编程】应用层协议——HTTPS协议（数据的加密与解密）

文章目录 一、HTTP协议的缺陷二、HTTPS协议的介绍三、加密与解密3.1 加密与解密流程3.2 为什么要加密和解密3.3 常见的加密方式3.3.1 对称加密3.3.2 非对称加密3.3.3 数据摘要（数据指纹）3.3.4 数据签名 四、HTTPS工作过程4.1 中间人攻击方式4.2 数字证书…
阅读更多...
50行PyTorch代码中的生成对抗网络（GAN）

50行PyTorch代码中的生成对抗网络（GAN）

一、说明 2014年，蒙特利尔大学的伊恩古德费罗（Ian Goodfellow）和他的同事发表了一篇令人惊叹的论文，向世界介绍了GANs或生成对抗网络。通过计算图和博弈论的创新组合，他们表明，如果有足够的建模能力，相互竞争的两个模型将能够通过普通的旧反向传播进行共同训练。 二、原…
阅读更多...
大学啥也没有学到，跑到培训班里学技术，真的有用吗-以下来自一位认识的朋友投稿-王大师

大学啥也没有学到，跑到培训班里学技术，真的有用吗-以下来自一位认识的朋友投稿-王大师

在学习IT技术的过程中，你是否也被安利过各种五花八门的技术培训班？这些培训班都是怎样向你宣传的，你又对此抱有着怎样的态度呢？在培训班里学技术，真的有用吗？–王大师告诉你 1、掌握 JAVA入门到进阶知识(持…
阅读更多...
极验滑块(3代)验证码细节避坑总结

极验滑块(3代)验证码细节避坑总结

声明 本文章中所有内容仅供学习交流使用，不用于其他任何目的，不提供完整代码，抓包内容、敏感网址、数据接口等均已做脱敏处理，严禁用于商业用途和非法用途，否则由此产生的一切后果均与作者无关！ 关于 w 值…
阅读更多...
惊！这道题正确率竟然只有 22%：答案详解

惊！这道题正确率竟然只有 22%：答案详解

《Go 语言爱好者周刊》第 148 期有一道题目：以下代码输出什么？ package mainimport ("fmt" )func main() {m : [...]int{a: 1,b: 2,c: 3,}m[a] 3fmt.Println(len(m)) }A：3；B：4；C：10…
阅读更多...
面试官：过滤器和拦截器有什么区别？

面试官：过滤器和拦截器有什么区别？

过滤器（Filter）和拦截器（Interceptor）都是基于 AOP（Aspect Oriented Programming，面向切面编程）思想实现的，用来解决项目中某一类问题的两种“工具”，但二者有着明显的差…
阅读更多...
AI原生云向量数据库Zilliz Cloud创建备份快照

AI原生云向量数据库Zilliz Cloud创建备份快照

目录 创建快照 调整快照保留天数 相关文档 快照是为某个集群在指定时间点创建的备份。您可以基于快照创建新的集群或将快照用作集群数据备份。 说明 快照功能目前仅对签约用户开放。如需使用该功能，请联系我们。 创建快照 快照创建是异步操作，创建所需时间取决于集群大…
阅读更多...
Python爬虫学习笔记（一）————网页基础

Python爬虫学习笔记（一）————网页基础

目录 1.网页的组成 2.HTML （1）标签 （2）比较重要且常用的标签： ①列表标签 ②超链接标签 （a标签） ③img标签：用于渲染，图片资源的标签 ④div标签和span标签 &…
阅读更多...
LabVIEW开发BROOKS SLA5850 BROOKS 0251

LabVIEW开发BROOKS SLA5850 BROOKS 0251

LabVIEW开发BROOKS SLA5850 BROOKS 0251 SLA5800 系列热式质量流量计和质量流量控制器在精度、稳定性和可靠性方面堪称标杆，因而得到广泛的认可。这些产品具有广泛的流量测量范围，适用于各种温度和压力条件，非常适合化工和石化研究、实验室、…
阅读更多...
【Gradle】实现自动化构建和测试，提高代码质量和可靠性

【Gradle】实现自动化构建和测试，提高代码质量和可靠性

做Android开发的同学，对Gradle肯定不陌生，我们用它配置、构建工程，可能还会开发插件来促进我们的开发，我们必须了解Gradle。Gradle是一种基于Groovy的项目自动化构建工具，用于编译、打包、测试、发布和依赖管理等任务。…
阅读更多...
pdf可以转化成excel表格吗？四个方法可以帮助到你！

pdf可以转化成excel表格吗？四个方法可以帮助到你！

PDF文件是许多用户在工作中经常接触的文件格式。为了保持格式排版的一致性并防止篡改，在传输过程中通常会先将文件转换为PDF格式。然而，如果需要编辑其中的数据，就需要先将PDF转换为Excel才能继续相关操作。那么，如何将PDF转换为E…
阅读更多...
腾讯云服务器CPU大全_处理器主频性能

腾讯云服务器CPU大全_处理器主频性能

腾讯云服务器CPU采用什么处理器型号？主频睿频多少？腾讯云服务器CPU性能如何？云服务器CVM规格不同CPU型号也不同，轻量应用服务器的CPU处理器性能如何？腾讯云服务器网分享腾讯云服务器CPU处理器大全： 目录 …
阅读更多...
如何通过 CrossOver 在 Mac 苹果电脑上安装使用 windows 应用程序？

如何通过 CrossOver 在 Mac 苹果电脑上安装使用 windows 应用程序？

首先我们可以先了解一下什么是 crossOver ，CrossOver 是 Mac 和 Windows 系统之间的兼容工具。使 Mac 操作系统的用户可以运行 Windows 系统的应用，从办公软件、实用工具、游戏到设计软件， 您都可以在 Mac 程序和 Windows 程序之间随意切换。…
阅读更多...
csapp 深入理解计算机系統 笔记

csapp 深入理解计算机系統 笔记

csapp 深入理解计算机系統 笔记 参考lab 第1章：计算机系统漫游第 2 章：信息的表示和处理Data Lab 参考 计算机速成课 | Crash Course 字幕组 (全40集 2018-5-1 精校完成)csapp重点解读深入理解计算机系統 csapp lab Lab AssignmentsLab 直接下载参考 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023