Как я могу добавить новые элементы массива в начало массива в Javascript?

avatar
Moon
10 ноября 2011 в 00:35
1040562
17
1903

Мне нужно добавить или добавить элементы в начало массива.

Например, если мой массив выглядит так:

[23, 45, 12, 67]

И ответ на мой вызов AJAX: 34, я хочу, чтобы обновленный массив выглядел следующим образом:

[34, 23, 45, 12, 67]

В настоящее время я планирую сделать это так:

var newArray = [];
newArray.push(response);

for (var i = 0; i < theArray.length; i++) {
    newArray.push(theArray[i]);
}

theArray = newArray;
delete newArray;

Есть ли лучший способ сделать это? Есть ли в Javascript какие-либо встроенные функции для этого?

Сложность моего метода составляет O(n), и было бы действительно интересно увидеть более эффективные реализации.

Источник
Krisztián Balla
15 февраля 2018 в 08:56
18

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

rob
7 июня 2018 в 12:19
2

@ JennyO'Reilly, вы должны опубликовать это как ответ. Идеально соответствует моему варианту использования. Благодарность

Avernikoz
23 апреля 2019 в 18:34
2

Тесты производительности: jsperf.com/adding-element-to-the-array-start Но результаты разные для каждого браузера.

Ответы (17)

avatar
meagar
10 ноября 2011 в 00:37
3262

Используйте unshift. Это похоже на push, за исключением того, что он добавляет элементы в начало массива, а не в конец.

  • unshift / push - добавить элемент в начало / конец массива
  • shift / pop - удалить и вернуть первый / последний элемент массива

Простая диаграмма ...

   unshift -> array <- push
   shift   <- array -> pop
 

и диаграмма:

          add  remove  start  end
   push    X                   X
    pop           X            X
unshift    X             X
  shift           X      X

Ознакомьтесь с документацией по MDN Array. Практически каждый язык, который имеет возможность выталкивать / выталкивать элементы из массива, также будет иметь возможность отменять / сдвигать (иногда называемые push_front / pop_front) элементы, вам никогда не придется реализовывать их самостоятельно.


Как указано в комментариях, если вы хотите избежать изменения исходного массива, вы можете использовать concat, который объединяет два или более массива вместе. Вы можете использовать это, чтобы функционально протолкнуть один элемент на переднюю или заднюю часть существующего массива; для этого вам нужно превратить новый элемент в массив из одного элемента:

const array = [3, 2, 1]

const newFirstElement = 4

const newArray = [newFirstElement].concat(array) // [ 4, 3, 2, 1 ]

console.log(newArray);

concat также может добавлять элементы. Аргументы для concat могут быть любого типа; они неявно заключены в одноэлементный массив, если они еще не являются массивом:

const array = [3, 2, 1]

const newLastElement = 0

// Both of these lines are equivalent:
const newArray1 = array.concat(newLastElement) // [ 3, 2, 1, 0 ]
const newArray2 = array.concat([newLastElement]) // [ 3, 2, 1, 0 ]

console.log(newArray1);
console.log(newArray2);
StJohn3D
23 сентября 2016 в 18:27
60

Использование concat может быть предпочтительнее, поскольку он возвращает новый массив. Очень полезно для связывания. [thingToInsertToFront].concat(originalArray).reduce(fn).reverse().map(fn) и т.д ... Если вы используете unshift, вы не можете выполнить эту цепочку, потому что все, что вы получаете, - это длина.

linuxunil
25 апреля 2018 в 12:32
5

Shift / unshift, push / pop, соединение. Очень логичные названия для таких методов.

avatar
Sahil Thummar
6 мая 2022 в 10:54
0

let arr = [5, 6];

// using unshift
arr.unshift(4);
console.log('arr : ', arr);

// using spread operator 
arr = [3, ...arr];
console.log('arr : ', arr);

// using concat
arr = [2].concat(arr);
console.log('arr : ', arr);

// using splice
arr.splice(0, 0, 1)
console.log('arr : ', arr);
avatar
Zia Khan
18 сентября 2021 в 11:19
5

Методы массивов Pop, Push, Shift и Unshift в JavaScript JavaScript дает нам четыре метода для добавления или удаления элементов в начале или в конце массивов:

pop () : Удалить элемент из конца массива

let cats = ['Bob', 'Willy', 'Mini'];

cats.pop(); // ['Bob', 'Willy']

pop () возвращает удаленный элемент.

push () : Добавить элементы в конец массива

let cats = ['Bob'];

cats.push('Willy'); // ['Bob', 'Willy']

cats.push('Puff', 'George'); // ['Bob', 'Willy', 'Puff', 'George']
push() returns the new array length.

сдвиг () : Удалить элемент из начала массива

