web前端-javascript-Array数组方法详解(增删改,遍历,截取,连接,转字符串,反转数组,排序)

news2024/9/22 22:21:23

文章目录

  • 数组的方法
    • 1. push() 添加
    • 2. pop() 删除
    • 3. unshift() 添加
    • 4. shift() 删除
    • 5. forEach() 遍历
      • 1) 说明
      • 2) 使用
    • 6. slice() 截取
    • 7. splice() 删除
    • 8. concat() 连接
    • 9. join() 转String字符串
    • 10. reverse() 反转
    • 11. sort() 排序
      • 1) 简单用法
      • 2) 自己指定排序规则

数组的方法

1. push() 添加

  1. 该方法可以向数组中添加一个或多个元素,并返回数组的新的长度
  2. 可以将要添加的元素作为方法的参数传递
    • 这样这些元素将会自动添加到数组的末尾
  3. 该方法会将数组新的长度作为返回值返回
var arr = ["孙悟空", "猪八戒", "沙和尚"];

var result = arr.push("唐僧", "蜘蛛精", "白骨精", "玉兔精");
console.log(arr);
console.log("result = " + result);

请添加图片描述

2. pop() 删除

该方法可以删除数组的最后一个元素,并将被删除的元素为作为返回值返回

var arr = ["孙悟空", "猪八戒", "沙和尚"];

var result = arr.pop();
console.log("result = " + result);
console.log(arr);

请添加图片描述

3. unshift() 添加

  1. 向数组的开头添加一个或多个元素,并返回新的数组长度
  2. 向前边插入元素以后,其他的元素索引会依次调整
var arr = ["孙悟空", "猪八戒", "沙和尚"];

console.log(arr);
arr.unshift("牛魔王", "二郎神");
console.log(arr);

请添加图片描述

4. shift() 删除

可以删除数组的第一个元素,并将被删除的元素作为返回值返回

var arr = ["孙悟空", "猪八戒", "沙和尚"];

var result = arr.shift();
console.log(arr);
console.log("result = " + result);

请添加图片描述

5. forEach() 遍历

1) 说明

  1. JS 中还为我们提供了一个方法,用来遍历数组
  2. 这个方法只支持 IE8 以上的浏览器
    • IE8 及以下的浏览器均不支持该方法,所以如果需要兼容 IE8,则不要使用 forEach
    • 还是使用 for 循环来遍历

2) 使用

  1. forEach()方法需要一个函数作为参数
  2. 像这种函数,由我们创建当但是不由我们调用的,我们称为回调函数
  3. 数组中有几个元素函数就会很执行几次,每次执行时,浏览器会将遍历到的元素
    • 以实参的形式传递进来,我们可以定义形参来读取这些内容
  4. 浏览器会在回调函数中传递三个参数
    • 第一个参数就是当前正在遍历的元素
    • 第二个参数就是当前正在遍历的元素的索引
    • 第三个参数就是正在遍历的数组
var arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧", "白骨精"];

arr.forEach(function (value, index, obj) {
  console.log(value);
});

请添加图片描述

6. slice() 截取

  1. 可以用来从数组中提取指定元素
  2. 该方法不会改变原数组,而是将截取到得元素封装到一个新的数组中返回
  3. 参数:
    • 截取开始的位置,包含开始索引
    • 截取结束位置的索引,不包含结束索引

      第二个参数可以省略不写,此时会截取从开始索引往后的所有元素
      索引可以传递一个负值,如果传递一个负值,则从后往前计算

    • -1 倒数第一个
    • -2 倒数第二个
var arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧", "白骨精"];

var result = arr.slice(1, 4);
console.log(result);

result = arr.slice(3);
console.log(result);

result = arr.slice(1, -2);
console.log(result);

请添加图片描述

7. splice() 删除

  1. 可以用来删除数组中的指定元素
  2. 使用 splice 会影响到原数组,会将指定元素从原宿主中删除
    • 并将被删除的元素作为返回值返回
  3. 参数:
    • 第一个,表示开始位置的索引
    • 第二个,表示删除的数量
    • 第三个及以后。。。 可以传递一些新的元素,这些元素将会自动插入到开始位置索引前边
var arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧", "白骨精"];
var result = arr.splice(1, 0, "牛魔王", "铁扇公主", "红孩儿");

console.log(arr);
console.log(result);

请添加图片描述

8. concat() 连接

  1. 可以连接两个或多个数组,并且将新的数组返回
  2. 该方法不会对原数组产生影响
var arr = ["孙悟空", "猪八戒", "沙和尚"];
var arr2 = ["白骨精", "玉兔精", "蜘蛛精"];
var arr3 = ["二郎神", "太上老君", "玉皇大帝"];

