javascript数组如何操作_有哪些常用方法【教程】

会改变原数组的方法有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。

数组方法本身不难，难的是每次调用前下意识问一句：这个操作会不会影响其他地方正在用的同一个数组？