Как добавить новые элементы массива в начало массива в JavaScript?

С использованием ES6 примените оператор расширения ...:

Пример

var arr = [23, 45, 12, 67];
arr = [34, ...arr]; // РЕЗУЛЬТАТ: [34, 23, 45, 12, 67]

console.log(arr);

Этот код создает новый массив, где число 34 добавляется в начало существующего массива arr. Оператор ... позволяет "распаковать" элементы массива, добавляя их в новый массив.

Быстрая шпаргалка:

Термины "shift/unshift" и "push/pop" могут вызвать путаницу, особенно у тех, кто не знаком с программированием на C.

Если вы не знакомы с данной терминологией, вот краткий перевод альтернативных терминов, которые могут быть проще для запоминания:

* array_unshift()  -  (также известен как Prepend ;; ВставитьПеред ;; ВставитьВНачало )     
* array_shift()    -  (также известен как UnPrepend ;; УдалитьПеред  ;; УдалитьСНачала )

* array_push()     -  (также известен как Append ;; ВставитьПосле   ;; ВставитьВКонец )     
* array_pop()      -  (также известен как UnAppend ;; УдалитьПосле   ;; УдалитьСКонца ) 

Чтобы добавить элемент в начало массива с использованием метода splice, вы можете сделать это следующим образом:

var arr = [23, 45, 12, 67];
arr.splice(0, 0, 34);
console.log(arr);

В этом коде мы используем arr.splice(0, 0, 34), где первый аргумент 0 указывает на индекс, с которого нужно начать изменение массива (то есть начало), второй аргумент 0 указывает, сколько элементов нужно удалить (в данном случае мы не удаляем никаких элементов), а третий аргумент 34 — это элемент, который мы хотим добавить в массив.

В результате в консоль будет выведен массив [34, 23, 45, 12, 67].

Без мутации

На самом деле, все методы unshift/push и shift/pop изменяют исходный массив.

Методы unshift и push добавляют элемент в существующий массив с начала или конца, а shift и pop удаляют элемент из начала или конца массива.

Однако есть несколько способов добавить элементы в массив без мутации. Результатом будет новый массив. Чтобы добавить элемент в конец массива, используйте следующий код:

const originArray = ['one', 'two', 'three'];
const newItem = 4;

const newArray = originArray.concat(newItem); // ES5
const newArray2 = [...originArray, newItem]; // ES6+

Чтобы добавить элемент в начало исходного массива, используйте следующий код:

const originArray = ['one', 'two', 'three'];
const newItem = 0;

const newArray = (originArray.slice().reverse().concat(newItem)).reverse(); // ES5
const newArray2 = [newItem, ...originArray]; // ES6+

С помощью предложенных способов вы можете добавлять элементы в начало или конец массива без мутации.

Если вам нужно постоянно вставлять элемент в начало массива, то будет быстрее использовать push, а затем вызвать reverse, вместо того чтобы каждый раз вызывать unshift.

Тест производительности: http://jsben.ch/kLIYf

Объяснение: Когда вы используете unshift, это операция с временной сложностью O(n), поскольку все элементы массива необходимо сдвинуть. С другой стороны, использование push позволяет добавлять элементы в конец, что происходит за O(1). После добавления всех элементов в конец, вы можете просто вызвать reverse, чтобы изменить порядок, что также будет более эффективно.