数组常用的 API，哪些能改变原数组？｜美团前端面经解析

60 秒回答模板

会修改原数组的常见方法有 push、pop、shift、unshift、splice、sort、reverse、fill、copyWithin；不修改原数组并返回新结果的有 map、filter、slice、concat、flat、flatMap、toSorted、toReversed、toSpliced；只查询或判断的有 find、findIndex、includes、some、every、reduce 等。高频易错点是 splice 会改原数组而 slice 不会，sort 和 reverse 会原地修改。React、Vue 状态更新中通常要先复制再操作，避免直接修改旧状态引用。

考点 核心机制与工程取舍

难度 中高频面试题

回答目标 按定义、机制、场景讲清楚

深入解析

增删类会改原数组

push、pop、shift、unshift 会在数组头尾增删元素并改变 length。splice 可以在任意位置删除、插入和替换，也会原地修改。

重排类会改原数组

sort 和 reverse 都是原地操作，返回值还是同一个数组引用。fill 和 copyWithin 也会在原数组上写入或复制元素。

派生类通常不改原数组

map、filter、slice、concat、flat、flatMap 会返回新数组。注意新数组是新的容器，但里面的对象元素仍然是原对象引用，不等于深拷贝。

查询和累计方法

find、findIndex、includes、some、every 主要用于查询判断；reduce 用于累计。它们本身不主动修改原数组，但回调中如果写入外部对象或元素属性，仍会产生副作用。

新不可变 API

较新的 toSorted、toReversed、toSpliced、with 会返回修改后的新数组，保留原数组不变，适合不可变状态更新场景。

框架状态场景

在 React 或 Vue 中直接 sort、reverse、splice 旧数组可能导致状态引用不变、变更不可追踪或组件复用异常。更稳的做法是先复制，再生成新数组引用。

易错点

不要把 sort、reverse 当成纯函数。它们会原地修改数组。
不要混淆 slice 和 splice。一个截取新数组，一个原地增删改。
不要说 map/filter 是深拷贝。它们只创建新数组容器。
不要在框架状态里直接修改旧数组引用，容易导致更新和复用问题。

面试官追问

slice 和 splice 的区别是什么？

slice(start, end) 截取并返回新数组，不改原数组；splice(start, deleteCount, ...items) 在原数组上删除或插入并返回被删除元素。

sort 默认按什么排序？

默认会把元素转成字符串按字典序排序。数字排序需要传比较函数，例如 (a, b) => a - b。

map 返回新数组是不是深拷贝？

不是。map 创建新数组容器，但如果元素是对象，除非回调里显式复制对象，否则仍共享同一对象引用。

React 中想排序数组状态应该怎么做？

用 [...list].sort(compare) 或 list.toSorted(compare) 生成新数组，再 setState，避免直接修改旧 state。