javascript数组的常用方法汇总

news2024/9/22 12:48:17

在 JavaScript 中,数组是一个非常常用的数据结构,JavaScript 提供了许多方法来操作和处理数组。以下是 JavaScript 中数组的常用方法,分为不同类型进行介绍:

1. 添加/删除元素

  • push():向数组末尾添加一个或多个元素,返回数组的新长度。

    let arr = [1, 2, 3];
    arr.push(4); // arr = [1, 2, 3, 4]
    
  • pop():移除并返回数组最后一个元素。

    let arr = [1, 2, 3];
    let last = arr.pop(); // arr = [1, 2], last = 3
    
  • unshift():向数组开头添加一个或多个元素,返回数组的新长度。

    let arr = [2, 3];
    arr.unshift(1); // arr = [1, 2, 3]
    
  • shift():移除并返回数组第一个元素。

    let arr = [1, 2, 3];
    let first = arr.shift(); // arr = [2, 3], first = 1
    
  • splice(start, deleteCount, item1, item2, ...):从数组中删除、添加或替换元素。返回被删除的元素数组。

    let arr = [1, 2, 3, 4, 5];
    arr.splice(1, 2); // 删除从索引 1 开始的 2 个元素,arr = [1, 4, 5]
    arr.splice(2, 0, 6, 7); // 在索引 2 处插入 6 和 7,arr = [1, 4, 6, 7, 5]
    
  • slice(start, end):返回从 startend(不包括 end)的浅拷贝新数组,不修改原数组。

    let arr = [1, 2, 3, 4, 5];
    let newArr = arr.slice(1, 3); // newArr = [2, 3]
    

2. 查找元素

  • indexOf(item):返回元素在数组中的第一个索引,找不到则返回 -1

    let arr = [1, 2, 3, 4];
    arr.indexOf(3); // 2
    
  • lastIndexOf(item):返回元素在数组中的最后一个索引,找不到则返回 -1

    let arr = [1, 2, 3, 2];
    arr.lastIndexOf(2); // 3
    
  • includes(item):判断数组是否包含某个元素,返回布尔值。

    let arr = [1, 2, 3];
    arr.includes(2); // true
    
  • find(callback):返回满足条件的第一个元素,找不到则返回 undefined

    let arr = [1, 2, 3, 4];
    let found = arr.find(num => num > 2); // 3
    
  • findIndex(callback):返回满足条件的第一个元素的索引,找不到则返回 -1

    let arr = [1, 2, 3, 4];
    let foundIndex = arr.findIndex(num => num > 2); // 2
    

3. 迭代和遍历

  • forEach(callback):对数组中的每个元素执行一次提供的函数(不会返回新数组)。

    let arr = [1, 2, 3];
    arr.forEach(num => console.log(num)); // 输出:1 2 3
    
  • map(callback):对数组中的每个元素执行提供的函数,返回新的数组。

    let arr = [1, 2, 3];
    let newArr = arr.map(num => num * 2); // newArr = [2, 4, 6]
    
  • filter(callback):返回满足条件的元素组成的新数组。

    let arr = [1, 2, 3, 4];
    let filteredArr = arr.filter(num => num > 2); // filteredArr = [3, 4]
    
  • some(callback):如果数组中至少有一个元素满足条件,则返回 true,否则返回 false

    let arr = [1, 2, 3];
    arr.some(num => num > 2); // true
    
  • every(callback):如果数组中每个元素都满足条件,则返回 true,否则返回 false

    let arr = [1, 2, 3];
    arr.every(num => num > 0); // true
    
  • reduce(callback, initialValue):将数组元素组合为一个值,callback 接收四个参数:累计值、当前值、当前索引和原数组。initialValue 是可选的初始累计值。

    let arr = [1, 2, 3, 4];
    let sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0); // sum = 10
    
  • reduceRight(callback, initialValue):从数组的末尾开始执行 reduce 操作。

    let arr = [1, 2, 3, 4];
    let sum = arr.reduceRight((accumulator, currentValue) => accumulator + currentValue, 0); // sum = 10
    

