Сдвиг массива JavaScript

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

Введение в функцию JavaScript Array shift()

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

array.shift()
Code language: CSS (css)

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

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

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

Примеры метода JavaScript Array shift()

Рассмотрим несколько примеров использования метода shift().

1) Пример использования метода JavaScript array shift()

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

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

console.log({ number });
console.log({ numbers });
console.log({ length: numbers.length });
Code language: JavaScript (javascript)

Вывод:

{ number: 10 }
{ numbers: [ 20, 30 ] }
{ length: 2 }
Code language: CSS (css)

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

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

const numbers = [10, 20, 30];
Code language: JavaScript (javascript)

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

let number = numbers.shift();
Code language: JavaScript (javascript)

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

console.log({ number });
console.log({ numbers });
console.log({ length: numbers.length });
Code language: JavaScript (javascript)

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

2) Пример использования метода JavaScript array shift()

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

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

Вывод:

10
20
30

Использование JavaScript array shift() с массивоподобным объектом

Метод 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);
Code language: JavaScript (javascript)

Вывод:

Hi
{
  '0': 'Hello',
  '1': 'Howdy',
  length: 2,
  removeFirst: [Function: removeFirst]
}
Code language: JavaScript (javascript)

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

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

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

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

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

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

const greeting = greetings.removeFirst();
Code language: JavaScript (javascript)

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

console.log(greeting);
console.log(greetings);
Code language: JavaScript (javascript)

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

Резюме

• Используйте метод shift() для удаления первого элемента из массива и возврата этого элемента.
• Используйте метод shift() с объектом типа массив через метод call() или apply().