Метод объекта Array shift() в JavaScript

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

Метод Array.prototype.shift() удаляет первый элемент из массива и возвращает этот элемент. Синтаксис:

array.shift()

Если массив пуст, метод shift() возвращает значение undefined. В противном случае он возвращает удаленный элемент. Кроме того, метод shift() уменьшает свойство length массива на единицу.

Если вы хотите удалить последний элемент из массива, вы можете использовать метод pop().

Обратите внимание, что метод должен переиндексировать все оставшиеся элементы массива. Поэтому он медленнее по сравнению с методом pop().

Примеры метода

Пример 1

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

const numbers = [10, 20, 30];
let number = numbers.shift();

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

Выход:

{ number: 10 }
{ numbers: [ 20, 30 ] }
{ length: 2 }

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

• Во-первых, определите массив numbers, который состоит из трех элементов:

const numbers = [10, 20, 30];

• Во-вторых, удалите первый элемент из массива numbers и назначьте удаленный элемент переменной number.

let number = numbers.shift();

• В-третьих, выведите удаленный элемент, массив и длину массива в консоль:

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

На следующем рисунке показано, как работает приведенный выше пример:

Пример 2

В следующем примере показано, как использовать метод shift() с циклом while для удаления всех элементов массива:

const numbers = [10, 20, 30];
let number;
while((number = numbers.shift()) != undefined) {
  console.log(number);
}

Выход:

10
20
30

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

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

Рассмотрим следующий пример:

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

const greeting = greetings.removeFirst();

console.log(greeting);
console.log(greetings);

Выход:

Hi
{
  '0': 'Hello',
  '1': 'Howdy',
  length: 2,
  removeFirst: [Function: removeFirst]
}

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

• Сначала определите объект greetings :

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

Объект greetings состоит из трех элементов, обозначенных свойствами 0, 1 и 2. Кроме того, у него есть свойство length, в котором хранится количество элементов объекта.

Метод removeFirst() использует метод call() для вызова метода shift() массива со ссылками this на объект greetings.

• Во-вторых, вызовите метод removeFirst() и присвойте удаленный элемент переменной greeting :

const greeting = greetings.removeFirst();

• В-третьих, выведите greeting и greetings в консоль:

console.log(greeting);
console.log(greetings);

Вывод показывает, что length уменьшена на единицу, свойство с индексом 0 удалено, а индексы других свойств скорректированы соответствующим образом.