【学习笔记21】JavaScript数组的基本方法

news2025/7/19 1:14:09

笔记首发

一、push：末位新增

  • 语法: 数组.push(数据)
  • 作用: 向数组末尾添加数据
  • 返回值: 追加数据后, 数组最新的长度
        var arr = [10, 20, 30, 40];
        console.log('原始数组: ', arr);
​
        var num = arr.push(500);
        console.log('push新增后数组: ', arr);
        console.log('push的返回值: ', num);

在这里插入图片描述

二、pop：末位删除

  • 语法: 数组.pop( )
  • 作用: 删除数组的最后一项
  • 返回值: 返回末位删除的数据
        var arr = [10, 20, 30, 40];
        console.log('原始数组: ', arr);
​
        var num = arr.pop();
        console.log('pop删除后数组: ', arr);
        console.log('pop的返回值: ', num);

在这里插入图片描述

三、unshift：首位新增

  • 语法: 数组.unshift(数据)
  • 作用: 向数组头部添加数据
  • 返回值: 追加数据后, 数组最新的长度
        var arr = [10, 20, 30, 40];
        console.log('原始数组: ', arr);
​
        var num = arr.unshift(500);
        console.log('unshift新增后的数组: ', arr);
        console.log('unshift的返回值: ', num);

在这里插入图片描述

四、shift：首位删除

  • 语法: 数组.shift( )
  • 作用: 删除数组首位(第一项)的数据
  • 返回值: 返回删除的数据
        var arr = [10, 20, 30, 40];
        console.log('原始数组: ', arr);
​
        var num = arr.shift(500);
        console.log('shift删除后的数组: ', arr);
        console.log('shift的返回值: ', num);

在这里插入图片描述

五、reverse：反转数组

  • 语法: 数组.reverse( )
  • 作用: 反转数组
  • 返回值: 反转后的数组
        var arr = [10, 20, 45, 30, 40];
        console.log('原始数组: ', arr);
​
        var num = arr.reverse();
        console.log('reverse反转后的数组: ', arr);
        console.log('reverse的返回值: ', num);

在这里插入图片描述

六、sort：排序

1、语法

  • 数组.sort();
  • 数组.sort(function (a, b) {retrun a - b});
  • 数组.sort(function (a, b) {retrun b - a})

2、作用

  1. 不传参数
    • 会将数组内所有值, 转换为字符串, 然后一位一位的对比(第一位相同,对比第二位,…)
  2. 传参—函数 return a - b
    • 会将数组内所有的值, 按照数字的从小到大排列
  3. 传参—函数 return b - a
    • 会将数组内所有的值, 按照数字的从大到小排列

3、返回值

  • 不传参数：将排序后的数组返回
  • 传递参数：将排序后的数组返回

4、不传参数

        var arr = [100, 1, 101, 3, 2, 102]
        // 下标     0   1    2  3  4  5 
        console.log('原始数组: ', arr);
​
        /* 不传参数 */
        var num = arr.sort( );
        console.log('sort后的数组: ', arr);
        console.log('sort的返回值: ', num);

在这里插入图片描述

5、函数 return a - b

        var arr = [100, 1, 101, 3, 2, 102]
        // 下标     0   1    2  3  4  5 
        console.log('原始数组: ', arr);
​
        /* return a - b */
        var num = arr.sort(function (a, b) { return a - b })
        console.log('sort后的数组: ', arr)
        console.log('sort的返回值: ', num)

在这里插入图片描述

6、函数 return b - a

        var arr = [100, 1, 101, 3, 2, 102]
        // 下标     0   1    2  3  4  5 
        console.log('原始数组: ', arr);
​
        /* return b - a */
        var num = arr.sort(function (a, b) { return b - a })
        console.log('sort后的数组: ', arr)
        console.log('sort的返回值: ', num)

在这里插入图片描述

七、splice：添加或删除数组中的元素(相对于剪切)

