JS---数组的方法

news2024/9/27 15:32:57

一、方法

1.1、Pushing和Poping

  • arr.push(1):往arr数组的最后面压入1,push() 方法返回新数组的长度。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");   // fruits = ["Banana", "Orange", "Apple", "Mango","Kiwi"]
var x =  fruits.push("Kiwi");   //  x 的值是 5
  • arr.pop():从arr数组的最后面删除一个元素,pop() 方法返回“被弹出”的值:。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();   //   fruits=["Banana", "Orange", "Apple"]
var x = fruits.pop();      // x 的值是 "Mango"

1.2、位移元素

  • arr.unshift(1):往arr数组的最前面压入1,(在开头)向数组添加新元素,并“反向位移”旧元素,unshift() 方法返回新数组的长度。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");    // 返回 5,向 fruits 添加新元素 "Lemon"
  • arr.shift():该方法会删除首个数组元素,并把所有其他元素“位移”到更低的索引,shift() 方法返回被“位移出”的字符串。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();      // 返回 "Banana",从 fruits 删除第一个元素 "Banana"

1.3、更改元素

  • 通过使用它们的索引号来访问数组元素
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[0] = "Kiwi";        // 把 fruits 的第一个元素改为 "Kiwi"
  • length 属性提供了向数组追加新元素的简易方法。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Kiwi";          // 向 fruits 追加 "Kiwi"

1.4、删除元素

  • 既然 JavaScript 数组属于对象,其中的元素就可以使用 JavaScript delete 运算符来删除。
  • 使用 delete 会在数组留下未定义的空洞。请使用 pop() 或 shift() 取而代之。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0];           // 把 fruits 中的首个元素改为 undefined

1.5、拼接数组

  • splice() 方法可用于向数组添加新项
    • splice() 方法返回一个包含已删除项的数组:
    • 第一个参数(2)定义了应添加新元素的位置(拼接)。
    • 第二个参数(2)定义应删除多少个元素。
    • 其余参数(“Lemon”,“Kiwi”)定义要添加的新元素。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 2, "Lemon", "Kiwi");
//新数组=["Banana","Orange","Lemon","Kiwi"]
//fruits.splice(2, 2, "Lemon", "Kiwi")=["Apple", "Mango"]
  • 使用 splice() 来删除元素:通过聪明的参数设定,您能够使用 splice() 在数组中不留“空洞”的情况下移除元素
    • 第一个参数(0)定义新元素应该被添加(接入)的位置。
    • 第二个参数(1)定义应该删除多个元素。
    • 其余参数被省略。没有新元素将被添加。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1);        // 删除 fruits 中的第一个元素

1.6、合并(连接)数组

  • concat() 方法通过合并(连接)现有数组来创建一个新数组
    • concat() 方法不会更改现有数组。它总是返回一个新数组。
    • concat() 方法可以使用任意数量的数组参数:
var arr1 = ["Cecilie", "Lone"];
var arr2 = ["Emil", "Tobias", "Linus"];
var arr3 = ["Robin", "Morgan"];
var myChildren = arr1.concat(arr2, arr3);   // 将arr1、arr2 与 arr3 连接在一起
  • concat() 方法也可以将值作为参数(将数组与值合并)
var arr1 = ["Cecilie", "Lone"];
var myChildren = arr1.concat(["Emil", "Tobias", "Linus"]); 

1.7、裁剪数组

  • slice() 方法用数组的某个片段切出新数组
    • slice() 方法创建新数组。它不会从源数组中删除任何元素
    • 本例从数组元素 1 (“Orange”)开始切出一段数组
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1); //citrus = ["Orange", "Lemon", "Apple", "Mango"]
  • slice() 可接受两个参数,比如 (1, 3),该方法会从开始参数选取元素,直到结束参数(不包括)为止。
    • 表示从1开始到3结束(不包括3)
    • 如果结束参数被省略,比如第一个例子,则 slice() 会切出数组的剩余部分
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1, 3); //citrus=["Orange","Lemon"]

1.8、自动 toString()

所有 JavaScript 对象都拥有 toString() 方法。

  • toString():把数组转换为数组值(逗号分隔)的字符串。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString(); 
//结果:Banana,Orange,Apple,Mango

在这里插入图片描述

  • join() 方法也可将所有数组元素结合为一个字符串,但是这个您还可以规定分隔符。
var fruits = ["Banana", "Orange","Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * "); 
//结果:Banana * Orange * Apple * Mango

1.9、数组排序

  • sort() 方法以字母顺序对数组进行排序
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();            // 对 fruits 中的元素进行排序

