Эффективные способы реверса массива в JavaScript

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

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

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

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

Содержание

Проблема: Изменение оригинального массива
Решение: Реверс элементов массива без изменения оригинальных данных
1. Использованиеsliceиreverse
2. Использование оператораspreadиreverse
3. Использованиеreduceиspread
4. ИспользованиеreduceRightиspread
5. ИспользованиеpushиreduceRight
Заключение

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

Использование метода reverse() изменяет исходный массив:

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

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

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

Ниже приведены несколько способов решения этой проблемы.

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

Метод slice() создает копию массива, а reverse() реверсирует эту копию, не изменяя оригинал.

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

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

2. Использование оператора `spread` и `reverse`

Оператор spread (...) позволяет создать копию массива, которую затем можно реверсировать с помощью reverse().

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

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

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

Метод reduce() можно использовать для реверса массива, создавая новый массив с элементами в обратном порядке.

const originalArray = ['a', 'b', 'c'];
const newArray = originalArray.reduce((accumulator, value) => [value, ...accumulator], []);

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

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

Метод reduceRight() работает аналогично reduce(), но обрабатывает элементы справа налево.

const originalArray = ['a', 'b', 'c'];
const newArray = originalArray.reduceRight((accumulator, value) => [...accumulator, value], []);

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

5. Использование `push` и `reduceRight`

Метод reduceRight() в сочетании с 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']

Заключение

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