reverse() 直接修改原数组而非返回新数组，采用原地交换机制；安全做法是先浅拷贝再反转，如 slice().reverse()、[...arr].reverse() 或 Array.from(arr).reverse()。

reverse() 会直接修改原数组，不是返回新数组——这是最常被忽略的关键点。一旦调用，原数组顺序永久改变，后续所有依赖它原始顺序的逻辑都可能出错。

为什么 reverse() 是“破坏性”的

它采用原地交换（in-place swap）机制：把索引 0 和 length-1 的元素互换，1 和 length-2 互换……直到中点。整个过程不分配新内存，只改写原有位置上的值。

• 调用后原数组引用不变，但内容已翻转
• 返回值是同一数组的引用，不是新数组
• 若该数组被多个变量共享或作为 props/state 传入组件，副作用会扩散

如何安全地获得反转结果而不改原数组

必须先浅拷贝，再反转。推荐以下三种方式（按兼容性和可读性平衡）：

• slice().reverse()：最稳妥，IE9+ 全支持，语义清晰
• [...arr].reverse()：ES2015+ 环境下简洁直观
• Array.from(arr).reverse()：适合需兼容类数组对象（如 NodeList）的场景

避免使用 JSON.parse(JSON.stringify(arr)).reverse()，它会丢失函数、undefined、Date、RegExp 等类型。

在 React 或状态驱动场景中的典型错误

在 JSX 中直接写 {items.reverse().map(...)} 是高危操作：

• 每次渲染都触发原数组变更，可能导致 UI 错乱或无限 re-render
• 若 items 来自 useState，还可能破坏状态一致性

正确做法是提前计算或缓存：

• 用 useMemo(() => [...items].reverse(), [items])
• 或在更新状态时就存反转后的新数组：setItems(prev => [...prev].reverse())

其他容易踩坑的边界情况

reverse() 表现稳定，但某些细节常被误判：

• 空数组或单元素数组调用无实际变化，仍返回原数组
• 稀疏数组（如 a[5] = 'x'）反转后空位保留，只是索引位置倒置
• 多维数组仅反转外层数组顺序，子数组内部不变；如需深度反转，须手动递归处理每个子项
• 字符串、NodeList、arguments 等类数组不能直接调用，需先转真数组