let cats = ['Bob', 'Willy', 'Mini'];

cats.shift(); // ['Willy', 'Mini']
shift() returns the removed item.

unshift () : Добавить элементы в начало массива

let cats = ['Bob'];

cats.unshift('Willy'); // ['Willy', 'Bob']

cats.unshift('Puff', 'George'); // ['Puff', 'George', 'Willy', 'Bob']
avatar
Denes Tarjan
19 марта 2021 в 10:40
0

Производительность: для небольших массивов вы можете выбрать то, что хотите, без существенной разницы в производительности. Но для нескольких десятков элементов unshift () намного лучше, чем что-либо еще.

Смотрите результаты здесь: https://jsben.ch/GDA3P

avatar
Ali Alizadeh
21 января 2021 в 11:47
2

вы можете сначала перевернуть массив, а затем добавить элемент в массив, а затем отменить его обратно.

const arr = [2,3,4,5,6];
const arr2 = 1;
arr.reverse();
//[6,5,4,3,2]
arr.push(arr2);

console.log(arr.reverse()); // [1,2,3,4,5,6]

хорошая блокировка

Али Ализаде.

avatar
Hamid Alinia
30 октября 2020 в 10:03
-2

вы можете перевернуть свой массив и отправить данные, в конце снова перевернуть его:

var arr=[2,3,4,5,6];
var arr2=1;
arr.reverse();
//[6,5,4,3,2]
arr.push(arr2);
avatar
kabirbaidhya
22 сентября 2020 в 15:56
17

Шпаргалка для добавления новых элементов в массив

1. Array#unshift

const list = [23, 45, 12, 67];

list.unshift(34);

console.log(list); // [34, 23, 45, 12, 67];

2. Array#splice

const list = [23, 45, 12, 67];

list.splice(0, 0, 34);

console.log(list); // [34, 23, 45, 12, 67];

3. Распространение ES6 ...

const list = [23, 45, 12, 67];
const newList = [34, ...list];

console.log(newList); // [34, 23, 45, 12, 67];

4. Array#concat

const list = [23, 45, 12, 67];
const newList = [32].concat(list);

console.log(newList); // [34, 23, 45, 12, 67];

Примечание: В каждом из этих примеров вы можете добавить несколько элементов к началу, добавив больше элементов для вставки.

avatar
A-312
7 июля 2020 в 09:13
2

Если вы хотите протолкнуть элементы, которые находятся в массиве, в начале вашего массива, используйте <func>.apply(<this> <Array of args>):

const arr = [1, 2];
arr.unshift.apply(arr, [3, 4]);
console.log(arr); // [3, 4, 1, 2]
avatar
Ben Adam
6 ноября 2019 в 17:09
17

Использование деструктуризации ES6: (предотвращение мутации исходного массива)

const newArr = [item, ...oldArr]

Jerry
14 июля 2020 в 08:08
2

По сути, это дублированный ответ Абденнора ТУМИ ...

avatar
AmerllicA
30 ноября 2018 в 14:25
21

Без мутации

Фактически, все 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+

Вышеописанным способом вы добавляете в начало / конец массива без мутации.

Ahmad Khani
4 декабря 2019 в 07:34
0

Я просто поместил функцию slice в конец originArray, чтобы предотвратить ее изменчивость.

Pedro Ferreira
23 февраля 2020 в 13:16
1

Потрясающие! Когда доходит до управления состоянием (Redux) ... этот ответ драгоценен!

Bat
13 октября 2021 в 07:28
0

[newItem, ... originArray]; // ES6 + Отличный синтаксис! Сработало отлично !! Благодарю.

avatar
Srikrushna
28 июня 2018 в 19:54
8

Используя splice, мы вставляем элемент в массив в начале:

arrName.splice( 0, 0, 'newName1' );
avatar
Krisztián Balla
7 июня 2018 в 13:12
9

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

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

192kb
15 августа 2019 в 10:12
2

Примечание: исходный массив должен быть пустым.

Olly Hodgson
7 июля 2021 в 21:52
0

В 2021 году ваш тест показывает полную победу unshift во всех основных браузерах для настольных ПК (по крайней мере, на этом Mac).

avatar
Abdennour TOUMI
16 сентября 2016 в 12:26
280

В ES6 используйте оператор распространения ...:

ДЕМО

var arr = [23, 45, 12, 67];
arr = [34, ...arr]; // RESULT : [34,23, 45, 12, 67]

console.log(arr)
devonj
8 августа 2017 в 19:01
24

также создает новый массив, полезный для чистых функций

Peter T.
2 марта 2018 в 09:49
1

Какое здесь влияние на производительность? Это медленнее, чем при использовании unshift ()?

Abdennour TOUMI
2 марта 2018 в 15:42
1

