JavaScript数组常用方法详解:增删改查与遍历
本文系统梳理了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) //true15. some:用于检测数组中是否存在至少一个元素满足指定条件,需传入回调函数,返回布尔值。
var arr = [100,15,50,110]
var myarr1 = arr.some(function(el){
return el>100
})
console.log(myarr1) //true16. find:用于返回数组中满足条件的第一个元素值,若无匹配则返回undefined,需传入回调函数。
var arr = [100,15,50,110]
var myarr2 = arr.find(function(el){
return el > 10
})
console.log(myarr2) // 10017. 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数组的核心方法,希望能为读者提供实用参考,欢迎持续关注获取更多技术内容。
JS大数值转字符串出现科学计数法怎么办
2026-11-05 17:09:21
JS split切割后出现空字符串怎么过滤
2026-11-05 16:00:30
在 React 或 Vue 项目中封装使用 JS 节流防抖
2026-11-05 15:27:29
JavaScript中怎么将带小数的字符串转为整数?
2026-11-05 14:32:38
怎么用JavaScript策略模式重构电商促销计算逻辑?
2026-11-05 14:01:09
