В этом руководстве вы узнаете, как использовать метод 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()
.