var result = arr.concat(arr2, arr3, "牛魔王", "铁扇公主");

9. join() 转String字符串

  1. 该方法可以将数组的转换为一个字符串
  2. 该方法不会对原数组产生影响,而是将转换后得我字符串作为结果返回
  3. 在 join()中可以指定一个字符串作为参数,这个字符串将会成为数组中元素的连接符
    • 如果不指定连接符,则默认使用,作为连接符
var arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧"];
var result = arr.join("@-@");

10. reverse() 反转

  1. 该方法用来反转数组(前边的去后边,后边的去前边)
  2. 该方法会直接修改原数组
var arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧"];
arr.reverse();

console.log(arr);

请添加图片描述

11. sort() 排序

1) 简单用法

  1. 可以用来对数组中的元素进行排序
  2. 也会影响原数组,默认会按照 Unicode 编码进行排序
var arr = ["b", "d", "e", "a", "c"];
arr.sort();

2) 自己指定排序规则

  1. 即使对于纯数字的数组,使用 sort()排序时,也会按照 Unicode 编码进行排序
    • 所以对于数组进行排序时,可能会得到错误的的信息
  2. 我们可以在 sort()中添加一个回调函数,来指定排序规则
  3. 回调函数中需要定义两个形参
    • 浏览器将会分别是使用数组中的元素作为实参去调用回调函数
    • 使用哪个元素调用不确定,但是肯定的是在数组中 a 一定在 b 前边
  4. 浏览器会根据回调函数的返回值来决定元素的顺序
    • 如果返回一个大于 0 的值,则元素会交换位置
    • 如果返回一个小于 0 的值,则元素位置不变
    • 如果返回一个 0,则认为两个元素相等,也不交换位置
  5. 排序
    • 如果需要升序排列,则返回 a-b
    • 如果需要降序排列,则返回 b-a
var arr = [5, 4, 2, 1, 3, 6, 8, 7];

arr.sort();
arr.sort(function (a, b) {
  //前边的大
  /* if(a> b){
     	return -1;
     }else if(a < b){
     	return 1;
     }else{
     	return 0;
     } */

  //升序排列
  //return a-b;

  //降序排列
  return b - a;
});

console.log(arr);

请添加图片描述

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

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

相关文章

[附源码]Python计算机毕业设计Django新能源汽车租赁

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;…

全文检索、精准查询、坐标查询、复合查询、排序、分页、高亮

文章目录DSL查询文档DSL查询分类全文检索查询精准查询地理坐标查询复合查询算分函数查询布尔查询搜索结果处理排序单字段 排序多字段 排序地理坐标排序分页高亮RestClient查询文档发起查询请求解析响应match查询精确查询布尔查询排序、分页距离排序高亮高亮请求构建高亮结果解析…

NAT处理流程、分类和使用场景

1、NAT分为源NAT、目的NAT、双向&#xff08;Bidirection&#xff09;NAT 源NAT适用于私网访问公网的情形 目的NAT适用于公网访问私网的情形 双向NAT适用于双方都非真实地址的情形 看下图&#xff0c;第一条匹配源NAT Server&#xff0c;如果匹配则2直接转换目的地址 ---> …

32位单片机存储器中地址膨胀映射作用位带操作和对应地址位置关系

映射的作用 所谓映射&#xff0c;实际上是有另一种控制同一个位置功能的方式。就相当于两个方式操作对一个功能起到相同作用 位带&#xff08;bitband&#xff09;操作:直译出来的&#xff0c;根本意思是将原地址中每一个字节位都扩展成占用一个32bit位的地址&#xff08;一个…

ubuntu18中ISCE2.6+stamps实现PSInSAR时序地表形表处理

一 安装ubuntu 教程参考&#xff1a;https://baijiahao.baidu.com/s?id1741674041146755999&wfrspider&forpc 建议安装18或者20版本&#xff0c;版本过高会导致版本不匹配的问题。 二安装Anaconda3 教程参考&#xff1a;https://zhuanlan.zhihu.com/p/269183148 注意…

[附源码]计算机毕业设计Python4S店汽车售后服务管理系统(程序+源码+LW文档)

该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程 项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等…

RBAC与连表查询

文章目录0. 前言1. RBAC模型1.1 什么是RBAC模型1.2 准备工作2. 连表操作2.1 常用连表图2.2 准备SQL语句2.3 Mybatis 连表3. 总结与补充0. 前言 连表学习、练习经典&#xff1a;RBAC权限模型、5表联查。 本文采用的持久层实现方式&#xff1a;Mybatis/Mybatis-Plus。 学习基础…

