学习前端二十八天(数组方法)

一、多维数组

 const matrix = [

            [1, 2, 3],  // 0

            [4, 5, 6],  // 1

            [7, 8, 9],// 2

        ]

 console.log(matrix[1][2]);   // 6

访问矩阵数组的每个值:

 for (let v1 of matrix) {

            for (let v2 of v1) {

                console.log(v2);

            }

        };  // 1,2,3,4,5,6,7,8,9

二、转为字符串

let matrix = [

            [1, 2, 3],  // 0

            [4, 5, 6],  // 1

            [7, 8, 9]   // 2

        ];

console.log(String(matrix));  // 1,2,3,4,5,6,7,8,9

console.log(matrix.toString());  // 1,2,3,4,5,6,7,8,9

三、删改数组

 // splice 删改数组

    const arr = ["a", "b", "c", "d", "e"];

    console.log(arr.splice(1, 2)); // ['b', 'c'],第一个参数为删除开始位置,第二个参数为删除元素个数

    arr.splice(3); // 没给第二个参数表示从开始位置往后全部删除      

    arr.splice(-3, 0); // 开始位置可以是负数,删除元素个数可以为0

// 删除并增加元素

      const arr2 = ["a", "b", "c", "d", "e"];

      arr2.splice(1, 3, "xc", "xl", "xy"); // 删除指定位置的几个元素后,增加新的元素

      arr2.splice(2, 0, "dwd", "d", "dw"); // 不删元素,在指定位置新增元素

// slice 截取数组,  不会修改数组

        const arr = ["a", "b", "c", "d", "e"];

        console.log(arr.slice(1, 3)); // 取起始位置,不取终点位置。前小后大

        arr.slice(-1); // 获取最后一个元素

// slice 重要应用:复制数组

        const arr2 = arr.slice(0);

        console.log(arr2 === arr);  // false

// concat 合并数组

        const arr1 = ["a", "b", "c"];

        const arr2 = ["a", "b", "c"];

        const arr3 = ["a", "b", "c"];

        const arr4 = ["a", "b", "c"];

        const arr5 = ["a", "b", "c"];

const arrb = arr1.concat(arr3, arr4);

const arr = arr1.concat(arr2, arr3, ["vv", "ff"]); // 数组拼接,代码顺序决定显示顺序

// 复制数组

    方法一: const arrNew = arr1.concat([]);

    方法二: const arrNew = [].concat(arr1);

四、遍历函数

// 数组的遍历 forEach

        const arr = ["a", "b", "c"];

        arr.forEach((i, j, ar) => console.log(j, i, ar) );

        // 第一个变量表示元素,第二个变量表示下标索引,依次赋值,第三个参数表示数组本身

        // 根据数组元素个数,运行个数次的函数

五、在数组中搜索

1、indexOf/lastIndexOf  判断某元素在数组中是否存在

const arr = ["a", "b", "c"];

console.log(arr.indexOf('b',1)); //  从头到尾,返回元素第一次出现的下标索引,第二个参数决定起始位置

console.log(arr.lastIndexOf('c',)); // 从尾到头 ,返回元素第一次出现的下标索引,第二参数决定起始位置

console.log(arr.lastIndexOf('xc',)); // -1 不存在该元素

2、 includes(" ",pow) 判断字符串中是否包含某字符或某字符串,返回布尔值,第二个参数决定搜索的起始位置

console.log(arr.includes('a', 1)); //false

