Array.unshift() в JavaScript — додати елемент на початок масиву
Опис
Метод unshift() дозволяє додавати один або декілька елементів на початок масиву. Це дещо відрізняє його від методу Array.prototype.push(), який також додає елементи, але розміщує їх в кінці масиву.
Зверніть увагу: якщо ви передаєте кілька елементів одразу, вони будуть розміщені на початку масиву в порядку, в якому вони були передані. Це означає, що використання unshift() з n аргументами одночасно відзначається від n послідовних викликів цього методу з 1 аргументом, наприклад, виконаних у циклі.
Приклад:
let fruits = ["apple", "banana"];
fruits.unshift("orange", "lemon");
console.log(fruits); // Output: ["orange", "lemon", "apple", "banana"]
У цьому прикладі метод unshift() додає orange і lemon на початок масиву, розширюючи його до чотирьох елементів. Зверніть увагу на порядок елементів у результуючому масиві.
Загальний опис
автор: NagarD
- Порада
-
Метод
автор: Bondunshift()змінює вихідний масив і повертає нову довжину масиву. Використовуйте повернене значення, якщо вам потрібно знати, скільки елементів здійснено додано. - Нотатка
-
Важливо враховувати, що при додаванні багатьох елементів за один раз застосовується порядок, в якому вони передаються у методі
автор: Bondunshift(). Наприклад, якщо ви викликаєтеarray.unshift('a', 'b', 'c'),'a'буде першим елементом,'b'- другим, а'c'- третім. - Нотатка
-
Метод
автор: Bondunshift()є універсальним. Він очікує, щоthisмає властивістьlengthта властивості з цілочисельними індексами. - Нотатка
-
Хоча рядки також подібні до масивів, цей метод не підходить для їх застосування, оскільки рядки є незмінними.
автор: Bond
Синтаксис
unshift()
unshift(element0)
unshift(element0, element1)
unshift(element0, element1, /* … ,*/ elementN)
Параметри
elementN-
Елементи, які треба додати на початок масиву.
автор: Bond
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 4 | 12 | 5.5 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 1 | 18 | 4 | 1 |
| Переглядач |  |
 |
|---|---|---|
| 0.10.0 | 1.0 |
Приклади
+ запропонувати свій приклад у пісочниці
Використання unshift().
const arr = [1, 2];
arr.unshift(0); // результат виклику - 3, що є новою довжиною масиву
// arr стає [0, 1, 2]
arr.unshift(-2, -1); // нова довжина масиву - 5
// arr стає [-2, -1, 0, 1, 2]
arr.unshift([-4, -3]); // нова довжина масиву - 6
// arr стає [[-4, -3], -2, -1, 0, 1, 2]
arr.unshift([-7, -6], [-5]); // нова довжина масиву - 8
// arr стає [ [-7, -6], [-5], [-4, -3], -2, -1, 0, 1, 2 ]
Виклик unshift() на не-масивних об'єктах.
const arrayLike = {
length: 3,
unrelated: "foo",
2: 4,
};
Array.prototype.unshift.call(arrayLike, 1, 2);
console.log(arrayLike);
// { '0': 1, '1': 2, '4': 4, length: 5, unrelated: 'foo' }
const plainObj = {};
// Немає властивості length, тому довжина дорівнює 0
Array.prototype.unshift.call(plainObj, 1, 2);
console.log(plainObj);
// { '0': 1, '1': 2, length: 2 }
Цей приклад показує, як метод unshift() можна використовувати для додавання нових елементів на початок масиву. Нові елементи генеруються випадковим чином.
HTML
<header>
<h2 class="title">Використання методу unshift() з масивом чисел</h2>
<p class="description">Демонстрація використання методу unshift() для додавання елементів на початок масиву.</p>
</header>
<main>
<div class="result">
<h3 class="result-title">Початковий масив:</h3>
<pre id="initialArray"></pre>
<h3 class="result-title">Додані елементи:</h3>
<pre id="addedElements"></pre>
<h3 class="result-title">Результат unshift():</h3>
<pre id="unshiftResult"></pre>
<h3 class="result-title">Модифікований масив:</h3>
<pre id="modifiedArray"></pre>
</div>
</main>CSS
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;
}
.result {
background-color: #f8f8f8;
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);
}
.result-title {
font-weight: bold;
color: #333;
}JS
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
const array1 = [1, 2, 3];
// Виводимо початковий масив
document.getElementById('initialArray').innerText = JSON.stringify(array1, null, 2);
const newElements = [getRandomInt(1, 10), getRandomInt(1, 10)];
// Виводимо додані елементи
document.getElementById('addedElements').innerText = JSON.stringify(newElements, null, 2);
const unshiftResult = array1.unshift(...newElements);
// Виводимо результат використання unshift()
document.getElementById('unshiftResult').innerText = unshiftResult;
// Виводимо модифікований масив
document.getElementById('modifiedArray').innerText = JSON.stringify(array1, null, 2);
//# sourceURL=pen.jsЩо повертає unshift(), чому unshift(other) і unshift(...other) дають різне і чим один виклик відрізняється від кількох.
const queue = ['b', 'c'];
console.log(queue.unshift('a')); // 3 — НОВА ДОВЖИНА, а не масив
console.log(queue); // ["a","b","c"]
// один виклик із двома аргументами ≠ два виклики
const one = ['x'];
one.unshift(1, 2);
console.log(one); // [1,2,"x"]
const two = ['x'];
two.unshift(1);
two.unshift(2);
console.log(two); // [2,1,"x"] — порядок перевернувся
// масив аргументом лягає одним елементом
const list = ['c'];
list.unshift(['a', 'b']);
console.log(list); // [["a","b"],"c"] — не те, що хотіли
list.shift();
list.unshift(...['a', 'b']);
console.log(list); // ["a","b","c"]
// без мутації — spread
const base = [2, 3];
console.log([1, ...base], base); // [1,2,3] і [2,3]Коментарі
Коментарів ще немає — будьте першим!