QT系列第6节 QT中常用控件

1. QComboBox 下拉列表 2. QPlainTextEdit QPlainTextEdit的文字内容以QTextDocument类型存储&#xff0c;函数document返回这个文档 对象的指针 QTextDocument是内存中的文本对象&#xff0c;以文本块方式存储&#xff0c;每个段落以换行符结束。 QTextDocument提供一些…

常用日期类

第一代日期类 Date类 Date&#xff1a;精确到毫秒&#xff0c;代表特定的瞬间 当需要获取当前时间时可以直接new一个Date对象&#xff0c;使用无参构造器 Date date new Date();日期转文本 但是直接使用的话&#xff0c;它是国外的时间格式&#xff1a;Sat Dec 17 17:02:3…

Apache IoTDB v1.0.0安装试用小结( linux环境)

1 简介 Apache IoTDB 是一个开源物联网时序数据库。 github地址&#xff1a;https://github.com/apache/iotdb 2 下载 下载地址&#xff1a;https://iotdb.apache.org/Download/ 下载&#xff0c;输入命令&#xff1a; wget https://archive.apache.org/dist/iotdb/1.0.…

【简单工厂模式-2】简单工厂模式的代码实现及使用场景

简单工厂模式并属于Gof 23个经典设计模式其中之一&#xff0c;只是通常会将它作为学习其他工厂设计模式的入门&#xff0c;而且在开发中&#xff0c;简单工厂模式也是比较常见的&#xff0c;设计思想比较简单。 1. 定义 简单工厂模式定义一个工厂类&#xff0c;提供获取对象的…

Makefile、.mk、.bp、Blueprint、Soong、kati工具链的关系

一、Android版本相应的发展演变过程: Android 7.0引入ninja和kati Android 8.0使用Android.bp来替换Android.mk&#xff0c;引入Soong Android 9.0强制使用Android.bp 二、生成.ninja工具链关系&#xff1a;Android.bp、Blueprint、Soong、kati&#xff1a;总之都是用来把Make…

数据库拆分4--使用sharding-jdbc来实现水平拆分

有三张表 user log order表&#xff0c;先将user log 和order垂直分库&#xff0c;然后将user表水平拆分 配置文件 spring.shardingsphere.enabledtruespring.shardingsphere.datasource.nameswim-user,wim-orderspring.shardingsphere.datasource.wim-user.typecom.alibaba.…

vue入门--2

1.计算属性和侦听器 计算属性 VS 方法 如果不使用计算属性&#xff0c;在 methods 里定义了一个方法&#xff0c;也可以实现相同的效果&#xff0c;甚至该方法还可以接受参数&#xff0c;使用起来 更灵活。 既然 methods 同样可以解决模板中复杂逻辑计算的问题&#xff0c;那么…

2266. 统计打字方案数-动态规划

2266. 统计打字方案数-动态规划 Alice 在给 Bob 用手机打字。数字到字母的 对应 如下图所示。 为了 打出 一个字母&#xff0c;Alice 需要 按 对应字母 i 次&#xff0c;i 是该字母在这个按键上所处的位置。 比方说&#xff0c;为了按出字母 s &#xff0c;Alice 需要按 7 …

语雀导出markdown的图片外链问题

本文节选自本人博客&#xff1a;https://www.blog.zeeland.cn/archives/rgoioiabeoi32 Introduction 本人因为经常使用语雀写博客&#xff0c;但是因为语雀转markdown的时候图片存在防外链行为&#xff0c;如果想要把转出的markdown发表在其他平台&#xff0c;就需要把md中所有…

计算机毕设Python+Vue邢台市公寓式月亮酒店管理系统(程序+LW+部署)

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

jsp+ssm计算机毕业设计大学生心理咨询网站【附源码】

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; JSPSSM mybatis Maven等等组成&#xff0c;B/S模式 Mave…

java计算机毕业设计springboot+vue地铁站自动售票系统-火车票售票系统

项目介绍 本系统是针对目前地铁站自动售票的实际需求,从实际工作出发,对过去的地铁站自动售票管理系统存在的问题进行分析,完善用户的使用体会。采用计算机系统来管理信息,取代人工管理模式,查询便利,信息准确率高,节省了开支,提高了工作的效率。 本系统结合计算机系统的结构…

Nacos系列——配置的创建与获取

Nacos系列——配置的创建与获取配置的创建与获取本文资源官方文档创建配置获取Nacos配置程序目录1.引入依赖完整pom2.设置yaml3.配置读取类NacosBasedProperties4.构建日志打印工具LoggerUtil5.构建Nacos基础服务类实现6.构建自动化任务实现结果配置的创建与获取 本文资源 ht…