Метод Array unshift() в JavaScript с примерами

В этом руководстве вы узнаете, как использовать метод JavaScript Array unshift() для добавления одного или нескольких элементов в начало массива.

Метод Array.prototype.unshift() добавляет один или несколько элементов в начало массива и возвращает длину нового массива.

Синтаксис:

unshift(element);
unshift(element1, element2);
unshift(element1, element2,...elementN);

Поскольку метод unshift() должен переиндексировать существующие элементы, он работает медленно, если в массиве много элементов.

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

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

Давайте рассмотрим несколько примеров использования unshift().

1) Добавление элемента в начало массива

В следующем примере метод unshift() используется для добавления числа 10 в массив numbers :

let numbers = [30, 40];

const length = numbers.unshift(20);

console.log({ length });
console.log({ numbers });

Выход:

{ length: 3 }
{ numbers: [ 20, 30, 40 ] }

Как это работает:

• Сначала определите массив, состоящий из двух элементов:

let numbers = [20, 30];

Длина массива numbers равна 2.

• Во-вторых, добавьте число 10 в начало массива numbers и назначьте длину нового массива переменной length :

const length = numbers.unshift(10);

• В-третьих, выведите в консоль переменные length и numbers :

console.log({ length });
console.log({ numbers });

На следующем рисунке показано, как работает функция unshift() :

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

В следующем примере используется метод unshift() для добавления двух элементов в начало массива:

let numbers = [30, 40];

const length = numbers.unshift(10, 20);

console.log({ length });
console.log({ numbers });

Выход:

{ length: 4 }
{ numbers: [ 10, 20, 30, 40 ] }

3) Использование для добавления элементов массива в другой массив

В следующем примере используется метод unshift() для добавления элементов массива в начало другого массива:

let days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
let weekends = ['Sat', 'Sun'];

for(const weekend of weekends) {
  days.unshift(weekend);
}

console.log(days);

Выход:

['Sun', 'Sat', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri']

Начиная с ES6, вы можете использовать оператор распространения, чтобы сделать код более лаконичным, например:

let days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
let weekends = ['Sat', 'Sun'];

days.unshift(...weekends);

console.log(days);

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

Метод unshift() является общим. Следовательно, он может хорошо работать с массивоподобными объектами. Чтобы вызвать метод unshift() из объекта, подобного массиву, вы заимствуете его из объекта массива, используя метод call() или apply().

Пример:

let greetings = {
  0: 'Hi',
  1: 'Hello',
  2: 'Howdy',
  length: 3,
  prepend(message) {
    [].unshift.call(this, message);
    return this.length;
  },
};

greetings.prepend('Good day');

console.log(greetings);

Выход:

{
  '0': 'Good day',
  '1': 'Hi',
  '2': 'Hello',
  '3': 'Howdy',
  length: 4,
  prepend: [Function: prepend]
}

Как это работает.

Сначала определите объект greetings, который имеет

• Свойства с именами 0, 1 и 3 представляют элементы объекта greetings.
• Свойство length инициализируется значением 3, которое указывает количество элементов, которые имеет объект приветствия.
• Метод prepend() вызывает метод call() метода unshift() и устанавливает this в объект greetings. Другими словами, объект greetings заимствует метод unshift() из объекта массива( [] ).

Во-вторых, вызовите метод prepend() объекта greetings, чтобы добавить элемент с индексом 0th.

В-третьих, выведите объект greetings на консоль.

Если вы хотите, чтобы метод prepend() добавлял один или несколько элементов в объект greetings, вы можете использовать параметр rest и оператор расширения следующим образом:

let greetings = {
  0: 'Hi',
  1: 'Hello',
  2: 'Howdy',
  length: 3,
  prepend(...messages) {
    [].unshift.call(this, ...messages);
    return this.length;
  },
};

greetings.prepend('Good day', 'Bye');

В этом примере метод prepend() принимает одно или несколько сообщений( ...messages ) и передает их в метод unshift() по отдельности с помощью оператора распространения.

Заключение

• Используйте метод unshift() массива JavaScript, чтобы добавить один или несколько элементов в начало массива.
• Метод unshift() также работает с массивоподобным объектом, используя методы call() или apply().