会改变原数组的方法有push()、pop()、shift()、unshift()、splice()、sort()和reverse();map/filter/reduce等不修改原数组,返回新数组,更安全;复制数组推荐[...arr],深拷贝用structuredClone()。

JavaScript 数组操作的核心不在“记住所有方法”,而在理解哪些方法会改变原数组、哪些返回新数组,以及它们在真实场景中是否真正必要。
哪些数组方法会直接修改原数组?
这是最容易引发 bug 的地方:你以为复制了数组,结果只是引用,或者意外改了原始数据。
-
push()、pop()、shift()、unshift():增删首尾元素,原数组被改 -
splice():万能修改器,既能删、又能插、还能替,一定改原数组 -
sort()和reverse():看起来只是“整理”,但默认就地排序/翻转——[3, 1, 2].sort()直接变成[1, 2, 3],不是返回新数组
典型错误:在 React 或 Vue 的响应式逻辑里直接对 props.items.sort(),导致父组件状态被污染。
map/filter/reduce 为什么更安全也更常用?
它们不碰原数组,只专注“转换”“筛选”“聚合”,天然适合函数式思维和不可变数据流。
立即学习“Java免费学习笔记(深入)”;
-
map():每个元素映射为新值,返回等长新数组 ——[1,2,3].map(x => x * 2)→[2,4,6] -
filter():返回满足条件的元素组成的新数组 ——[1,2,3].filter(x => x > 1)→[2,3] -
reduce():把数组“压成”一个值(可以是对象、数字、字符串甚至新数组)——[1,2,3].reduce((sum, x) => sum + x, 0)→6
注意:reduce() 的初始值(第二个参数)不能省略,否则空数组会报错;用作分组时常见写法是 reduce((acc, item) => { acc[item.type] = [...(acc[item.type] || []), item]; return acc; }, {})。
如何真正“复制”一个数组?
浅拷贝就够了的场景很多,但别误以为 arr2 = arr1 是复制 —— 它只是复制了引用。
- 推荐用展开运算符:
const newArr = [...oldArr],语义清晰,支持嵌套解构 -
slice()和concat()也能浅拷贝,但已逐渐被展开符替代 - 需要深拷贝?别急着上
JSON.parse(JSON.stringify(arr))—— 它会丢掉函数、undefined、Date、RegExp、循环引用,且无法处理 BigInt。真要深拷贝,用structuredClone()(现代浏览器支持)或专门库如 lodash 的cloneDeep
常见陷阱:const a = [1, {x: 2}]; const b = [...a]; b[1].x = 99; → a[1].x 也变成 99,因为对象仍是同一引用。
includes() vs indexOf(),find() vs findIndex() 怎么选?
语义优先,而不是“哪个更快”——现代引擎优化后性能差异微乎其微。
- 判断是否存在?用
includes():返回布尔值,语义明确,还支持NaN(indexOf(NaN)返回 -1,但[NaN].includes(NaN)是true) - 需要位置索引?用
indexOf()或lastIndexOf() - 要找匹配的对象?用
find()(返回第一个匹配项)或findIndex()(返回索引),比先filter()[0]更高效,也不创建中间数组
注意:find() 找不到时返回 undefined,不是 false 或 null,判空要用 item !== undefined 或可选链 ?.property。
数组方法本身不难,难的是每次调用前下意识问一句:这个操作会不会影响其他地方正在用的同一个数组?










