Переворачиваем массив в 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