Переворачиваем массив в JavaScript

В этом уроке мы рассмотрим, как перевернуть массив в JavaScript. Есть несколько способов это сделать, всё зависит лишь от ваших предпочтений.

Мы перевернём эти два массива:

let numArr = [1, 2, 3, 4, 5]
let strArr = ['Java', 'Python', 'JavaScript']

Используем Array.reverse()

Самый простой способ перевернуть массив – это метод reverse():

let numArrReversed = numArr.reverse();
let strArrReversed = strArr.reverse();

console.log(numArrReversed);
console.log(strArrReversed);

Мы создали две переменные, чтобы указать на результирующие массивы:

[ 5, 4, 3, 2, 1 ]
[ 'JavaScript', 'Python', 'Java' ]

Примечание: метод reverse() сразу меняет массив. Это означает, что исходные num_array и string_array меняются местами и исходная последовательность теряется.

Вам не нужно создавать новую переменную для хранения указателя на эти массивы в памяти, так как исходные указатели уже отсылают нас на перевернутые массивы:

numArr.reverse();
strArr.reverse();

console.log(numArr);
console.log(strArr);

Результат тот же:

[ 5, 4, 3, 2, 1 ]
[ 'JavaScript', 'Python', 'Java' ]

Тем не менее, по-прежнему часто “присваивают” результат новой переменной для указания измененного состояния или присваивают показательное именя преобразованному массиву, например array_reversed.

Переворачиваем массив с помощью функционала

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

Многие разработчики любят использовать функциональные конструкции, когда могут, поэтому неудивительно, что массива обычно переворачивается с помощью функциональных конструкций. Этот подход позволяет вам также добавлять или изменять элементы.

Чтобы функционально изменить массив в JavaScript, мы будем использовать оператор распространения и функцию map():

// Preserves original array
let numArrReversed = numArr.map(numArr.pop, [...numArr]);

// Doesn't preserve original array
let strArrReversed = [...strArr].map(strArr.pop, strArr);

Метод map() сопоставляет каждый извлеченный элемент (последний удалённый элемент) из numArr и помещает его в новый массив, который создается как копия numArr. Удалив последний элемент и добавив его в качестве первого в новый массив, мы создадим новый перевернутый массив.

В первым случае мы имеем дело с замороженной копией объекта numArr и, следовательно, не изменяем исходный массив.

Во втором случае мы изменяем исходный массив, поскольку используем ссылку на исходный массив в методе map(), даже если мы заранее создаем копию массива:

console.log('Original num_array: ' + numArr);
console.log('Original string_array: ' + strArr);

console.log('Reversed num_array: ' + numArrReversed);
console.log('Reversed string_array: ' + strArrReversed);

Таким образом, когда мы всё сделали, num_array остается неизменным, в то время как string_array исчез:

Original num_array: 1,2,3,4,5
Original string_array: 
Reversed num_array: 5,4,3,2,1
Reversed string_array: JavaScript,Python,Java

Переворачиваем массив с помощью цикла for

Наконец, можно просто запустить массив через цикл for в обратном порядке и добавить каждый элемент в новый массив.

Этот способ отлично подходит для создания нового перевёрнутого массива, но он не отменит старый. Если вы хотите изменить его, лучше использовать метод unshift(), чтобы добавить элементы в начале массива, соединение вы не отмените:

function reverse(array) {
  let newArr = [];
  for(i = array.length-1; i >= 0; i--) {
    newArr.push(array[i]);
  }
  return newArr;
}

function reverseInPlace(array) {
  for(i = 0; i < array.length; i++) {
    let tmp = array.splice(i, 1)[0];
    array.unshift(tmp);
  }
  return array;
}

Можете использовать этот метод:

let numArrReversed = reverseInPlace(numArr);
let strArrReversed = reverse(strArr);

console.log('Original num_array: ' + numArr);
console.log('Original string_array: ' + strArr);

console.log('Reversed num_array: ' + numArrReversed);
console.log('Reversed string_array: ' + strArrReversed);

Результат:

Original num_array: 5,4,3,2,1
Original string_array: Java,Python,JavaScript
Reversed num_array: 5,4,3,2,1
Reversed string_array: JavaScript,Python,Java

Ответить