React中arr1数组反转后原数组变更，显示结果异常的原因排查

问题出在你使用的数组反转方法是原地修改类型的（比如JavaScript中的Array.prototype.reverse()），这个方法会直接改变原数组本身，而非返回一个独立的新反转数组。

举个直观的代码例子，如果你写了类似逻辑：

let arr1 = [1, 2, 3, 4];
arr1.reverse(); // 这一步直接把原数组arr1改成了[4,3,2,1]
console.log(arr1); // 输出的自然是反转后的数组

你以为原数组会被保留，但实际上reverse()已经直接修改了原数组的内容，导致后续输出原数组时，显示的是反转后的结果。

如果想同时保留原数组和得到反转后的数组，需要先复制原数组，再对复制后的数组执行反转操作，几种常用方式如下：

• 方法1：使用扩展运算符复制数组

let arr1 = [1, 2, 3, 4];
let reversedArr = [...arr1].reverse();
console.log(arr1); // 输出原数组[1,2,3,4]
console.log(reversedArr); // 输出反转后的数组[4,3,2,1]

• 方法2：使用slice()方法复制数组

let arr1 = [1, 2, 3, 4];
let reversedArr = arr1.slice().reverse();
console.log(arr1);
console.log(reversedArr);

• 方法3：使用Array.from()复制数组

let arr1 = [1, 2, 3, 4];
let reversedArr = Array.from(arr1).reverse();
console.log(arr1);
console.log(reversedArr);

内容的提问来源于stack exchange，提问作者Mohd Mustafa Ameer