1、语法

  • 数组.splice(开始索引, 多少个);
  • 数组.splice(开始索引, 多少个, 数据1, 数据2, 数据3...)

2、作用

  • 不传参数: 剪切数组中的某一段数据
  • 传递参数: 剪切数组中的某一段数据, 将第三个参数开始, 当成新数据插入到数组内

3、返回值

  • 返回值: 截切后的数据(数组形式)

4、不传参数

      var arr = [100, 1, 101, 3, 2, 102];
        // 下标     0   1    2  3  4  5 
        console.log('原始数组: ', arr);
​
        /* 不传参数 */
        var num = arr.splice(1, 3);
        console.log('splice后的数组: ', arr);
        console.log('splice的返回值: ', num);

在这里插入图片描述

5、传递参数

        var arr = [100, 1, 101, 3, 2, 102];
        // 下标     0   1    2  3  4  5 
        console.log('原始数组: ', arr);
​
        /* 传递参数 */
        var num = arr.splice(1, 3, '数据1', '数据2', '数据3', '数据4');
        console.log('splice后的数组: ', arr);
        console.log('splice的返回值: ', num);

在这里插入图片描述

注意：数组的方法 1~7 是能够改变原数组的方法

八、slice：不会改变原数组

  • 语法: 数组.slice(开始索引, 结束索引)
  • 作用: 复制数组中的某一段数据
  • 返回值: 复制出来的内容

1、参数特点

  1. 包含开始索引, 不包含结束索引(到结束索引前一位)
  2. 参数接受负数(相当于 数组.length + 负数)
  3. 不传结束索引，相当于写了数组.length
  4. 一个参数都不传，相当于复制整个数组, 或者只传递第一个参数为0

2、正常传参

        var arr = [100, 1, 101, 3, 2, 102];
        // 下标     0   1    2  3  4  5 
        console.log('原始数组: ', arr);
​
        /* 正常传参 */
        var num = arr.slice(1, 5);
        console.log('slice后的数组: ', arr);
        console.log('slice的返回值: ', num);

在这里插入图片描述

3、传递负数

        var arr = [100, 1, 101, 3, 2, 102];
        // 下标     0   1    2  3  4  5 
        console.log('原始数组: ', arr);
​
        /* 传递负数 */
         // arr.length + (-1) --> 6 + (-1) --> 6 - 1 ---> 5
        var num = arr.slice(1, -1);    
        console.log('slice后的数组: ', arr);
        console.log('slice的返回值: ', num);

在这里插入图片描述

4、不传结束索引

        var arr = [100, 1, 101, 3, 2, 102];
        // 下标     0   1    2  3  4  5 
        console.log('原始数组: ', arr);
​
        /* 不传结束索引 相当于写了 数组.length */
        var num = arr.slice(2)
        console.log('slice后的数组: ', arr);
        console.log('slice的返回值: ', num);

在这里插入图片描述

5、一个参数都不传

        var arr = [100, 1, 101, 3, 2, 102];
        // 下标     0   1    2  3  4  5 
        console.log('原始数组: ', arr);
​
        /* 一个参数都不传 相当于复制整个数组, 或者只传递第一个参数为0 */
        var num = arr.slice();
        console.log('slice后的数组: ', arr);
        console.log('slice的返回值: ', num);

在这里插入图片描述

九、concat：合并数组

  • 语法: 数组.concat(数据1, 数据2)
  • 作用: 将参数, 合并到指定数组内(如果参数写了数组, 那么会将数组的每一个值合并到指定数组)
  • 返回值: 合并后的数组
        var arr = [1, 2, 300, 4, 5, 4, 4, 4, 4];
        // 下标     0  1  2   3  4  5  6  7   8
        console.log('原始数组: ', arr);
​
        var num = arr.concat(100, 200, 'QF', 'haha', [600, 700, 800]);
        console.log('concat后的数组: ', arr);
        console.log('concat的返回值: ', num);

在这里插入图片描述

