JavaScript | Как перевернуть массив?

Часто в программировании на JavaScript нужно поменять порядок элементов в массиве. То есть мы хотим развернуть массив задом на перёд. Мы хотим, чтобы последний элемент массива стал первым, а предпоследний вторым, и так далее. Как это сделать?

На 2023 год можно применить 8 способов переворота массива на JavaScript.

Способ № 1 — Переворот массива методом reverse()

Чтобы перевернуть этот массив JavaScript нужно воспользоваться методом reverse(), который наследуются от прототипа Array.

// Нормальный массив
var arr11 = [11,22,33];
var arr12 = arr11.reverse();
// Дырявый массив
var arr_11 = [11,,,22,,,33,,,];
var arr_12 = arr_11.reverse();

Эта команда перевернёт массив на котором вызывается метод. Круглые скобки обязательны, они означают вызов метода. Если не указать круглые скобки, то мы просто получим саму функцию reverse, а не её выполнение. Нам нужно выполнить вызов метода.

В чём проблема?

Мы не получаем новый массив, а перестраиваем элементы старого массива. Это не всегда удобно.

Чтобы сохранить порядок в старом массиве, сделайте его клон и в нём поменяйте порядок элементов.

Способ № 2 — Переворот массива методом toReversed()

// Нормальный массив
var arr21 = [4,5,6,7];
var arr22 = arr21.toReversed();
// Дырявый массив
var arr_21 = [4,,,5,6,7,,];
var arr_22 = arr_21.toReversed();

Способ № 3 — Переворот массива циклом for

var arr31 = ['q','w','e','r'];
var arr32 = [];
for(let i=0; i<arr31.length; i++){
    arr32[i] = arr31[arr31.length-i-1]
};

var arr33 = ['q','w','e','r'];
var arr34 = [];
for(let i=0, l=arr33.length; i<l; i++){
    arr34[i] = arr33[l-i-1]
};

Способ № 4 — Переворот массива циклом for in

var arr41 = ['a','s','d','f'];
var arr42 = [];
for(let i in arr41){
    arr42[i] = arr41[arr41.length-i-1]
};

Способ № 5 — Переворот массива циклом for of

var arr57 = ['a','s','d','f'];
var arr58 = [];
for(let v of arr57){
    arr58.length = arr58.length || arr57.length*2;
    arr58[arr58.length - arr57.length - 1] = v;
    arr58.length = arr58.length-1;
};

Способ № 6 — Переворот массива циклом while

var arr61 = ['z','x','c','v'];
var arr62 = [];
while(arr62.length < arr61.length) {
    arr62[arr62.length] = arr61[arr61.length - arr62.length - 1];
};

Способ № 7 — Переворот массива циклом do while

var arr71 = ['z','x','c','v'];
var arr72 = [];
do{arr72[arr72.length] = arr71[arr71.length - arr72.length - 1]} 
while(arr72.length < arr71.length);

Способ № 8 — Переворот массива методами «forEach()» и «unshift()«

var arr81 = [1, 2, 3, 4];
var arr82 = [];
arr81.forEach(element => {
    arr82.unshift(element)
});

Видео инструкция

В этом видео показан пример переворачивания массива в JavaScript. Ввод команд осуществляется в консоль браузера Google Chrome. Результат виден сразу.

Ссылки

JavaScript | Как перевернуть массив без метода reverse?

JavaScript | Массивы (Array)

Метод Array.prototype.reverse ( )

Стандарт ECMAScript — https://tc39.es/ecma262/#sec-array.prototype.reverse

Стандарт ECMAScript — https://tc39.es/ecma262/multipage/indexed-collections.html#sec-array.prototype.toreversed