Сегодня я хочу обсудит вопрос реверса элементов массива в JavaScript. Какой вариант Вы захотите предложить в первую очередь? Естественно, использование метода массивов reverse().

const originalArray = ['a', 'b', 'c'];

const reverseArray = originalArray.reverse();
console.log(reverseArray);
// ['c', 'b', 'a']

В этом случае возникает проблема, решение которой ищут многие начинающие разработчики. Эта проблема настолько распространена в JavaScript, что рано или поздно Вы неизбежно с ней столкнетесь или уже столкнулись.

Изменение оригинального массива

Именно так, использование метода reverse() приводит к модификации исходного массива.

const originalArray = ['a', 'b', 'c'];
const newArray = originalArray.reverse();

console.log(originalArray); // ['c', 'b', 'a']
console.log(newArray); // ['c', 'b', 'a']

Как сделать реверс элементов массива без изменения оригинальных данных

Ниже я предлагаю несколько способов решения проблемы модификации оригинального массива.

Использование slice и reverse

const originalArray = ['a', 'b', 'c'];
const newArray = originalArray.slice().reverse();

console.log(originalArray); // ['a', 'b', 'c']
console.log(newArray); // [ 'c', 'b', 'a' ]

Использование spread и reverse

const originalArray = ['a', 'b', 'c'];
const newArray = [...originalArray].reverse();

console.log(originalArray); // ['a', 'b', 'c']
console.log(newArray); // [ 'c', 'b', 'a' ]

Использование reduce и spread

const originalArray = ['a', 'b', 'c'];
const newArray = originalArray.reduce((accumulator, value) => {
  return [value, ...accumulator]
}, []);
console.log(originalArray); // ['a', 'b', 'c']
console.log(newArray); // [ 'c', 'b', 'a' ]

Использование reduceRight и spread

const originalArray = ['a', 'b', 'c'];
const newArray = originalArray.reduceRight((accumulator, value) => {
  console.log(value);
  return [...accumulator, value]
}, []);
console.log(originalArray); // ['a', 'b', 'c']
console.log(newArray); // [ 'c', 'b', 'a' ]

Использование push

const originalArray = ['a', 'b', 'c'];
const newArray = originalArray.reduceRight((accumulator, value) => {
  accumulator.push(value);
  return accumulator;
}, []);
console.log(originalArray); // ['a', 'b', 'c']
console.log(newArray); // [ 'c', 'b', 'a' ]

Спасибо за внимание.

Перевод статьи Samantha Ming “Code Recipe: How to Reverse an Array in JavaScript”