JavaScript数组常用方法详解:增删改查与遍历

作者:函数茶馆时间:2026-10-24 23:21:41浏览:654

本文系统梳理了JavaScript中常用的数组操作方法,涵盖push、pop、shift、unshift等增删元素方法,slice与splice的截取与替换,以及sort、reverse等排序反转技巧。同时深入解析indexOf、includes等查找方法,以及every、some、find、filter、map、reduce等高级遍历与转换函数,帮助开发者全面掌握数组处理的核心技能。

学习这些方法时,建议从以下五个维度进行掌握。

第一,明确该方法的具体功能。

第二,确认调用者,即该方法适用于数组对象。

第三,关注返回值类型及其具体内容。

第四,判断该方法是否会修改原始数组对象。

第五,掌握实际代码中的使用方式。

以下是具体的方法详解。

1. push:用于向数组末尾添加一个或多个元素,返回新数组的长度。

arr.push(200)
arr.push(200,2,32)

2. pop:用于删除数组最后一个元素,无需参数,返回被删除的元素。

arr.pop()

3. unshift:用于向数组开头添加一个或多个元素,返回新数组的长度。

arr.unshift(1)arr.unshift(1,2)arr.unshift(1)
arr.unshift(1,2)

4. shift:用于删除数组第一个元素,返回被删除的元素。

arr.shift()

5. concat:用于合并两个或多个数组,返回新数组,原数组保持不变。

let arr1 = [1,2]
let arr2 = [2,3]
arr1.concat(arr2)
console.log(arr1); // [1,2]
console.log(arr1.concat(arr2)); // [1,2,2,3]

6. reverse:用于将数组元素顺序颠倒,返回新数组,原数组被修改。

arr.reverse()

7. slice:用于截取数组的一部分,包含起始索引,不包含结束索引,返回新数组,原数组不变。

let arr = [1,2,3,4,5,6]
// 填两个参数 a,b 从a截取到b 不包括b
// 填一个参数 a 从a截取到末尾
// 不填参数 从0截取到最后
//截取arr 里面的 3-5 也就是数组下标2-4 但是第二个参数不包括 所以就是 2-5
arr.slice(2,5)

8. splice:用于添加或删除数组元素,返回被删除元素组成的数组,原数组被修改。

//用法 splice(a,b,c)
//a 表示添加或者删除的开始的下标
//b 表示删除的个数 不想删除只想添加 b写成0
//c 表示添加的元素 添加的元素可以是多个 c,d,e 不添加就不用写c
var arr = [1,2,3,4,5,6]
// 把4删除 换成10
arr.splice(3,1,10)

9. join:用于将数组元素连接为字符串,默认以逗号分隔,返回拼接后的字符串,原数组不变。

let arr = [1,2,3,4,5,6]
arr.join()
arr.join('-')

10. indexOf:用于查找指定元素在数组中的首次出现索引,存在则返回索引值,不存在返回-1,原数组不变。

let arr = [1,2,3,4,5,6]  
let ind = arr.indexOf(5)

11. lastIndexOf:功能同indexOf,但搜索方向为从后向前。

12. includes:用于检测数组是否包含指定元素,存在返回true,否则返回false,用法类似indexOf。

13. sort:用于对数组元素进行排序,返回排序后的数组,原数组被修改。

// 汉字看笔画 英文字母看因为字母顺序
// 默认排序是按照首字符的顺序开始排序的
let arr = [2,3,5,4,9,6]
arr.sort()
//sort可以写函数
// a,b 代表的就是数组中相邻的两个数
// 从小到大排
arr.sort(function(a,b){
    return a - b
})

14. every:用于检测数组中所有元素是否都满足指定条件,需传入回调函数,返回布尔值。

let arr = [100,15,50,110]
let myarr = arr.every(function(el){
    return el>14
})
console.log(myarr) //true

15. some:用于检测数组中是否存在至少一个元素满足指定条件,需传入回调函数,返回布尔值。

var arr = [100,15,50,110]
var myarr1 = arr.some(function(el){
      return el>100
})
console.log(myarr1) //true

16. find:用于返回数组中满足条件的第一个元素值,若无匹配则返回undefined,需传入回调函数。

var arr = [100,15,50,110]
var myarr2 = arr.find(function(el){
      return el > 10
})
console.log(myarr2) // 100

17. findIndex:功能同find,但返回匹配元素的索引值。

18. filter:用于筛选出满足条件的元素,返回包含符合条件元素的新数组。

var arr = [100,15,8,50,110]
var myarr3 = arr.filter(function(el){
      return el<18
})
console.log(myarr3) //[15,8]

19. map:用于对数组每个元素执行回调函数,返回由每次回调返回值组成的新数组。

var arr = [100,15,8,50,110]
var arr5 = arr.map(function(el){
    return el*1+5   
})
console.log(arr5); //[105, 20, 13, 55, 115]

20. reduce:用于对数组元素执行累加器等聚合操作,可模拟上述多种方法,返回单个累积值。

// reduce(函数,最终结果的初始值)
// 每次遍历的函数,有四个参,每次查询数组的元素时执行的函数
// function(res,ele,index,array)
// res 结果变量
// ele 数组内元素
// index 对应的索引
// array 原数组
// 必须设置返回值,上一次返回的值是res的值,最后返回值是最终结果,也是reduce函数的返回值。
let arr = [100,15,8,50,110]
// res 是自己创的累加器 ele是当前值
let total = arr.reduce(function(res,ele){
    return res + ele
},0)

总结

本文介绍了JavaScript数组的核心方法,希望能为读者提供实用参考,欢迎持续关注获取更多技术内容。

作者最新文章