4. 数组排序和变换

  • sort(compareFunction):对数组进行排序,会修改原数组。compareFunction 可选,用于自定义排序规则。

    字符串数组排序

    let fruits = ['banana', 'apple', 'mango'];
    fruits.sort();
    console.log(fruits); // 输出 ['apple', 'banana', 'mango']
    

    数字数组排序
    对于数字数组,默认排序可能会给出错误的结果,因为默认是将所有值转换成字符串再排序

    let numbers = [8, 2, 3, 5, 1, 10];
    numbers.sort(); // 默认转换为字符串排序,结果可能不是期望的 [1, 2, 3, 5, 8, 10]
    console.log(numbers); // 输出[ 1, 10, 2, 3, 5, 8 ]
    

    为了正确地对数字进行排序,应该提供一个比较函数

    let numbers = [8, 2, 3, 5, 1, 10];
    numbers.sort((a, b) => a - b); 
    console.log(numbers); // 输出[1, 2, 3, 5, 8, 10]
    

    如果想要倒序

    let numbers = [8, 2, 3, 5, 1, 10];
    numbers.sort((a, b) => b - a); 
    console.log(numbers); // 输出[10, 8, 5, 3, 2, 1]
    

    对象数组排序
    如果你有一个对象数组,并且想要根据某个属性来排序这些对象,可以这样做:

    let people = [
      { name: 'John', age: 23 },
      { name: 'Jane', age: 29 },
      { name: 'Jack', age: 27 }
    ];
    
    // 按年龄排序
    people.sort((a, b) => a.age - b.age);
    console.log(people);
    // 输出:
    // [
    //   { name: 'John', age: 23 },
    //   { name: 'Jack', age: 27 },
    //   { name: 'Jane', age: 29 }
    // ]
    
  • reverse():反转数组顺序,会修改原数组。

    let arr = [1, 2, 3];
    arr.reverse(); // arr = [3, 2, 1]
    
  • join(separator):将数组元素连接成字符串,separator 是可选的分隔符。

    let arr = [1, 2, 3];
    let str = arr.join('-'); // str = "1-2-3"
    
  • concat():合并两个或多个数组,返回新数组,不修改原数组。

    let arr1 = [1, 2];
    let arr2 = [3, 4];
    let newArr = arr1.concat(arr2); // newArr = [1, 2, 3, 4]
    
  • flat(depth):将多维数组“拉平”到指定的深度,默认深度为 1。

    let arr = [1, [2, [3, [4]]]];
    let flatArr = arr.flat(2); // flatArr = [1, 2, 3, [4]]
    
  • flatMap(callback):对每个元素调用映射函数,然后将结果“拉平”一层。

    let arr = [1, 2, 3];
    let flatMapped = arr.flatMap(num => [num, num * 2]); // flatMapped = [1, 2, 2, 4, 3, 6]
    

5. 其他常用方法

  • Array.isArray():检查一个值是否为数组。

    Array.isArray([1, 2, 3]); // true
    
  • fill(value, start, end):用指定值填充数组,startend 是可选的起始和结束位置(不包括结束位置)。

    let arr = [1, 2, 3, 4];
    arr.fill(0, 1, 3); 
    console.log(arr) // 会改变原数组输出:[1, 0, 0, 4]
    
  • from():从类数组或可迭代对象创建一个新数组。

    let arr = Array.from('hello'); 
    console.log(arr) // 输出:['h', 'e', 'l', 'l', 'o']
    
  • of():根据给定的参数创建一个新数组。

     let arr = Array.of(1, 2, 3); 
     console.log(arr) // [ 1, 2, 3 ]
    

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

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

相关文章

通过FUXA在ARMxy边缘计算网关上实现生产优化