1.10、反转数组

  • reverse() 方法反转数组中的元素。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();            // 对 fruits 中的元素进行排序
fruits.reverse();         // 反转元素顺序

1.11、数字排序

默认地,sort() 函数按照字符串顺序对值进行排序。该函数很适合字符串(“Apple” 会排在 “Banana” 之前)。不过,如果数字按照字符串来排序,则 “25” 大于 “100”,因为 “2” 大于 “1”。正因如此,sort() 方法在对数值排序时会产生不正确的结果。我们通过一个比值函数来修正此问题:

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b}); //1,5,10,25,40,100

使用相同的技巧对数组进行降序排序:

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b - a}); //100,40,25,10,5,1

1.12、比值函数

比较函数的目的是定义另一种排序顺序。
比较函数应该返回一个负,零或正值,这取决于参数:
function(a, b){return a-b}
当 sort() 函数比较两个值时,会将值发送到比较函数,并根据所返回的值(负、零或正值)对这些值进行排序。
实例:
当比较 40 和 100 时,sort() 方法会调用比较函数 function(40,100)。
该函数计算 40-100,然后返回 -60(负值)。
排序函数将把 40 排序为比 100 更低的值。
您可以使用下面的代码片段来测试数值和字母排序:

<button onclick="myFunction1()">以字母顺序排序</button>
<button onclick="myFunction2()">以数字顺序排序</button>

<p id="demo"></p>

<script>
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;

function myFunction1() {
		points.sort();
		document.getElementById("demo").innerHTML  = points;
}
function myFunction2() {
		points.sort(function(a, b){return  a - b});
		document.getElementById("demo").innerHTML = points;
}
</script>

1.13、查找数组最值

Math.max.apply([1, 2, 3]) 等于 Math.max(1, 2, 3)。
Math.min.apply([1, 2, 3]) 等于 Math.min(1, 2, 3)。

  • 您可以使用 Math.max.apply 来查找数组中的最高值:
function myArrayMax(arr) {
    return Math.max.apply(null, arr);
}
  • 您可以使用 Math.min.apply 来查找数组中的最低值:
function myArrayMin(arr) {
    return Math.min.apply(null, arr);
}

二、数组迭代

数组迭代方法对每个数组项进行操作

2.1、Array.forEach()

当回调函数仅使用 value 参数时,可以省略索引和数组参数:

  • forEach() 方法为每个数组元素调用一次函数(回调函数)。
var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
function myFunction(value, index, array) {
  txt = txt + value + "<br>"; 
}
//45
//4
//9
//16
//25
  • 注释:该函数接受 3 个参数:
    项目值
    项目索引
    数组本身

2.2、Array.map()

  • map() 方法通过对每个数组元素执行函数来创建新数组。
  • map() 方法不会对没有值的数组元素执行函数。
  • map() 方法不会更改原始数组。
  • 这个例子将每个数组值乘以2:
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);

function myFunction(value, index, array) {
  return value * 2;     //90,8,18,32,50
}

当回调函数仅使用 value 参数时,可以省略索引和数组参数:

var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);

function myFunction(value) {
  return value * 2;     //90,8,18,32,50
}

2.3、Array.filter()

当回调函数仅使用 value 参数时,可以省略索引和数组参数:

  • filter() 方法创建一个包含通过测试的数组元素的新数组。
  • 这个例子用值大于 18 的元素创建一个新数组:
var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);

function myFunction(value, index, array) {
  return value > 18;    //45,25
}

2.4、Array.reduce()

  • reduce() 方法在每个数组元素上运行函数,以生成(减少它)单个值。
  • reduce() 方法在数组中从左到右工作。另请参阅 reduceRight()。
  • reduce() 方法不会减少原始数组。
  • 这个例子确定数组中所有数字的总和:
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);

function myFunction(total, value, index, array) {
  return total + value;   //99
}

请注意此函数接受 4 个参数:
总数(初始值/先前返回的值),项目值,项目索引,数组本身
上例并未使用 index 和 array 参数,因此可以将其省略

  • reduce() 方法能够接受一个初始值:
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction, 100);

function myFunction(total, value) {
  return total + value;    //199
}

2.5、Array.every()

  • every() 方法检查所有数组值是否通过测试,与filter一样

2.6、Array.indexOf()

  • indexOf() 方法在数组中搜索元素值并返回其位置。
  • array.indexOf(item, start)
    • item:必需。要检索的项目。
    • start:可选。从哪里开始搜索。负值将从结尾开始的给定位置开始,并搜索到结尾。
