前端数组核心方法（高级视角 + 场景 + 精简）——————2026 0309

1. 增删改类（高频业务场景）

• push/pop/unshift/shift
  • 场景：购物车操作（push 加购商品、pop 删除最后一件）、消息列表（unshift 新增置顶消息）；
  • 进阶：批量加购用push(...arr)展开数组，避免多次调用。
• splice
  • 场景：表格行删除 / 插入（splice(index, 1)删除指定行、splice(index, 0, item)插入行）；
  • 注意：会修改原数组，大数据列表慎用（触发重渲染）。

2. 遍历处理类（数据加工）

• map
  • 场景：接口数据格式化（后端返回[{id:1, name:'a'}]，map 转为[{label:'a', value:1}]适配下拉组件）；
  • 优势：纯函数，不修改原数组，适合 React/Vue 数据渲染。
• filter
  • 场景：列表筛选（电商商品列表按价格 / 分类过滤）；
  • 进阶：结合Boolean过滤空值（arr.filter(Boolean)）。
• reduce
  • 场景：数据聚合（购物车计算总价cart.reduce((sum, item) => sum + item.price*item.num, 0)）、多维数组扁平化；
  • 核心：替代 for 循环，实现多维度数据计算，体现工程化思维。

3. 查找判断类（逻辑判断）

• find/findIndex
  • 场景：表单回显（根据 id 查找列表中对应项list.find(item => item.id === id)）；
  • 优势：找到即终止遍历，性能优于 filter。
• some/every
  • 场景：表单校验（every 判断所有必填项非空、some 判断是否有选中的列表项）。

4. 高阶处理类（性能 / 工程化）

• slice
  • 场景：分页截取（list.slice((page-1)*size, page*size)）；
  • 特点：浅拷贝，不修改原数组，适合纯函数组件。
• sort
  • 场景：表格排序（数字排序需写回调arr.sort((a,b) => a.age - b.age)，避免字符串排序陷阱）；
  • 优化：大数据排序前先缓存，避免频繁触发。

总结

1. 基础方法：push/splice 侧重业务操作，需注意原数组修改风险；
2. 高阶方法：map/filter/reduce 体现数据加工能力，纯函数特性适配框架；
3. 性能考量：find/slice 减少无效遍历，大数据场景优先选择。

核心思路：数组方法选择需结合「是否修改原数组、遍历效率、框架特性」，而非单纯记忆 API，体现工程化和性能思维。