一文分享15个JavaScript中常用的数组操作方法
作者：叫我欧文就好啦
本文详细介绍了JavaScript中的常用数组操作方法,包括增删改查操作并介绍了数组操作高阶函数,这些操作和函数可以帮助高效地处理和操作数组数据,希望对大家有所帮助
数组的增删改查
1.push(插入的元素<可传多个>)
作用：往数组的尾部插入元素**
let arr = [1, 2, 3] arr.push(4, 5) let res = arr.push(4, 5) //返回值为插入元素后数组的长度（res：5） console.log(arr) // [1, 2, 3, 4, 5]
2.unshift(插入的元素<可传多个>)
作用：往数组的头部插入元素**
let arr = [1, 2, 3] arr.unshift(-2, -1, 0) let res = arr.unshift(-2, -1, 0) //返回值为插入元素后数组的长度（res：6） console.log(arr) // [-2, -1, 0, 1, 2, 3]
3.pop()
作用：删除数组的最后一个元素**
let arr = [1, 2, 3] arr.pop() let res = arr.pop() // 返回值为删除的元素(res: [3]) console.log(arr) // [1, 2]
4.shift()
作用：删除数组的第一个元素**
let arr = [1, 2, 3] arr.shift() let res = arr.shift() // 返回值为删除的元素(res: [1]) console.log(arr) // [2, 3]
5.slice(开始元素的下标，结束元素的下标)
作用：截取数组特定元素（不改变原数组，可用作浅拷贝）**
// 浅拷贝 let arr = [1, 2, 3] let newArr = arr.slice() // 返回值为截取后的新数组 console.log(newArr) // [1, 2, 3] //截取元素 let arr = [1, 2, 3] let newArr = arr.slice(0, 2) // 从第下标为0的元素开始截取，到元素下标为2的元素（注：但不包括元素下标为2的元素） console.log(newArr) // [1, 2] console.log(arr) // [1, 2, 3] // 不改变原数组
6.splice(开始元素的下标，删除的元素个数，添加的元素...)
作用：可新增元素或者删除元素**
// 新增元素 let arr = [1, 3, 5] arr.splice(1, 0, 2) // 在元素下标为1的元素后面新增一个元素2 let res = arr.splice(1, 0, 2) // 由于此处为新增元素，返回值为空数组[]（res： []） console.log(arr) // [1, 2, 3, 5] //删除元素 let arr = [1, 2, 3] arr.splice(1, 1) // 在元素下标为1的元素后面删除一个元素 let res = arr.splice(1, 1) // 返回值为删除的元素(res: [2]) console.log(arr) // [1, 3]
7.join(传入分割每个元素的标志)
作用：数组转换为字符串**
let arr = ['zbw', 'cyl']
let res = arr.join(',')
console.log(res) // 'zbw, cyl'
let res = arr.join('-')
console.log(res) // 'zbw-cyl'8.concat()
作用：连接多个数组或值**
let arr1 = [1, 2, 3] let arr2 = [4, 5, 6] let res = arr1.concat(arr2) console.log(res) // [1, 2, 3, 4, 5, 6] let res = arr1.concat(4, arr2, 7, 8) console.log(res) // [1, 2, 3, 4, 4, 5, 6, 7, 8]
操作数组的高阶函数
高阶函数：把函数作为参数传入或把函数作为返回值的函数为高阶函数
1.map()
作用：操作数组，返回经过处理后的数组**
let arr = [1, 2, 3, 4] let res = arr.map(item => item * 2) console.log(res) // [2, 4, 6, 8]
2.filter()
作用：过滤数组，返回操作表达式为true的数组元素**
let arr = [1, 2, 3, 4] let res = arr.filter(item => item >= 2) console.log(res) // [2, 3, 4]
3.reduce(pre<初始值>, cur<当前项>, arr<数组本身>, <初始值>)
作用：求和，数组转对象**
// 求和
let arr = [1, 2, 3, 4]
let res = arr.reduce((pre, cur) => {
return pre += cur
}, 0) // 这里是求和 所以初始值为0
console.log(res) // 10
// 数组转对象
let arr = [
{ id: 1, name: 'zbw', age: 18 },
{ id: 2, name: 'cyl', age: 18 },
]
let obj = arr.reduce((pre, cur) => {
pre[cur.id] = cur.name
return pre
}, {}) // 这里是数组转对象 所以初始值为空对象{}
console.log(obj) // {1: 'zbw', 2: 'cyl'} 4.forEach()
作用：跟map()作用类似，区别在于forEach()会改变原数组，且没有返回值**
let arr = [
{ name: 'zbw', age: 22 },
{ name: 'cyl', age: 18 },
]
arr.forEach(item => item.age = 20)
console.log(arr) // [{ name: 'zbw', age: 20 },{ name: 'cyl', age:20 }]5.some()
作用：判断数组中是否存在符合条件表达式的条件，如果有一项符合返回true，否则返回false**
let arr = [1, 2, 3, 4] let bool = arr.some(item => item > 2) console.log(bool) // true 因为存在大于2的元素 let bool = arr.some(item => item > 5) console.log(bool) // false 因为不存在大于5的元素
6.every()
作用：判断数组中是否全部元素都符合表达式的条件，全部都符合返回true，否则返回false**
let arr = [1, 2, 3, 4] let bool = arr.every(item => item > 0) console.log(bool) // true 因为所有元素都大于0 let bool = arr.every(item => item > 1) console.log(bool) // false 因为存在不大于1的元素
7.find()
作用：找到数组中符合条件的第一个元素**
let arr = [{ id: 1, name: 'zbw', age: 18 }, { id: 2, name: 'cyl', age: 18 }]
let res = arr.find(item => item.age === 18)
console.log(res) // { id: 1, name: 'zbw', age: 18 }
let res = arr.find(item => item.id === 2)
console.log(res) // { id: 2, name: 'cyl', age: 18 }知识扩展
数组是 JavaScript 中最基础、最常用的数据结构之一。JavaScript 提供了丰富的方法来操作数组，熟练使用这些方法可以极大提升开发效率和代码可读性。本文将按功能分类，详细介绍最常用的数组操作方法。
数组的创建与判断
| 方法 | 说明 | 示例 |
|---|---|---|
Array.from() | 将类数组或可迭代对象转换为真数组 | Array.from('abc') → ['a','b','c'] |
Array.of() | 将参数列表作为数组元素 | Array.of(3) → [3]（避免 new Array(3) 的空位问题） |
Array.isArray() | 判断一个值是否为数组 | Array.isArray([]) → true |
添加/删除元素
| 方法 | 说明 | 返回值 | 是否修改原数组 |
|---|---|---|---|
push(item1, item2, ...) | 末尾添加一个或多个元素 | 新数组长度 | ✅ 是 |
pop() | 删除末尾最后一个元素 | 被删除的元素 | ✅ 是 |
unshift(item1, item2, ...) | 开头添加一个或多个元素 | 新数组长度 | ✅ 是 |
shift() | 删除开头第一个元素 | 被删除的元素 | ✅ 是 |
splice(start, deleteCount, ...items) | 从 start 位置删除 deleteCount 个，可再插入新元素 | 被删除元素的数组 | ✅ 是 |
let arr = [1, 2, 3]; arr.push(4); // [1,2,3,4] arr.pop(); // 4，arr变为[1,2,3] arr.unshift(0); // [0,1,2,3] arr.shift(); // 0，arr变为[1,2,3] arr.splice(1, 1, 'a', 'b'); // 从索引1删除1个元素，然后插入'a','b' → [1,'a','b',3]
访问与查找元素
| 方法 | 说明 | 返回值 | 查找依据 |
|---|---|---|---|
indexOf(item, fromIndex) | 查找元素首次出现的位置 | 索引（未找到返回 -1） | 严格相等 === |
lastIndexOf(item, fromIndex) | 从后向前查找 | 索引（未找到返回 -1） | 严格相等 |
includes(item, fromIndex) | 判断数组是否包含某元素 | true / false | 严格相等 |
find(callback) | 返回第一个满足测试函数的元素 | 元素值或 undefined | 自定义条件 |
findIndex(callback) | 返回第一个满足测试函数的元素索引 | 索引或 -1 | 自定义条件 |
let arr = [1, 2, 3, 2, 1];
arr.indexOf(2); // 1
arr.lastIndexOf(2); // 3
arr.includes(3); // true
// find 示例
let users = [{id:1, name:'A'}, {id:2, name:'B'}];
users.find(u => u.id === 2); // {id:2, name:'B'}
users.findIndex(u => u.name === 'B'); // 1迭代与遍历方法（不修改原数组）
这些方法都接收一个回调函数，函数参数通常为 (value, index, array)。
| 方法 | 说明 | 返回值 |
|---|---|---|
forEach(callback) | 对每个元素执行一次回调 | undefined |
map(callback) | 创建一个新数组，其结果是原数组每个元素调用回调后的返回值 | 新数组 |
filter(callback) | 创建一个新数组，包含所有通过测试的元素 | 新数组 |
reduce(callback, initialValue) | 对数组元素累积计算，从左到右 | 累积结果 |
reduceRight(callback, initialValue) | 与 reduce 类似，但从右向左 | 累积结果 |
some(callback) | 测试是否有元素通过测试 | boolean |
every(callback) | 测试是否所有元素都通过测试 | boolean |
let arr = [1, 2, 3, 4]; arr.forEach(v => console.log(v * 2)); // 输出2,4,6,8 let doubled = arr.map(v => v * 2); // [2,4,6,8] let evens = arr.filter(v => v % 2 === 0); // [2,4] let sum = arr.reduce((acc, cur) => acc + cur, 0); // 10 let hasEven = arr.some(v => v % 2 === 0); // true let allPositive = arr.every(v => v > 0); // true
排序、反转与填充
| 方法 | 说明 | 是否修改原数组 |
|---|---|---|
sort(compareFn) | 对数组元素进行排序（默认按字符串排序） | ✅ 是 |
reverse() | 反转数组元素顺序 | ✅ 是 |
fill(value, start, end) | 用固定值填充数组部分或全部元素 | ✅ 是 |
let arr = [3, 1, 4, 2]; arr.sort(); // [1,2,3,4] (字符串排序) arr.sort((a,b) => a - b); // 升序 [1,2,3,4] arr.sort((a,b) => b - a); // 降序 [4,3,2,1] let nums = [1,2,3]; nums.reverse(); // [3,2,1] let filled = [1,2,3,4]; filled.fill(0, 1, 3); // [1,0,0,4]
数组拼接、截取与扁平化
| 方法 | 说明 | 返回值 | 是否修改原数组 |
|---|---|---|---|
concat(arr1, arr2, ...) | 合并两个或多个数组 | 新数组 | ❌ 否 |
slice(start, end) | 截取数组的一部分 | 新数组 | ❌ 否 |
flat(depth) | 按照指定深度递归扁平化数组 | 新数组 | ❌ 否 |
flatMap(callback) | 先 map 再 flat(1) | 新数组 | ❌ 否 |
let arr1 = [1,2];
let arr2 = [3,4];
arr1.concat(arr2); // [1,2,3,4]
let arr = [1,2,3,4,5];
arr.slice(1, 3); // [2,3]
let nested = [1, [2, [3, [4]]]];
nested.flat(2); // [1,2,3,[4]]
let words = ["hello", "world"];
words.flatMap(w => w.split('')); // ['h','e','l','l','o','w','o','r','l','d']转换为字符串
| 方法 | 说明 | 示例 |
|---|---|---|
join(separator) | 将数组元素用指定分隔符连接成字符串 | [1,2,3].join('-') → "1-2-3" |
toString() | 将数组转换为逗号分隔的字符串 | [1,2,3].toString() → "1,2,3" |
toLocaleString() | 返回本地化字符串（常用于日期、数字） | [new Date()].toLocaleString() |
其他有用方法
| 方法 | 说明 |
|---|---|
keys() | 返回一个包含数组索引的可迭代对象 |
values() | 返回一个包含数组值的可迭代对象 |
entries() | 返回一个包含 [index, value] 的可迭代对象 |
copyWithin(target, start, end) | 在数组内部复制一段元素（会修改原数组） |
with(index, value) | (ES2023) 返回一个新数组，将指定索引的元素替换为新值（不修改原数组） |
toSorted() | (ES2023) 返回一个新排序数组（不修改原数组） |
toReversed() | (ES2023) 返回一个新反转数组（不修改原数组） |
// 复制自身内部片段 let arr = [1,2,3,4,5]; arr.copyWithin(0, 3, 5); // [4,5,3,4,5] // 不修改原数组的方式 (ES2023+) let original = [3,1,2]; let sortedCopy = original.toSorted(); // [1,2,3] let reversedCopy = original.toReversed();// [2,1,3] let replacedCopy = original.with(1, 99); // [3,99,2] // original 仍然是 [3,1,2]
常用技巧总结表（按场景速查）
| 场景 | 推荐方法 |
|---|---|
| 遍历并执行操作 | forEach |
| 映射转换 | map |
| 过滤筛选 | filter |
| 累积计算 | reduce / reduceRight |
| 查找元素 | find |
| 查找索引 | indexOf / findIndex |
| 判断存在 | includes / some |
| 验证全部 | every |
| 尾部增删 | push / pop |
| 头部增删 | unshift / shift |
| 任意位置增删 | splice |
| 合并数组 | concat / 扩展运算符 [...arr1, ...arr2] |
| 截取子数组 | slice |
| 扁平化 | flat / flatMap |
| 深拷贝简单数组 | slice() 或 [...arr] |
| 去重（简单类型） | Set + Array.from |
| 数组求并集/交集/差集 | 配合 Set 和 filter |
注意事项
- 多数方法会改变原数组
push,pop,shift,unshift,splice,sort,reverse,fill,copyWithin会修改原数组，使用时需注意。 sort默认按字符串排序数字排序需要提供比较函数(a,b) => a - b。map/filter等会跳过空位，但forEach不会稀疏数组（有未定义元素）的行为可能不一致，建议避免空位。- ES2023 新增了不修改原数组的版本
toSorted(),toReversed(),toSpliced(),with()可以放心使用而不用担心副作用。 - 性能考虑对于大数组，
reduce通常比多次map+filter效率高（避免多次遍历）。
掌握这些方法，你可以写出更简洁、更高效的数组操作代码。建议结合实际业务场景多练习，逐步内化这些 API。
到此这篇关于一文分享15个JavaScript中常用的数组操作方法的文章就介绍到这了,更多相关JavaScript数组操作内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！