javascript数组的常用方法汇总

news/2024/9/23 5:12:59 标签: javascript, 开发语言, ecmascript

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

1. 添加/删除元素

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

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

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

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

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

    javascript">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)的浅拷贝新数组,不修改原数组。

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

2. 查找元素

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

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

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

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

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

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

3. 迭代和遍历

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

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

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

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

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

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

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

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

4. 数组排序和变换

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

    字符串数组排序

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

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

    javascript">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 ]
    

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

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

    如果想要倒序

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

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

    javascript">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():反转数组顺序,会修改原数组。

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

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

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

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

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

5. 其他常用方法

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

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

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

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

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

http://www.niftyadmin.cn/n/5671382.html

相关文章

黎巴嫩BP机爆炸事件启示录:我国应加快供应链安全立法

据报道,当地时间9月17日下午,黎巴嫩首都贝鲁特以及黎巴嫩东南部和东北部多地都发生了BP机爆炸事件。当时的统计数据显示,爆炸造成9人死亡,约2800人受伤。9月18日,死亡人数上升到11人,受伤人数超过4000。 目…

PHP转Go很丝滑开发框架设计思路-把php优秀设计借鉴到Go框架设计里面-保留php开发习惯又能提供高软件性能

框架从以下设计要求使得达到有快速开发有又保证软件性能。框架要满足我们追求的大道至简、简单易容、减少开发者心智负担、快乐开发目标。 框架代码结构简单 框架设计的结构一定要简单,简单才能让新手容易上手、后续代码维护成本低、集成大项目才容易(…

C语言6大常用标准库 -- 2.<stdlib.h>

目录 引言 2. C标准库--stdlib.h 2.1 简介 2.2 库变量 2.3 库宏 2.4 库函数 2.5 注意事项 🌈你好呀!我是 程序猿 🌌 2024感谢你的陪伴与支持 ~ 🚀 欢迎一起踏上探险之旅,挖掘无限可能,共同成长&…

银河麒麟桌面操作系统如何添加WPS字体

银河麒麟桌面操作系统如何添加WPS字体 1、使用场景2、操作方法步骤一:下载字体文件步骤二:打开终端步骤三:进入字体文件所在目录步骤四:拷贝字体文件到WPS字体目录步骤五:更新字体缓存步骤六:重启WPS Offic…

计算机毕业设计springboot+vue高校教学实施评教系统springcloud微服务分布式

目录 功能和技术介绍系统实现截图开发核心技术介绍:使用说明开发步骤编译运行需求分析系统设计软件测试核心代码部分展示详细视频演示源码获取 功能和技术介绍 本项目包含程序源码和MySql脚本和文档,idea开发,支持Eclipse。使用vue的本质是SpringFramework【IoC&am…

Win11家庭版找不到gpedit.msc文件怎么办

首先确定电脑系统。 winI打开设置。 点击系统-系统信息,可以看到系统的版本 如果是家庭版,没有gpedit.msc文件,执行以下步骤 首先我们打开记事本,并输入以下内容(注意空格): echo offpushd &qu…

【.NET 8 实战--孢子记账--从单体到微服务】--用户(删除/修改/查询)

本文将继续讲解和用户相关的接口,包括用户的删除、修改和查询 一、需求 我们先来看一下这篇文章的目标也就是需求表: 编号需求标题需求内容1删除对某一个用户进行删除,注意:只能删除用户,和用户相关联的数据不能删除…

分布式项目-开盒头条

开盒头条 前言 只懂得技术理论是远远不够的,还需要熟练掌握很多业务功能逻辑的实现,这样才能真正的提高自己的开发水平。因此,我新开了这个专栏,专门做项目,教给大家很多业务功能实现的逻辑以及在实现这些业务功能时…