# 反转数组最佳实践

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

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]
上次更新时间: 6/8/2023, 9:23:17 PM

大厂最新技术学习分享群

大厂最新技术学习分享群

微信扫一扫进群,获取资料

X