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

13次阅读

javaScript数组方法中,push、pop、shift、unshift、splice、sort、reverse、fill会修改原数组;Filtermapreduce、find、forEach等不修改原数组;includes/some/every用于布尔判断;flat()和扩展运算符需注意嵌套深度与性能。

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

javascript 数组操作的核心不在于记住所有方法,而在于理解哪些方法会改变原数组、哪些返回新数组,以及它们在真实场景中的取舍逻辑。

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

这是最容易踩坑的地方。直接改原数组的方法包括 pushpopshiftunshiftsplicesortreversefill。一旦你在 reactvue 的响应式数据中误用 sort,就可能触发非预期的视图更新。

  • splice 既能删又能插,但返回的是被删除的元素数组,不是原数组 —— 别把它和 slice 混了
  • sort() 默认按字符串 Unicode 码点排序,数字排序必须传 (a, b) => a - b
  • fill(value, start, end)end 是可选的,且不包含该索引位置

filter/map/reduce 这类“纯函数”怎么选?

它们都不改原数组,适合函数式风格或状态不可变场景(比如 Redux、React state 更新)。

  • filter 返回满足条件的新数组,别用它来“找某个元素”——那是 find 的事
  • map 要求每个元素都返回一个值;如果只想遍历不产出,用 foreach 更语义清晰
  • reduce 写法灵活但易读性差,简单聚合(如求和)可用,复杂逻辑建议拆成多步或用 for 循环

includes/some/every 这三个布尔判断方法的区别

它们都返回 truefalse,但粒度不同:

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

  • includes(value) 只能做浅层值匹配,不支持条件判断,且对 NaN 友好([NaN].includes(NaN)true
  • some(cb) 只要有一个元素满足回调就返回 true,适合“是否存在满足某条件的项”
  • every(cb) 要求全部满足才返回 true,适合校验全量数据是否合规

flat() 和扩展运算符处理嵌套数组要注意什么?

扁平化不是万能的,深度控制和性能容易被忽略。

  • flat() 默认只展开一层,想完全展开得传 Infinityarr.flat(Infinity)
  • 扩展运算符 [...arr] 只能浅拷贝一层,遇到二维以上数组会失效
  • 深层嵌套用 flat() 可能触发隐式类型转换(比如空位变成 undefined),生产环境建议加 filter(Boolean) 清理

真正难的不是调用哪个方法,而是当数组长度超过 10 万、嵌套层级深、还要兼顾 IE 兼容时,你是否还敢无脑链式调用 map().filter().reduce() —— 那时候,一个带中断的 for 循环反而更稳。

text=ZqhQzanResources