十、join：把数组中的所有元素转换一个字符串

  • 语法: 数组.join(连接符)，参数可以不传, 不传递默认逗号
  • 作用: 通过连接符连接数组的每一个
  • 返回值: 连接好的字符串

1、传递参数

        var arr = [1, 2, 300, 4, 5, 4, 4, 4, 4];
        // 下标     0  1  2   3  4  5  6  7   8
        console.log('原始数组: ', arr);
​
        /* 传递参数 */
        var num = arr.join('|');
        console.log('join后的数组: ', arr);
        console.log('join的返回值: ', num);

在这里插入图片描述

        var arr = [1, 2, 300, 4, 5, 4, 4, 4, 4];
        // 下标     0  1  2   3  4  5  6  7   8
        console.log('原始数组: ', arr);

        /* 传递参数 */
        var num = arr.join('');
        console.log('join后的数组: ', arr);
        console.log('join的返回值: ', num);

在这里插入图片描述

2、不传参数

        var arr = [1, 2, 300, 4, 5, 4, 4, 4, 4];
        // 下标     0  1  2   3  4  5  6  7   8
        console.log('原始数组: ', arr);

        /* 传递参数 */
        var num = arr.join( );
        console.log('join后的数组: ', arr);
        console.log('join的返回值: ', num);

在这里插入图片描述

十一、indexOf：查找数据

  • 语法: 数组.indexOf(数据); 数组.indexOf(数据, 开始索引)
  • 作用: 在数组内寻找指定数据
  • 返回值：
    1. 找到数据的时候, 返回数据第一次出现的下标
    2. 找不到的时候, 返回 -1

1、数组中找到数据返回值

        var arr = [1, 2, 300, 4, 5, 4, 4, 4, 4];
        // 下标     0  1  2   3  4  5  6  7   8
        console.log('原始数组: ', arr);

        /* 传递参数 */
        var num = arr.indexOf(4, 5);
        console.log('indexOf后的数组: ', arr);
        console.log('indexOf的返回值: ', num);

在这里插入图片描述

2、数组中没有找到数据返回值js

        var arr = [1, 2, 300, 4, 5, 4, 4, 4, 4];
        // 下标     0  1  2   3  4  5  6  7   8
        console.log('原始数组: ', arr);

        /* 传递参数 */
        var num = arr.indexOf(105);
        console.log('indexOf后的数组: ', arr);
        console.log('indexOf的返回值: ', num);

在这里插入图片描述

十二、lastIndexOf：查找数据

  • 语法: 数组.lastIndexOf(数据) ; 数组.lastIndexOf(数据, 开始索引)
  • 作用: 在数组内寻找指定数据(倒叙寻找)
  • 返回值：
    1. 找到数据的时候, 返回数据第一次出现的下标
    2. 找不到的时候, 返回 -1
        var arr = [1, 2, 300, 4, 5, 4, 4, 4, 4];
        // 下标     0  1  2   3  4  5  6  7   8
        console.log('原始数组: ', arr);

        /* 传递参数 */
        var num = arr.lastIndexOf(4, 4)
        console.log('lastIndexOf后的数组: ', arr);
        console.log('lastIndexOf的返回值: ', num);

在这里插入图片描述

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

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

相关文章

进程的初识

进程的初识

目录预备知识 -> 操作系统操作系统的定义操作系统的定位进程进程的概念进程调度的过程进程的管理描述组织PCB描述进程的特征进程调度的相关属性进程的状态优先级上下文记账信息预备知识 -> 操作系统 操作系统的定义 操作系统是一个搞管理的软件 对上，要对硬…
阅读更多...
为什么一定要申请专利呢

为什么一定要申请专利呢

问题一：如何避免被判为非正常专利？ 原本有个发明创造，想申请专利，却被列入非正常申请，甚至违法。以下五种情况一定要注意，千万不能碰。 1、同一单位或个人申请多件明显抄袭现有技术的专利； 2…
阅读更多...
如何通过 Java 合并和取消合并 Excel 单元格

如何通过 Java 合并和取消合并 Excel 单元格

