反转数组最佳实践

如何在不改变原始数组的情况下反转数组

reverse() 方法颠倒了数组中元素的顺序，但它改变了原始数组。

// 让我们举一个简单的例子来演示这个案例：
const originalArray = [1, 2, 3, 4, 5];
const newArray = originalArray.reverse();

console.log(newArray); // [ 5, 4, 3, 2, 1]
console.log(originalArray); // [ 5, 4, 3, 2, 1]

你会发现，reverse() 方法已经改变了原始数组，因此直接使用该方法无法实现

很少有解决方案不会改变原始数组，让我们来看看

1、使用切片和反向方法

TIP

在这种情况下，只需调用 slice() 数组上的方法来创建浅拷贝，然后 reverse() 在拷贝上调用方法

const originalArray = [1, 2, 3, 4, 5];
const newArray = originalArray.slice().reverse(); // slice 切片一个数组将产生一个新副本

console.log(originalArray); // [1, 2, 3, 4, 5]
console.log(newArray); // [ 5, 4, 3, 2, 1]

2、使用扩展和反向方法

TIP

在这种情况下，让我们使用扩展语法 (...) 创建数组的副本，然后 reverse() 在副本上调用方法

const originalArray = [1, 2, 3, 4, 5];
const newArray = [...originalArray].reverse();

console.log(originalArray); // [1, 2, 3, 4, 5]
console.log(newArray); // [ 5, 4, 3, 2, 1]

3、使用 reduce 和 spread 方法

TIP

这里对数组元素执行 reducer 函数，并使用 spread 语法将累积的数组附加到右侧

const originalArray = [1, 2, 3, 4, 5];
const newArray = originalArray.reduce((accumulator, value) => {
  return [value, ...accumulator];
}, []);

console.log(originalArray); // [1, 2, 3, 4, 5]
console.log(newArray); // [ 5, 4, 3, 2, 1]

4、使用 reduceRight 和 spread 方法

TIP

这里对数组元素执行一个右 reducer 函数（即 reduce 方法的相反方向），并使用 spread 语法将累加的数组追加到左侧

const originalArray = [1, 2, 3, 4, 5];
const newArray = originalArray.reduceRight((accumulator, value) => {
  return [...accumulator, value];
}, []);

console.log(originalArray); // [1, 2, 3, 4, 5]
console.log(newArray); // [ 5, 4, 3, 2, 1]

5、使用 reduceRight 和 push 方法

TIP

这里对数组元素执行一个右 reducer 函数（即 reduce 方法的相反方向），并将迭代后的值压入累加器

const originalArray = [1, 2, 3, 4, 5];
const newArray = originalArray.reduceRight((accumulator, value) => {
  accumulator.push(value);
  return accumulator;
}, []);

console.log(originalArray); // [1, 2, 3, 4, 5]
console.log(newArray); // [ 5, 4, 3, 2, 1]