Array.reverse() в JavaScript — перевернути масив

Опис

Метод reverse() "перекручує" масив навколо своєї осі. Це означає, що коли перший елемент стає останнім, останній автоматично перетворюється на перший. Він не просто змінює порядок елементів масиву, але також повертає оригінальний масив після змін.

Порожні слоти у масиві будуть збережені після застосування методу reverse(). Це означає, що якщо у вашому масиві є слоти без значень, вони залишатимуться порожніми, але будуть розташовані в іншому порядку.

Розглянемо приклад:

let fruits = ["apple", "banana", "cherry"];
fruits.reverse();
console.log(fruits);  // Output: ["cherry", "banana", "apple"]

У цьому прикладі ми маємо масив fruits, що містить три елементи. Застосувавши до нього метод reverse(), ми "перевертаємо" порядок елементів. Таким чином, коли ми виводимо масив fruits, ми бачимо перевернутий порядок елементів.

правити

Загальний опис

правити

Порада

Зверніть увагу, що метод reverse() змінює порядок елементів у масиві, а не сортує їх. Якщо вам потрібно відсортувати масив, ви можете скористатися методом sort() у поєднанні з reverse(), але зауважте, що метод sort() сортує масив у місці і не завжди дає очікуваний результат для масивів з числовими значеннями. У разі потреби в числовому сортуванні рекомендується використовувати додаткову функцію порівняння.

автор: Bond правити

Порада

При використанні методу reverse() для масиву з числовими значеннями, будьте обережними, оскільки метод змінює порядок елементів у масиві на місці. Це означає, що будь-які посилання на цей масив або його елементи також будуть відображати змінену послідовність. Якщо вам потрібно зберегти початковий порядок, розгляньте можливість створення копії масиву перед застосуванням методу reverse().

автор: Bond правити

Порада

reverse() є універсальним методом. Він очікує, що this матиме властивість length і інші властивості з цілими числовими ключами.

автор: Bond правити

Порада

Рядки, які мають певні подібності до масивів, не можуть бути перевернуті за допомогою цього методу, оскільки вони є незмінними.

автор: Bond правити

Нотатка

Метод reverse() не створює новий масив, а змінює сам масив на місці. Тому, якщо вам потрібно зберегти початковий масив, рекомендується зберегти його у змінній до виклику методу reverse() або скопіювати масив за допомогою оператора розподілу [...myArray] і застосувати reverse() до нової копії.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

reverse()

Повернення

reference

Посилання на початковий масив, який тепер відображається в зворотньому порядку. Зверніть увагу, що масив перевертається на місці, і жодної копії не створюється.

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	4	12	5.5

Підтримка: мобільні переглядачі

Переглядач
	1	18	4	1

Підтримка: серверні переглядачі

Переглядач
	0.10.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

const items = [1, 2, 3];
console.log(items); // [1, 2, 3]

items.reverse();
console.log(items); // [3, 2, 1]

console.log([1, , 3].reverse()); // [3, порожньо, 1]
console.log([1, , 3, 4].reverse()); // [4, 3, порожньо, 1]

<header>
  <h2 class="title">Реверсивний масив</h2>
  <p class="description">Демонстрація методу reverse(), який модифікує оригінальний масив.</p>
</header>
<main>
  <p id="array1-output"></p>
  <p id="reversed-output"></p>
  <p id="array1-again-output"></p>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

main p {
  padding: 10px;
  background: #f8f8f8;
  margin-bottom: 15px;
  border-radius: 5px;
}

const array1 = ['one', 'two', 'three', 'four'];
document.getElementById('array1-output').textContent = 'array1: ' + JSON.stringify(array1);

const reversed = array1.reverse();
document.getElementById('reversed-output').textContent = 'reversed: ' + JSON.stringify(reversed);
//# sourceURL=pen.js

const nums = [1, 2, 3];
const rev = nums.reverse();

console.log(rev);          // [3,2,1]
console.log(nums);         // [3,2,1] — ОРИГІНАЛ теж перевернуто
console.log(rev === nums); // true — це один і той самий масив

// копія: spread або slice
const src = [1, 2, 3];
const copy = [...src].reverse();
console.log(copy, src);    // [3,2,1] і [1,2,3]

// sort().reverse() ≠ сортування за спаданням
console.log([10, 9, 1].sort());                     // [1,10,9] — як рядки
console.log([...[10, 9, 1]].sort((a, b) => b - a)); // [10,9,1]

// у рядків reverse() немає
console.log([...'мова'].reverse().join(''));        // авом

const arrayLike = {
  length: 4,
  unrelated: "foo",
  2: 4,
  3: 33,
  4: 100, // ігнорується методом reverse(), оскільки length дорівнює 4
};
console.log(Array.prototype.reverse.call(arrayLike));
// { 0: 33, 1: 4,