在整理 Excel 中的数据时，我们不可避免地需要合并和取消合并单元格。同时，如果需要创建跨列或行的标题，我们可以合并 Excel 单元格以在电子表格中轻松完成此操作。 合并单元格是指将两个或多个单元格合并为一个单元格，而取消合并单…
阅读更多...
4.4——数据库和前后端身份认证

4.4——数据库和前后端身份认证

目录数据库与身份认证数据库的基本概念什么是数据库常见的数据库及分类传统型数据库的数据组织结构安装并配置 MySQL使用 MySQL Workbench 管理数据库连接数据库了解主界面的组成部分创建数据库创建数据表向表中写入数据使用 SQL 管理数据库在项目中操作 MySQL安装与配置 mysql…
阅读更多...
华为机试 - 数大雁

华为机试 - 数大雁

目录 题目描述 输入描述 输出描述 用例 题目解析 算法源码 题目描述 一群大雁往南飞，给定一个字符串记录地面上的游客听到的大雁叫声，请给出叫声最少由几只大雁发出。 具体的: 1.大雁发出的完整叫声为”quack“，因为有多只大雁同一时…
阅读更多...
怎么还不会进制转换，进来学。

怎么还不会进制转换，进来学。

✨进制转换，深度讲解✨特殊的十进制转换（整数）一、十进制转换为其他进制二、其他进制转换为十进制二进制的特殊转换（整数）一、二进制转换为其他进制二、其他进制转换为二进制任意进制的转换（整数&#xff0…
阅读更多...
Java项目：JSP高校新生报到迎新管理系统

Java项目：JSP高校新生报到迎新管理系统

作者主页：源码空间站2022 简介：Java领域优质创作者、Java项目、学习资料、技术互助 文末获取源码 项目介绍 辅导员角色包含以下功能： 辅导员登录,学生留言管理,新生报到管理,宿舍分配管理等功能。 财务管理角色包含以下功能： 财务…
阅读更多...
一道Android题目逆向动态调试

一道Android题目逆向动态调试

题目来源于海淀区网络与信息安全管理员大赛，题目中将加密验证算法打包进.so，在程序中动态调用check。 本题目通过System.loadLibrary(“native-lib”)加载了libnative-lib.so文件，该文件通过jeb可以实现提取 图1 题目关键代码 调试环境选择…
阅读更多...
【矩阵论】4.矩阵运算——广义逆——定义性质与特殊矩阵的广义逆

【矩阵论】4.矩阵运算——广义逆——定义性质与特殊矩阵的广义逆

4.3 广义逆 4.3.1 定义 若mn矩阵AAmn与矩阵XXnm满足四个条件①AXAA,②XAXX，③(AX)HAX,④(XA)HXA则X为A的加号逆(广义逆)，记为XA\begin{aligned} &若 m\times n 矩阵AA_{m\times n} 与矩阵 XX_{n\times m} 满足四个条件\\ &①AXAA,\quad ② XAXX…
阅读更多...
以太坊：轻松理解EIP-4844

以太坊：轻松理解EIP-4844

以太坊：轻松理解EIP-4844 以太坊网络在不断发展，多年来已经提出了许多技术提案。其中一个提案是由Vitalik Buterin提出的EIP-4844，它关注的是分片技术。 什么是EIP-4844，它将如何影响以太坊网络及其用户的未来？以下是…
阅读更多...
体系结构28_多处理机（2）

体系结构28_多处理机（2）

对称式共享存储器体系结构 多处理机Cache一致性 **多个处理器共享一个存储器 **当处理器规模较小时，这种机器十分经济 **支持对共享数据和私有数据的Cache缓存 私有数据供一个单独的处理器使用，而共享数据供多个处理器使用 ** 共享数据进入Cache产生了一…
阅读更多...
LeetCode 654.最大二叉树 617合并二叉树 700二叉搜索树中的搜索 98验证二叉搜索树

