17370845950

JavaScript数组方法高效使用需区分“改变原数组”（如push、splice）和“返回新数组”（如map、filter），按需选择；慎用splice，优先解构与展开语法；大数据量时reduce或flatMap可优化遍历次数，注意边界与类型安全。

JavaScript数组方法用对了，代码更简洁、性能更好。关键不是记全所有方法，而是理解每类方法的用途和副作用，按需选择。

区分“改变原数组”和“返回新数组”的方法

这是高效使用数组方法的第一步。改原数组的方法（如 push、pop、splice、sort、reverse）适合需要就地更新的场景；返回新数组的方法（如 map、filter、slice、concat、flatMap）更适合函数式写法，避免意外修改数据。

• 需要保留原始数组？优先选 filter 而非 splice，选 map 而非 forEach + 手动 push
• 处理大量数据时，for 循环或 for...of 通常比高阶方法略快，但可读性代价高——除非真有性能瓶颈，否则别过早优化
• splice 功能强但易误用：第一个参数是起始索引，第二个是删除个数，后面才是插入项。想删末尾元素？用 pop 更清晰

链式调用要谨慎，避免重复遍历

filter 后接 map 很常见，但底层会遍历两次。如果数据量大，可考虑用 reduce 一次完成，或用 flatMap（当映射结果是数组时）。

• 错误示范：arr.filter(x => x > 0).map(x => x * 2) → 遍历两轮
• 优化思路：用 reduce 合并逻辑，或确认数据量不大时保持可读性优先
• flatMap 是 map + flat(1) 的组合，适合“一对多”映射，比如把每个字符串拆成字符再筛选

善用解构与展开语法，少写传统循环

现代JS中，很多老式写法可以被更直观的语法替代：

• 取前几项？用 const [a, b] = arr 或 arr.slice(0, 2)，别用 for 循环取索引
• 合并数组？用 [...arr1, ...arr2] 比 concat 更直观；追加元素？[...arr, newItem] 比 push + slice 更函数式
• 想遍历但不需要索引？优先 for...of 或 forEach；需要索引且逻辑简单？entries() 配合 for...of 比手动维护 i 变量更安全

注意边界情况和类型安全

数组方法对空值、稀疏数组、非数组输入的处理各有不同，容易埋坑：

• map、filter 等跳过空槽（sparse array），但不会跳过 undefined 或 null 元素

• includes 使用 SameValueZero 比较，能正确识别 NaN；但 indexOf 不能
• 对可能为 null 或 undefined 的值调用数组方法前，先做校验：Array.isArray(arr) && arr.map(...)