在当今工业4.0时代,智能制造的需求日益增长,企业迫切需要通过数字化转型来提高生产效率、降低成本并增强市场竞争力。ARMxy系列的BL340工业级ARM控制器,凭借其强大的处理能力和灵活的配置选项,成为实现生产优化的重要基础。 一、…

【MySQL】—— mysqlcheck表维护程序

目录 (一)作用 (二)使用方法 (三)常用选项 (四)注意事项 (五)mysqlcheck的特殊说明 (一)作用 mysqlcheck 是 MySQL 数据库系统的一…

LeetcodeLCR 116. 省份数量

文章目录 题目原题链接思路 题目 原题链接 LCR 116. 省份数量 思路 利用并查集的思想,将连接的诚实放在一个集合当中,最后遍历并查集数组判断有几颗树 初始化一个并查集;将连通的城市合并;统计并查集中树的个数; C代…

2024.9.16 - 2024.9.22组会报告

通信延迟下车辆协同感知的3D目标检测方法 计算机工程与应用学报 论文要解决什么问题? 车辆协同感知 3D 目标检测在通信延迟条件下精度较低,所以论文想要降低通信延迟对协同感知精度的影响。 论文提出了什么方法? 一种通信延迟下车辆协同…

基于javassm课程实验教学系统设计

开发语言:Java 框架:ssm JDK版本:JDK1.8 服务器:tomcat7 数据库:mysql 5.7(一定要5.7版本) 数据库工具:Navicat11 开发软件:eclipse/myeclipse/idea Maven包&…

Apache CVE-2021-41773 漏洞攻略

漏洞简介 该漏洞是由于Apache HTTP Server 2.4.49版本存在⽬录穿越漏洞,在路径穿越⽬录 <Directory/>Require all granted</Directory>允许被访问的的情况下&#xff08;默认开启&#xff09;&#xff0c;攻击者可利⽤该路径穿越漏洞读取到Web⽬录之外的其他⽂件在…

nvm 下载node报错:Could not retrieve https://nodejs.org/dist/index.json.

报错信息&#xff1a;Could not retrieve https://nodejs.org/dist/index.json. Get "https://nodejs.org/dist/index.json": dial tcp 104.20.23.46:443: i/o timeout 这是因为node源都是国外的服务&#xff0c;连接超时&#xff0c;所以我们把node源设置为国内的镜…

数字图像中感兴趣区域的面积计算一般方法及MATLAB实现

一、引言 在数字图像处理中&#xff0c;经常需要获取感兴趣区域的面积属性&#xff0c;下面给出图像处理的一般步骤。 1.读入的彩色图像 2.将彩色图像转化为灰度图像 3.灰度图像转化为二值图像 4.区域标记 5.对每个区域的面积进行计算和显示 二、程序代码 %面积计算 cle…

从零开始:在VSCode中打造完美的C++开发环境

在现代软件开发中&#xff0c;选择一个合适的集成开发环境 (IDE) 至关重要&#xff0c;它不仅能够提高工作效率&#xff0c;还能让编程变得更加轻松愉快。VSCode 凭借其轻量化、高度扩展性以及强大的插件生态&#xff0c;已成为众多开发者的首选。然而&#xff0c;要在 VSCode …

yolov8道路缺陷检测-道路坑洞检测-道路裂缝检测

路面裂缝检测是计算机视觉在基础设施维护中的一个重要应用。使用 YOLOv8 进行路面裂缝检测的过程与绝缘子检测类似&#xff0c;包括数据准备、模型训练和部署。下面是一个详细的流程&#xff0c;包括代码示例。 1. 数据准备 数据收集 图像采集&#xff1a;通过无人机、车载摄…

电脑文件防泄密软件哪个好?这六款软件建议收藏【精选推荐】