LeetCode 654.最大二叉树 617合并二叉树 700二叉搜索树中的搜索 98验证二叉搜索树

文章目录654最大二叉树c代码实现python 代码实现617合并二叉树c 代码实现python 代码实现700二叉搜索树中的搜索c代码实现python 代码实现98验证二叉搜索树c 代码实现python 代码实现654最大二叉树 给定一个不重复的整数数组 nums 。 最大二叉树 可以用下面的算法从 nums 递归…
阅读更多...
[附源码]java毕业设计在线购物商城

[附源码]java毕业设计在线购物商城

项目运行 环境配置： Jdk1.8 Tomcat7.0 Mysql HBuilderX（Webstorm也行） Eclispe（IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持）。 项目技术： SSM mybatis Maven Vue 等等组成，B/S模式 M…
阅读更多...
[附源码]java毕业设计疫情居家隔离服务系统

[附源码]java毕业设计疫情居家隔离服务系统

项目运行 环境配置： Jdk1.8 Tomcat7.0 Mysql HBuilderX（Webstorm也行） Eclispe（IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持）。 项目技术： SSM mybatis Maven Vue 等等组成，B/S模式 M…
阅读更多...
阿里云与信通院邀您参与云原生安全用户调研

阿里云与信通院邀您参与云原生安全用户调研

云原生安全建设已经成为企业云原生平台建设、应用云原生化改造进程中的必备项。在云原生的大势所趋下，云的分布式架构、容器化部署、边界消失等特点也带来了有别于传统硬件安全的模式：镜像漏洞、容器逃逸、租户隔离等安全问题威胁着企业的云原生平台和应…
阅读更多...
Unity动态创建Avatar骨骼映射

Unity动态创建Avatar骨骼映射

目录前言1 了解Avatar骨骼映射2 动态创建Avatar骨骼映射2.1 寻找相关APIAvatarBuilder.BuildHumanAvatarDeclarationParametersReturnsDescriptionHumanDescriptionDescriptionProperties2.2 创建Skeleton数据2.3 创建Human映射关系2.4 创建Avatar3 总结前言 为了让单个动画可…
阅读更多...
Linux（基于Centos7）（四）

Linux（基于Centos7）（四）

文章目录一、任务目标二、任务资讯三、任务实施3-1.RPM软件包管理3-2.YUM方式安装软件一、任务目标 实施该工单的任务目标如下： 知识目标 1.了解RPM提供的功能。 2.了解YUM相对于RPM所具有的优点。 能力目标 1.能够通过RPM安装及管理软件包。 2.能够通过YUM安装及管…
阅读更多...
MCE | ATM 激酶活化变单体后的神奇开挂！

MCE | ATM 激酶活化变单体后的神奇开挂！

ATM (Ataxia-telangiectasia mutated proteins) 是一种丝氨酸-苏氨酸蛋白激酶，是 DNA 损伤应答 (DDR) 的关键调节因子。ATM 是位名副其实的“指挥官”，在 DNA 双链断裂 (DSB) 中，参与细胞周期检查点维护、DNA 损伤修复和端粒维护等&#xff0…
阅读更多...
基于Android的个人健康管理系统

基于Android的个人健康管理系统

目 录 基于Android的个人健康管理系统 Personal Health Management System Based On Android 1 引言 1 1.1 课题背景 1 1.2 编写目的 1 1.3 关于Android 1 1.4 关于MVC框架 3 2 可行性研究 6 2.1 技术可行性 6 2.2 经济可行性 6 2.3 时间可行性 6 3 需求分析 7 4 总体设计 8 …
阅读更多...
栈——算法专项刷题（六）

栈——算法专项刷题（六）

六、栈 6.1后缀表达式 原题链接 根据 逆波兰表示法，求该后缀表达式的计算结果。 有效的算符包括 、-、*、/ 。每个运算对象可以是整数，也可以是另一个逆波兰表达式。 说明： 整数除法只保留整数部分。给定逆波兰表达式总是有效的。换句话…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023