var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");    //1

2.7、Array.lastIndexOf()

  • Array.lastIndexOf() 与 Array.indexOf() 类似,但是从数组结尾开始搜索。
  • array.lastIndexOf(item, start)

2.8、Array.findIndex()

  • findIndex() 方法返回通过测试函数的第一个数组元素的索引。
  • 这个例子查找大于 18 的第一个元素的索引:
var numbers = [4, 9, 16, 25, 29];
var first = numbers.findIndex(myFunction);

function myFunction(value, index, array) {
  return value > 18;    //3
}

请注意此函数接受 3 个参数:
项目值,项目索引,数组本身

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

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

相关文章

Ruoyi-Cloud框架学习-【04 用户登录】

前端 路由配置在router/index.js里 首页在views/index.vue4 前端端口与后台端口在vue.config.js里定义 vue.config.js 前台端口 后台端口 Ruoyi-Cloud登录流程 Login.vue 定义了登录handlerlogin&#xff0c;具体方法调用modules/user.js store/index.js 调用了modul…

【Stm32杂谈】:Stm32F103野火指南针开发板红外遥控程序问题记录和解析(个人理解)

项目场景&#xff1a; 最近在使用Stm32F103野火指南针开发板开发红外遥控外设得时候&#xff0c;用得是野火得开发板&#xff0c;本来发现应该很简单的事情&#xff0c;官方也很贴切的提供了官方例程。但是居然有问题&#xff0c;无法正常使用。 于是这篇文章应运而生&#xff…

环保数采仪 5G无线环保数采仪 智能环保数采仪

计讯物联智能环保数采仪&#xff0c;无线远距离数据传输、采集、控制、存储。支持全网通5G/4G移动网络、北斗、有线通信&#xff0c;数据上报云监控中心&#xff0c;支持GPS定位分散设备远程统一管理。支持环保协议&#xff0c;对接各省市县级监管平台&#xff0c;广泛应用于废…

Kubernetes集群搭建

Kubernetes集群搭建 目录 前言前期准备K8S集群安装 虚拟机设置安装K8S集群k8s部署Nginx 附录1 Docker安装附录2 yum k8s 问题附录3 k8s start问题附录4 k8s master init附录5 node节点添加进集群失败&#xff0c;可以删除节点重新添加 前言 本文指定Docker与K8s版本&#xf…

DynaSLAM-3 DynaSLAM中Mask R-CNN部分源码解析(Ⅱ)

目录 1.FPN 1.1 FPN层原理 1.2 FPN代码解析 2. 候选框的生成 2.1 根据特征图生成候选框 1.FPN 1.1 FPN层原理 在Faster R-CNN网络中&#xff0c;提取特征的时候&#xff0c;将原始数据经过一系列的卷积层&#xff0c;我们只用最后一层的特征图进行提取。 比如五层卷积神经…

C++(36)-VS2019- 动态库调用

1.被调用的动态库 MyDll 2.调用的可执行文件 MyExe 源码实例链接&#xff1a;MFC-VS2019-EXE调用DLL-demo.zip-C代码类资源-CSDN下载 1.MyDll 1.1 MyDll头文件&#xff1a;MyDll.h 声明此动态库为导出动态库。 声明导出函数。 #pragma once#define MYDECLARE_PUB…

【05】FreeRTOS的中断管理

目录 1.什么是中断 2.中断优先级分组 2.1中断优先级分组-介绍 2.2中断优先级分组-配置 2.3中断优先级分组-特点 3.中断相关寄存器 3.1寄存器地址 3.2在FreeRTOS中配置PendSV和Systick中断优先级 3.3中断相关寄存器 4.FreeRTOS中断管理实验 4.1修改freertos_demo.c …

2023.1.30作业-【尝试移植TF-A】

1、解压源码&#xff0c;进入目录如图一 2、解压源码包 3、进入解压后的目录&#xff0c;打入官方补丁 4、查看SD卡的分区&#xff0c;发现正常无需重新分区 5、导入编译工具查看是否正常导入 6、添加设备树等相关文件 7、修改上层目录下的 Makefile.sdk中添加 stm32mp157a-fsm…

chatGPT模型简介

ChatGPT的工作原理 chatGPT 是一款由 OpenAI 开发的聊天机器人模型&#xff0c;它能够模拟人类的语言行为&#xff0c;与用户进行自然的交互。它的名称来源于它所使用的技术—— GPT-3架构&#xff0c;即生成式语言模型的第3代。 chatGPT的核心技术是 GPT-3 架构。它通过使用大…