在数字时代&#xff0c;文件泄密简直像是每个电脑用户的噩梦。 你可能还没意识到&#xff0c;重要的商业机密、个人隐私文件分分钟都可能成为他人的“囊中物”。 尤其是在公司办公或远程工作环境下&#xff0c;随便一个操作失误&#xff0c;都会导致数据流向“未知领域”。 所…

【开源免费】基于SpringBoot+Vue.JS图书馆管理系统(JAVA毕业设计)

本文项目编号 T 044 &#xff0c;文末自助获取源码 \color{red}{T044&#xff0c;文末自助获取源码} T044&#xff0c;文末自助获取源码 目录 一、系统介绍二、演示录屏三、启动教程四、功能截图五、文案资料5.1 选题背景5.2 国内外研究现状5.3 可行性分析5.4 用例设计 六、核…

C语言中易混淆概念的关键字

最快的关键字---- register register&#xff1a; 这个关键字请求编译器尽可能的将变量存在 CPU 内部寄存器中而不是通过内 存寻址访问以提高效率。注意是尽可能&#xff0c;不是绝对。你想想&#xff0c;一个 CPU 的寄存器也就那么 几个或几十个&#xff0c;你要是定义了很多很…

智能仓库|基于springBoot的智能无人仓库管理设计与实现(附项目源码+论文+数据库)

私信或留言即免费送开题报告和任务书&#xff08;可指定任意题目&#xff09; 目录 一、摘要 二、相关技术 三、系统设计 四、数据库设计 五、核心代码 六、论文参考 七、源码获取 一、摘要 互联网发展至今&#xff0c;无论是其理论还是技术都已经成熟&#xf…

《当人工智能考上名校》:拥抱变化,让自己无可替代

01 说起人工智能&#xff0c;你会想起什么呢&#xff1f; 2016年3月&#xff0c;谷歌&#xff08;Google&#xff09;旗下DeepMind公司人工智能机器人阿尔法狗&#xff08;AlphaGo&#xff09;与围棋世界冠军、职业九段棋手李世石进行围棋人机大战&#xff0c;以4比1的总比分获…

打开C嘎嘎的大门:你好,C嘎嘎!(2)

前言&#xff1a; 小编在今天已经学完了C嘎嘎的入门知识了&#xff0c;在自己敲了一遍代码以后&#xff0c;开始今天这篇代码的书写了&#xff0c;以加强我的记忆&#xff0c;下面废话不多说开始进入今天的讲解环节&#xff1a; 目录&#xff1a; 1.缺省参数 1.1.缺省参数的概…

【416】【举报垃圾信息】

这题倒挺简单的 注意一下映射关系&#xff0c;再使用字典即可。 class Solution:def reportSpam(self, message: List[str], bannedWords: List[str]) -> bool:nlen(message)if n1:return Falsedictdefaultdict(int)num0for a in message:dict[a]1for b in bannedWords:if…

NXP实战笔记(十六):NXP 32K3xx系列单片机有关OTA升级的思考

目录 1、概述 2、参考资料 3、思考点1&#xff1a;需不需要传统BootLoader&#xff1f; 3.1、无需传统BootLoader 3.2、有传统BootLoader 4、OTA升级之后是否立即实施切换 5、兼容编程会话 6、APP内部集成34、36、37服务 7、Flash放置问题 1、概述 NXP的S32K3系列单片机…

江协科技STM32学习- P16 实验-TIM输出比较(PWD驱动LED呼吸灯,舵机,直流电机)

&#x1f680;write in front&#x1f680; &#x1f50e;大家好&#xff0c;我是黄桃罐头&#xff0c;希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流 &#x1f381;欢迎各位→点赞&#x1f44d; 收藏⭐️ 留言&#x1f4dd;​…

Redisson 总结

1. 基础使用 1.1 引入依赖 <dependencies><dependency><groupId>org.redisson</groupId><artifactId>redisson-spring-boot-starter</artifactId></dependency> </dependencies>包含的依赖如下 1.2 配置文件 其实默认主机就…