javascript数组如何操作_常用方法有哪些?

15次阅读

javaScript数组操作关键在于区分方法对原数组的影响:push/pop/shift/unshift/splice/reverse/sort会修改原数组;map/Filter/slice/concat/扩展运算符/flatMap返回新数组;查找用find/findIndex/includes/some/every需按需求选择。

javascript数组如何操作_常用方法有哪些?

javascript 数组操作的核心不是记全所有方法,而是知道哪些方法会改原数组、哪些返回新数组、哪些适合遍历、哪些适合查找——用错一个就可能引发难以追踪的副作用。

哪些方法会直接修改原数组?

这类方法执行后,原 arr 的内容就变了,如果其他地方还依赖它旧的状态,就会出问题。常见有:

  • push()pop()shift()unshift():增删首尾元素
  • splice():万能修改器,可删、可插、可替,但一定改原数组
  • reverse()sort():顺序类操作,不加防御直接用很容易翻车(比如 sort() 默认按字符串排序)

示例:

const arr = [3, 1, 4]; arr.sort(); // ❌ 得到 [1, 3, 4]?不对,是 [1, 3, 4] 看似对,但其实是按字符排的:[3, 1, 4] → ['3','1','4'] → ['1','3','4'] → [1,3,4];换成 [10, 2] 就露馅了:arr.sort() → [10, 2](因为 '10' < '2')

正确写法是 arr.sort((a, b) => a - b)

哪些方法返回新数组且安全?

这些方法不会污染原始数据,适合函数式风格或需要保留历史状态的场景:

  • map():逐项转换,返回等长新数组
  • filter():筛选,返回满足条件的新数组
  • slice()切片arr.slice(1, 3) 返回下标 1~2 的副本
  • concat()[...arr1, ...arr2]:合并,不改原数组
  • flatMap():先 map 再扁平一层,比 map().flat(1) 更高效

注意:flat() 默认只扁平一层,想彻底打平得写 arr.flat(Infinity);而 flatMap() 只接受同步回调,不能 await。

立即学习Java免费学习笔记(深入)”;

查找与判断该用哪个?

别再无脑用 indexOf() 或遍历 for 了。按需求选:

  • 要索引 → indexOf()(严格相等)、findIndex()(支持条件函数)
  • 要元素 → find()(返回第一个匹配项,找不到是 undefined
  • 只判断存不存在 → includes()(简单值)、some()(复杂条件)
  • 是否全部满足 → every()

includes()NaN 友好([NaN].includes(NaN) === true),而 indexOf(NaN) 返回 -1,这是关键差异。

性能和兼容性容易被忽略的点

现代开发常忽略两点:一是 V8 引擎对稀疏数组(如 arr[1000000] = 'x')的优化很弱,map/filter 会遍历所有空槽;二是老环境(IE)不支持 findincludesflat 等,需用 Babel 或手写降级逻辑。

高频操作如大量 push 后立刻 join,不如一开始就用字符串拼接或 Array.from() 配合生成器避免中间数组。

真正难的不是记住方法名,是在嵌套对象数组里用对 find() 还是 findIndex(),以及意识到 map().filter()flatMap() 在某些场景下语义与性能完全不同。

text=ZqhQzanResources