3、find(function (v, i)  返回true时中断循环;find返回中断位置时的元素

4、findIndex(function (v, i) 返回true时中断循环;返回中断位置时的下标索引

findLastIndex 同findIndex 从尾至头循环

5、filter 在数组中搜索想要的元素(所有)

const arr = ["adad", "bdwadw", "cdwad", 'bwdwdw'];

// filter 返回true时,会选中这时的元素,并继续循环,将所有满足条件的元素集合成数组返回

        let r = arr.filter((v) => (v.startsWith("b")));

        console.log(r); //['bdwadw', 'bwdwdw']

六、转换数组

1、map 对数组的每个元素都调用函数,并返回结果数组,前后个数相等

        const arr = ["adad", "bdwadw", "cdwad", 'bwdwdw'];

        let newArr = arr.map((v) => v + "个"); // 给每个元素都加上“个”并返回到一个新数组中

        console.log(newArr);

2、sort 对数组(字母,数字)排序

const arr = [1, 20, 88, 655, 2, 33];

        // 升序排列

        console.log(arr.sort((a, b) => a > b ? 1 : -1));

        // 降序排序

        console.log(arr.sort((a, b) => a < b ? 1 : -1));

        // 针对数字简便写法,升序

        console.log(arr.sort((a, b) => a - b));

        // 针对数字简便写法,降序

        console.log(arr.sort((a, b) => b - a));

        // 对单词进行排序

        const newArr = ['css', 'js', 'vue', 'html'];

        newArr.sort((a, b) => a > b ? 1 : -1);

        console.log(newArr);

3、reverse 颠倒元素顺序

const newArr = ['css', 'js', 'vue', 'html'];

console.log(newArr.reverse());  // ['html', 'vue', 'js', 'css']

4、split 通过给定的分隔符 delim 将字符串分割成一个数组

        const str = "js,css,html,vue";

        const arr1 = str.split(","); // 通过“,”将字符串分割成一个数组

        const arr2 = str.split(''); // 空分隔符,将每个字符分割为一个数组

        const arr3 = str.split('s');// 作为分隔符的元素不会返回

        console.log(arr1); //['js', 'css', 'html', 'vue']

        console.log(arr2);//['j', 's', ',', 'c', 's', 's', ',', 'h', 't', 'm', 'l', ',', 'v', 'u', 'e']

        console.log(arr3);//['j', ',c', '', ',html,vue']

5、join 将数组转成字符串,可以自定义分隔符,分隔符会返回到字符串中

        const arr = ['js', 'css', 'html', 'vue'];

        let str1 = arr.join("s");

        let str2 = arr.join("");

        let str3 = arr.join();

        console.log(str1); // jsscssshtmlsvue

        console.log(str2); // jscsshtmlvue

        console.log(str3); // js,css,html,vue

6、reduce

        // 方法第二个参数作为sum的初始值,此时函数执行的次数为数组元素的个数

        // 方法第二个参数不存在,sum的初始值为回调函数的第一个元素,此时函数执行的次数为数组元素个数-1

        // 回调函数的返回值,会直接赋值给下一个函数的sum

        // reduce方法的返回值,为最后一次回调函数的返回值

        const arr = ["a", "b", "c", "d", "e"];

        const r = arr.reduce(function (sum, v, i) {

            console.log(sum, v, i);

            return sum + 1;

        }, 0)

       console.log(r);// 5

七、判断数组

 // Array.isArray 判断一个东西是否是数组

        alert(Array.isArray({})); // false

        alert(Array.isArray([])); // true

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

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

相关文章

windows Jenkins运行python+selenium打开浏览器一直无响应,运行中,还没有打开浏览器

一开始解决办法是把打开服务把Jenkins给禁用了 但是没有用&#xff0c;然后找到安装目录 C:\Program Files\Jenkins 在这个路径下&#xff0c;在地址栏输入cmd打开命令窗口运行Jenkins启动命令 java -jar jenkins.war --httpPort8080 打开浏览器进入链接 http://localhost:…

使用工具速记

文章目录 一、sqlyoy登录账号信息迁移二、idea导入之前的已配置的idea信息三、设置windows UI大小四、其他 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、sqlyoy登录账号信息迁移 工具(sqlyog上面菜单栏)->导入导出详情->选择要导出的账号…

Centos/linux根目录扩容、分区、挂载。LVM、物理卷、逻辑卷

前言    &#xff08;空格&#xff09; &#xff1a;分区挂载和扩容是两码事 每个Linux使用者在安装Linux时都会遇到这样的困境&#xff1a;在为系统分区时&#xff0c;如何精确评估和分配各个硬盘分区的容量&#xff0c;因为系统管理员不但要考虑到当前某个分区需要的容量&a…

你的网站还在使用HTTP? 免费升级至HTTPS吧

如果您的网站还在使用老的http协议&#xff0c;可以申请一个免费的SSL证书升级至https&#xff01; 具体步骤如下&#xff1a; 1 申请免费SSL证书 根据你的需求选择合适的SSL证书类型&#xff0c;如单域名证书&#xff0c;多域名证书、通配符证书 登录免费供应商JoySSL官网&…

施耐德 Unity Pro 编程软件导入导出变量

适用范围 施耐德中高端PLC&#xff0c;使用的编程软件为 UnityPro &#xff08;最新版更名为 Ecostructure Control Expert&#xff09; 中端 PLC&#xff1a;Premium&#xff0c;M340高端 PLC&#xff1a;Quantum&#xff0c;M580 导出/导入变量 导出变量可导出【变量和 FB…

表情识别 | LBP+SVM实现脸部动态特征的人脸表情识别程序(Matlab)

表情识别 | LBPSVM实现脸部动态特征的人脸表情识别程序&#xff08;Matlab&#xff09; 目录 表情识别 | LBPSVM实现脸部动态特征的人脸表情识别程序&#xff08;Matlab&#xff09;预测效果基本介绍程序设计参考资料 预测效果 基本介绍 1 运行环境 程序运行在Windows系统下&am…

微信小程序:11.本地生活小程序制作

开发工具&#xff1a; 微信开发者工具apifox进行创先Mock 项目初始化 新建小程序项目输入ID选择不使用云开发&#xff0c;js传统模版在project.private.config中setting配置项中配置checkinalidKey&#xff1a;false 梳理项目结构 因为该项目有三个tabbar所以我们要创建三…

百种提权及手段一览系列第10集

特权升级的危险是显而易见的。通过提升权限&#xff0c;攻击者可以绕过网络安全措施&#xff0c;从而损害数据完整性、机密性和系统可用性。对于组织而言&#xff0c;这可能会导致数据泄露、系统停机以及潜在的法律和声誉后果。识别权限升级的迹象并部署预防性网络安全措施对于…

【01-机器学习入门:理解Scikit-learn与Python的关系】

文章目录 前言Python与机器学习Scikit-learn简介Scikit-learn与Python的关系使用Scikit-learn进行机器学习结语 前言 在当今的数据科学和人工智能领域&#xff0c;机器学习已经成为了一个不可或缺的组成部分。而对于那些刚刚踏入这一领域的新手来说&#xff0c;理解机器学习的基…

HTTP网络协议的请求方法,具体详解(2024-04-26)

1、HTTP 即超文本传输协议&#xff0c;是一种实现客户端和服务器之间通信的响应协议&#xff0c;它是用作客户端和服务器之间的请求 根据 HTTP 标准&#xff0c;HTTP 请求可以使用多种请求方法。 2、方法分类 HTTP1.0 定义了三种请求方法&#xff1a; GET, POST 和 HEAD 方…

STM32系统参数和结构

系列文章目录 STM32单片机系列专栏 C语言术语和结构总结专栏 文章目录 1. 基本参数 2. 片上资源&#xff08;外设&#xff09; 3. STM32系列命名规则 4. 系统结构 5. 引脚定义 6. 启动配置 7. 最小系统电路 8. 型号分类和缩写 1. 基本参数 STM32F103C8T6 系列&#…

SpringBoot+MyBatis-Plus+jsqlparser实现多租户功能

前言 多租户技术&#xff08;multi-tenancy technology&#xff09;是一种软件架构技术&#xff0c;它允许在单个系统实例上为多个用户或组织提供服务&#xff0c;同时确保这些用户之间数据的隔离性。在多租户架构中&#xff0c;每个租户&#xff08;可以是个人用户、企业、组…

预见预判|AIRIOT智慧交通管理解决方案

随着机动车保有量的逐步增加&#xff0c;城市交通压力日益增大。同时&#xff0c;新能源车辆的快速发展虽然带来了环保效益&#xff0c;但也因不限号政策而进一步加剧了道路拥堵问题。此外&#xff0c;各类赛事和重大活动的交通管制措施也时常导致交通状况复杂多变。面对这些挑…

便携式应急指挥箱规格参数

概况: 微缩型的无线视频音频传输的机动挥所。体积小、重量轻、公配电方便、携带便携、功能齐全。可进行单兵作战&#xff0c;通过此无线音频视频传输的指挥箱能完成现场图像、语音、数据的采集等功能&#xff0c;可以通过5G/4G/WIFI等多种无线网络完成传输的需求&#xff0c;或…

Linux基础——Linux开发工具(gcc/g++,gdb)

前言&#xff1a;在上一篇我们简单介绍了yum&#xff0c;vim的一些常用的指令和模式&#xff0c;现在让我们来进一步了解其他的Linux环境基础开发工具gcc/g&#xff0c;gdb。 如果对前面yum和vim有什么不懂的建议回顾去回顾上期知识&#xff01;&#xff01;&#xff01; Linu…

html表格导出为word文档,导出的部分表格内无法填写文字

导出技术实现&#xff1a;fileSaver.jshtml-docx-js 1.npm安装 npm install --save html-docx-js npm install --save file-saver 2.页面引入 import htmlDocx from html-docx-js/dist/html-docx; import saveAs from file-saver;components: {htmlDocx,saverFile, }, 3.页…

神经网络的激活函数

目录 神经网络 激活函数 sigmoid 激活函数 tanh 激活函数 backward方法 relu 激活函数 softmax 激活函数 神经网络 人工神经网络&#xff08; Artificial Neural Network&#xff0c; 简写为ANN&#xff09;也简称为神经网络&#xff08;NN&#xff09;&#xff0c…

Netty 应用与原理

更好的阅读体验 \huge{\color{red}{更好的阅读体验}} 更好的阅读体验 Java IO 模型 本篇示例代码仓库&#xff1a;learn-netty 基础概念 在 I/O 操作中有这么两组概念&#xff0c;其中同步/异步 要和线程中的同步线程/异步线程要区分开&#xff0c;这里指的是同步IO / 异步IO…

ssm智能停车场管理系统

视频演示效果: SSMvue智能停车场 摘 要 本论文主要论述了如何使用JAVA语言开发一个智能停车场管理系统&#xff0c;本系统将严格按照软件开发流程进行各个阶段的工作&#xff0c;采用B/S架构&#xff0c;面向对象编程思想进行项目开发。在引言中&#xff0c;作者将论述智能停车…

新兴游戏引擎Godot vs. 主流游戏引擎Unity和虚幻引擎,以及版本控制工具Perforce Helix Core如何与其高效集成

游戏行业出现一个新生事物——Godot&#xff0c;一个免费且开源的2D和3D游戏引擎。曾经由Unity和虚幻引擎&#xff08;Unreal Engine&#xff09;等巨头主导的领域如今迎来了竞争对手。随着最近“独特”定价模式的变化&#xff0c;越来越多的独立开发者和小型开发团队倾向于选择…