vue 自动生成swagger接口请求文件

前端: vue-element-admin 后端: .net core (6.0) 找了很多自动生成的代码的&#xff0c;感觉不太行&#xff0c;可能是我不太懂。所以自己根据swagger.json去生成了js请求文件。 后端很简单&#xff0c;就不说了&#xff0c;只要能访问到swagger的地址就可以&#xff0c;主要…

【My Electronic Notes系列——低频功率放大器】

目录 序言&#xff1a; &#x1f3c6;&#x1f3c6;人生在世&#xff0c;成功并非易事&#xff0c;他需要破茧而出的决心&#xff0c;他需要永不放弃的信念&#xff0c;他需要水滴石穿的坚持&#xff0c;他需要自强不息的勇气&#xff0c;他需要无畏无惧的凛然。要想成功&…

【自学Docker】Docker rename命令

Docker rename命令 大纲 docker rename命令教程 docker rename 命令可以用于重命名一个 Docker容器。docker rename命令后面的 CONTAINER 可以是容器Id&#xff0c;或者是容器名。 docker rename语法 haicoder(www.haicoder.net)# docker rename CONTAINER NEW_NAME案例 重…

【Kubernetes 企业项目实战】05、基于云原生分布式存储 Ceph 实现 K8s 数据持久化(下)

目录 一、K8s 对接 ceph rbd 实现数据持久化 1.1 k8s 安装 ceph 1.2 创建 pod 挂载 ceph rbd 二、基于 ceph rbd 生成 pv 2.1 创建 ceph-secret 2.2 创建 ceph 的 secret 2.3 创建 pool 池 2.4 创建 pv 2.5 创建 pvc 2.6 测试 pod 挂载 pvc 2.7 注意事项 1&#xf…

软考高项—第一章信息系统项目管理基础

项目特点 1、临时性&#xff1a;有明确的开始时间和结束时间 2、独特的产品、可交付成果 3、逐步完善&#xff1a;项目团队从开始的粗略计划到详细计划&#xff0c;在到完成项目 4、资源约束&#xff1a;每个项目都需要各种资源保证&#xff0c;资源是有限的 5、目的性&#x…

C语言重点复习大纲

目录数据存储(3星)判断大小端写一个函数判断大小端截断与整形提升数组和指针(5星)几个特殊的指针数组传参字符串数组库函数的实现(4星)atoi与itoamemcpy与memmove内存重叠自定义类型(4星)内存对齐结构体&#xff0c;联合体&#xff0c;枚举位段编译链接(3星)编译和链接的过程条…

循环队列实现---kfifo

循环队列 概述 在优化系统性能时&#xff0c;我们通常需要分析一个单线程程序各模块的功能和性能&#xff0c;然后将这些模块拆分到多个线程中并行执行。而多个线程之间需要加入缓存以实现线程间的通信。如图1所示&#xff1a; 图1&#xff1a;多线程缓存为方便进程间通信&am…

Python【xpath】实战下

项目要求&#xff1a;获取某二手租房平台关于房源信息的简介和价格代码&#xff1a;python编写&#xff0c;实现需要准备的第三方库&#xff1a;requests &#xff0c;lxml&#xff0c; time代码分析&#xff1a;导入需要使用的第三方库&#xff1a;import requests import tim…

java ssm校园快递代领系统的设计与实现idea maven

近几年随着国民经济的不断发展&#xff0c;电子商务行业的不断创新。作为物流业一个重要分支的校园快递代领逐渐兴起&#xff0c;各种快递公司层出不穷。校园快递代领在不断向前发展的同时也存在一些无法避免的小问题&#xff0c;例如许多小型的快递公司在信息处理和管理上存在…

基于微信小程序的民宿短租系统小程序

文末联系获取源码 开发语言&#xff1a;Java 框架&#xff1a;ssm JDK版本&#xff1a;JDK1.8 服务器&#xff1a;tomcat7 数据库&#xff1a;mysql 5.7/8.0 数据库工具&#xff1a;Navicat11 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a;Maven3.3.9 浏览器…

Spring Boot Actuator详解

Actuator简介 什么是Spring Boot Actuator&#xff1f; Spring Boot Actuator 模块提供了生产级别的功能&#xff0c;比如健康检查&#xff0c;审计&#xff0c;指标收集&#xff0c;HTTP跟踪等&#xff0c;帮助我们监控和管理Spring Boot应用。这个模块是一个采集应用内部信…