Unshift: примеры (JAVASCRIPT)

Метод unshift в JavaScript: добавление элементов в массив
Раздел: Массивы, Стек/Очередь
unshift(...elements): number
типовые примерыunshift на php, python, mysqlunshift изменения javascriptпримеры расширенные

Функция unshift в JavaScript

Метод unshift() добавляет один или более элементов в начало массива и возвращает новую длину массива. Этот метод изменяет исходный массив.

Использование метода характерно для случаев, когда требуется добавить элементы в начало коллекции, например, при реализации очереди (queue) или при работе с историей действий, где новые элементы должны располагаться вначале.

Аргументы

  • element1, ..., elementN (обязательные): Элементы, добавляемые в начало массива. Можно передать любое количество аргументов. Если аргументы не переданы, длина массива не изменится.

Возвращаемое значение

Метод возвращает новое значение свойства length массива, после добавления элементов.

Примеры использования

Добавление одного элемента:

const fruits = ['яблоко', 'банан'];
const newLength = fruits.unshift('апельсин');
console.log(fruits);
console.log(newLength);
['апельсин', 'яблоко', 'банан']
3

Добавление нескольких элементов:

const numbers = [3, 4];
const length = numbers.unshift(1, 2);
console.log(numbers);
console.log(length);
[1, 2, 3, 4]
4

Вызов без аргументов:

const arr = [1, 2];
const result = arr.unshift();
console.log(result);
console.log(arr);
2
[1, 2]

Похожие функции в JavaScript

  • push(): Добавляет элементы в конец массива. Предпочтительнее для стеков (LIFO).
  • shift(): Удаляет первый элемент из массива. Используется вместе с unshift для реализации очереди.
  • splice(): Может добавлять или удалять элементы в любой позиции массива. Подходит для более сложных манипуляций.
  • Spread оператор (...) с созданием нового массива: ['новый', ...старыйМассив]. Используется, когда необходимо избежать мутации исходного массива.

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

Типичные ошибки

Ожидание возврата нового массива:

const arr = [1, 2];
const newArr = arr.unshift(0);
console.log(newArr); // 3, а не массив
3

Использование на объектах, не являющихся массивами:

const obj = { 0: 'a', length: 1 };
// obj.unshift не является функцией
// Array.prototype.unshift.call(obj, 'b'); можно использовать, но осторожно
console.log(Array.prototype.unshift.call(obj, 'b'));
console.log(obj);
2
{ '0': 'b', '1': 'a', length: 2 }

Добавление массива как одного элемента (если не использовать spread оператор):

const nums = [1, 2];
nums.unshift([-1, 0]);
console.log(nums);
[[-1, 0], 1, 2] // длина 3, а не 4

Изменения в последних версиях

Спецификация ECMAScript 2022 (ES13) не внесла значительных изменений в работу метода unshift. Поведение остается стабильным на протяжении многих версий.

Важным аспектом является то, что unshift всегда был универсальным методом и может быть применен к объектам, похожим на массив (имеющим свойство length), через Function.call, как показано в примере с ошибками.

Расширенные примеры

Имитация очереди (FIFO) с unshift и pop:

Пример javascript
const queue = [];
// Добавление в очередь
queue.unshift('Задание 1');
queue.unshift('Задание 2');
console.log(queue); // ['Задание 2', 'Задание 1']
// Обработка (извлечение с конца)
const task = queue.pop();
console.log(task); // 'Задание 1'
console.log(queue); // ['Задание 2']
['Задание 2', 'Задание 1']
Задание 1
['Задание 2']

Добавление элементов с помощью spread оператора для вставки массива:

Пример javascript
const arr = [3, 4];
const toAdd = [1, 2];
arr.unshift(...toAdd);
console.log(arr); // [1, 2, 3, 4]

Измерение производительности при добавлении большого количества элементов (сравнение с созданием нового массива через spread):

Пример javascript
// unshift (мутирует массив)
let bigArr = [];
for (let i = 0; i < 100000; i++) {
    bigArr.unshift(i);
}
// Альтернатива через spread (создает новый массив)
let bigArr2 = [];
for (let i = 0; i < 100000; i++) {
    bigArr2 = [i, ...bigArr2];
}

Использование unshift с массивоподобным объектом:

Пример javascript
const arrayLike = {
    length: 2,
    0: 'a',
    1: 'b'
};
Array.prototype.unshift.call(arrayLike, 'z');
console.log(arrayLike);
console.log(arrayLike.length);
{ '0': 'z', '1': 'a', '2': 'b', length: 3 }
3

Аналоги в других языках

PHP: array_unshift

$array = ['яблоко', 'банан'];
$newLength = array_unshift($array, 'апельсин');
print_r($array);
echo $newLength;
Array
(
    [0] => апельсин
    [1] => яблоко
    [2] => банан
)
3

Python: insert, collections.deque

# Списки (list)
arr = ['яблоко', 'банан']
arr.insert(0, 'апельсин')
print(arr)  # ['апельсин', 'яблоко', 'банан']

# Дек (deque) из collections
from collections import deque
deq = deque(['яблоко', 'банан'])
deq.appendleft('апельсин')
print(list(deq))  # ['апельсин', 'яблоко', 'банан']

C#: List.Insert

List list = new List { "яблоко", "банан" };
list.Insert(0, "апельсин");
// list = ["апельсин", "яблоко", "банан"]

Основное отличие заключается в том, что в JavaScript unshift возвращает новую длину, тогда как в PHP array_unshift также возвращает новое количество, а в Python методы insert и appendleft не возвращают новую длину явно.

JS unshift function comments

En
Unshift Adds one or more elements to the beginning of an array and returns the new length