js array 操作
9 / 0 / 创建于 1天前
guoliang1994 的个人博客
JavaScript 数组（Array）提供了丰富的内置方法，用于操作和处理数组数据。以下是 常用数组方法 的分类总结，涵盖其用途和示例：
一、增删改查
| 方法 | 作用 | 是否改变原数组 | 示例 |
|---|---|---|---|
push() |
在末尾添加一个或多个元素 | ✅ | arr.push(4) → [1,2,3,4] |
pop() |
删除并返回最后一个元素 | ✅ | arr.pop() → 3（原数组变 [1,2]） |
unshift() |
在开头添加一个或多个元素 | ✅ | arr.unshift(0) → [0,1,2,3] |
shift() |
删除并返回第一个元素 | ✅ | arr.shift() → 1（原数组变 [2,3]） |
splice() |
在指定位置增删元素 | ✅ | arr.splice(1,1,'a') → 原数组变 [1,'a',3] |
slice() |
返回指定区间的浅拷贝新数组 | ❌ | arr.slice(1,3) → [2,3] |
二、遍历与迭代
| 方法 | 作用 | 返回值 | 示例 |
|---|---|---|---|
forEach() |
对每个元素执行函数 | undefined |
arr.forEach(x => console.log(x)) |
map() |
对每个元素执行函数，返回新数组 | 新数组 | arr.map(x => x*2) → [2,4,6] |
filter() |
返回符合条件元素的新数组 | 新数组 | arr.filter(x => x>2) → [3] |
find() |
返回第一个符合条件的元素 | 元素或 undefined |
arr.find(x => x>2) → 3 |
findIndex() |
返回第一个符合条件的元素索引 | 索引或 -1 |
arr.findIndex(x => x>2) → 2 |
some() |
检查是否有元素符合条件 | boolean |
arr.some(x => x>2) → true |
every() |
检查是否所有元素符合条件 | boolean |
arr.every(x => x>0) → true |
reduce() |
从左到右累加元素 | 累加结果 | arr.reduce((sum,x) => sum+x, 0) → 6 |
reduceRight() |
从右到左累加元素 | 累加结果 | arr.reduceRight((sum,x) => sum+x, 0) → 6 |
三、排序与反转
| 方法 | 作用 | 是否改变原数组 | 示例 |
|---|---|---|---|
sort() |
排序（默认按 Unicode 码点） | ✅ | [3,1,2].sort() → [1,2,3] |
reverse() |
反转数组顺序 | ✅ | [1,2,3].reverse() → [3,2,1] |
自定义排序示例：
[3, 1, 2].sort((a, b) => a - b); // 升序 → [1, 2, 3]四、拼接与连接
| 方法 | 作用 | 是否改变原数组 | 示例 |
|---|---|---|---|
concat() |
合并多个数组或值，返回新数组 | ❌ | [1,2].concat([3,4]) → [1,2,3,4] |
join() |
将数组元素拼接为字符串 | ❌ | ['a','b'].join('-') → "a-b" |
五、静态方法与其他
| 方法 | 作用 | 示例 |
|---|---|---|
Array.isArray() |
检查是否为数组 | Array.isArray([1,2]) → true |
includes() |
检查是否包含某元素（ES7） | [1,2,3].includes(2) → true |
flat() |
扁平化嵌套数组（ES2019） | [1,[2,3]].flat() → [1,2,3] |
flatMap() |
先 map() 后 flat(1)（ES2019） |
[1,2].flatMap(x => [x*2]) → [2,4] |
at() |
支持负索引访问元素（ES2022） | [1,2,3].at(-1) → 3 |
六、不常用的方法
| 方法 | 作用 | 备注 |
|---|---|---|
copyWithin() |
复制数组部分内容到其他位置（ES6） | 用途较少，会修改原数组 |
fill() |
填充数组为固定值 | new Array(3).fill(0) → [0,0,0] |
entries() |
返回键值对迭代器 | 用于 for...of 循环 |
keys() |
返回键名迭代器 | 同上 |
values() |
返回元素值迭代器 | 同上 |
七、注意事项
- 改变原数组的方法：
push,pop,shift,unshift,splice,sort,reverse,fill,copyWithin。 - 纯函数方法（不改变原数组）：
slice,concat,map,filter,reduce等。 - 性能考虑：
- 大规模数据操作时，优先选择
for循环或reduce代替链式调用（如map().filter()）。
- 大规模数据操作时，优先选择
代码示例汇总
// 增删改查
const arr = [1, 2, 3];
arr.splice(1, 1, 'a'); // 原数组变 [1, 'a', 3]
// 遍历与转换
const doubled = arr.map(x => x * 2); // [2, 'aa', 6]
// 查找
const hasEven = arr.some(x => x % 2 === 0); // false
// 扁平化
const nested = [1, [2, [3]]];
nested.flat(2); // [1, 2, 3]掌握这些方法后，可以高效处理大多数数组操作场景！
本作品采用《CC 协议》，转载必须注明作者和本文链接
关于 LearnKu
粤公网安备 44030502004330号
推荐文章：