Конечно, это будет медленнее, поскольку это неизменяемый массив (создающий новый массив). Если вы работаете с большим массивом или производительность является вашим первым требованием, подумайте об использовании вместо него concat.

stackdave
16 июля 2018 в 06:11
0

производительность не важна в 2018 году, новые версии в браузере и узле получают одинаковую производительность

avatar
zangw
19 февраля 2016 в 10:56
85

Другой способ сделать это через concat

var arr = [1, 2, 3, 4, 5, 6, 7];
console.log([0].concat(arr));

Разница между concat и unshift в том, что concat возвращает новый массив. Производительность между ними можно найти здесь.

function fn_unshift() {
  arr.unshift(0);
  return arr;
}

function fn_concat_init() {
  return [0].concat(arr)
}

Вот результат теста

enter image description here

Ivan De Paz Centeno
15 июня 2016 в 09:12
0

Было бы хорошо, если бы в ваш ответ было добавлено сравнение производительности обоих, не считая ссылки.

Tigger
21 августа 2016 в 01:00
0

Я только что получил jsPerf временно недоступен, пока мы работаем над выпуском v2. Повторите попытку позже по ссылке. Еще одна веская причина включить результаты вместо ссылки на них.

Illuminator
3 ноября 2016 в 10:28
0

jsPref результат: unshift: 25,510 ± 3,18% на 99% медленнее concat: 2,436,894 ± 3,39% быстрее всего

passatgt
21 июля 2017 в 13:22
0

В последней версии Safari fn_unshift () работает быстрее.

rmcsharry
9 ноября 2017 в 11:22
0

В последней версии Safari (v 10) fn_unshift () снова работает медленнее.

avatar
ozimax06
20 апреля 2015 в 19:19
23

у вас есть массив: var arr = [23, 45, 12, 67];

Чтобы добавить элемент в начало, вы хотите использовать splice:

var arr = [23, 45, 12, 67];
arr.splice(0, 0, 34)
console.log(arr);
Lior Elrom
15 октября 2015 в 20:08
0

arr.splice (0, arr.length, 34);

Janus Troelsen
22 июня 2016 в 11:31
1

@LiorElrom, что делает ваш фрагмент?

icl7126
17 мая 2017 в 07:16
0

@poushy это зависит от браузера, в Firefox 54 на unshift на 50% быстрее (но в основном более читабельно)

Andrew
12 сентября 2019 в 16:15
0

@poushy Больше нет. Намного медленнее.

avatar
dreftymac
15 апреля 2013 в 17:28
50

Краткая шпаргалка:

Термины «сдвиг / не сдвиг» и «толкать / вытолкнуть» могут немного сбивать с толку, по крайней мере, для людей, которые могут не быть знакомы с программированием на C.

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

* array_unshift()  -  (aka Prepend ;; InsertBefore ;; InsertAtBegin )     
* array_shift()    -  (aka UnPrepend ;; RemoveBefore  ;; RemoveFromBegin )

* array_push()     -  (aka Append ;; InsertAfter   ;; InsertAtEnd )     
* array_pop()      -  (aka UnAppend ;; RemoveAfter   ;; RemoveFromEnd ) 
avatar
Maksym
10 ноября 2011 в 00:40
1553

array operations image

var a = [23, 45, 12, 67];
a.unshift(34);
console.log(a); // [34, 23, 45, 12, 67]
Pascal
29 июня 2013 в 21:24
156

Причина, по которой людям нужен визуальный ориентир для 4 повседневно используемых функций, заключается в зашифрованных именах функций ... Почему unshift не называется Insert? Shift должен быть Remove. так далее...

dreftymac
26 июля 2013 в 21:05
89

// Почему unshift не вызывается Insert? // Это происходит из соглашений языка программирования C, где элементы массива обрабатывались как стек. (см. perlmonks.org/?node_id=613129 для полного объяснения)

meagar
22 октября 2013 в 13:06
31

@Pascal Нет, вставка и удаление были бы особенно плохими названиями для этого; они подразумевают произвольный доступ вместо добавления / удаления из передней части массива

Shannon Hochkins
25 сентября 2014 в 01:50
28

Я бы подумал, что unshift должен удалить первый ключ, а shift вставит первый ключ, но это всего лишь моя общая мысль

CMS
25 марта 2016 в 19:41
3

вот почему C # настолько хорош, что вам не нужно так много комментариев вокруг вашего кода, код просто объясняет себя (в большинстве случаев)

Hunter WebDev
20 мая 2016 в 00:54
34

Мне нравится ссылка на ДНК

vsync
15 марта 2017 в 15:12
5

Учтите, что [23, 45, 12, 67].unshift(34) работать не будет. Массив сначала должен быть сохранен внутри переменной, потому что unshift сам по себе возвращает значение.