Wie kann ich neue Array-Elemente am Anfang eines Arrays in Javascript hinzufügen?

1585

Ich muss Elemente am Anfang eines Arrays hinzufügen oder voranstellen.

Zum Beispiel, wenn mein Array wie folgt aussieht:

[23, 45, 12, 67]

Die Antwort von meinem AJAX-Aufruf lautet 34: Ich möchte, dass das aktualisierte Array wie folgt aussieht:

[34, 23, 45, 12, 67]

Derzeit plane ich es so zu machen:

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

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

theArray = newArray;
delete newArray;

Gibt es einen besseren Weg, dies zu tun? Verfügt Javascript über eine integrierte Funktionalität, die dies ermöglicht?

Die Komplexität meiner Methode ist O(n)und es wäre wirklich interessant, bessere Implementierungen zu sehen.

Mond
quelle
9
Zu Ihrer Information: Wenn Sie ein Element am Anfang eines Arrays kontinuierlich einfügen müssen, ist es schneller, pushAnweisungen zu verwenden , denen ein Aufruf von folgt reverse, anstatt unshiftständig aufzurufen .
Jenny O'Reilly
2
@ JennyO'Reilly du solltest dies als Antwort posten. Passte perfekt zu meinem Anwendungsfall. danke
rob
2
Leistungstests: jsperf.com/adding-element-to-the-array-start Die Ergebnisse sind jedoch für jeden Browser unterschiedlich.
Avernikoz

Antworten:

2811

Verwenden Sie unshift. Es ist wie push, außer dass Elemente am Anfang des Arrays anstelle des Endes hinzugefügt werden.

  • unshift/ push- Füge ein Element am Anfang / Ende eines Arrays hinzu
  • shift/ pop - entferne das erste / letzte Element eines Arrays und gib es zurück

Ein einfaches Diagramm ...

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

und Diagramm:

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

Lesen Sie die Dokumentation zum MDN-Array . Praktisch jede Sprache, die Elemente aus einem Array pushen / entfernen kann , kann auch Elemente verschieben / verschieben (manchmal als push_front/ bezeichnet pop_front). Sie sollten diese niemals selbst implementieren müssen.


Wie in den Kommentaren erwähnt, können Sie verwenden, wenn Sie vermeiden möchten, dass Ihr ursprüngliches Array mutiert concat, wodurch zwei oder mehr Arrays miteinander verknüpft werden. Sie können dies verwenden, um ein einzelnes Element funktional auf die Vorder- oder Rückseite eines vorhandenen Arrays zu verschieben. Dazu müssen Sie das neue Element in ein einzelnes Elementarray umwandeln:

const array = [ 3, 2, 1 ]

const newFirstElement = 4

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

concatkann auch Elemente anhängen. Die Argumente für concatkönnen von beliebigem Typ sein. Sie werden implizit in ein Einzelelement-Array eingeschlossen, sofern sie noch kein Array sind:

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 ]
meagar
quelle
51
Die Verwendung ist concatmöglicherweise vorzuziehen, da das neue Array zurückgegeben wird. Sehr nützlich zum Verketten. [thingToInsertToFront].concat(originalArray).reduce(fn).reverse().map(fn)etc ... Wenn Sie verwenden unshift, können Sie diese Verkettung nicht durchführen, da Sie nur die Länge zurückbekommen.
StJohn3D
4
Shift / Unshift, Push / Pop, Splice. Sehr logische Namen für solche Methoden.
Linuxunil
1397

Array-Operations-Image

var a = [23, 45, 12, 67];
a.unshift(34);
console.log(a); // [34, 23, 45, 12, 67]

Maksym
quelle
117
Der Grund, warum Menschen eine visuelle Richtlinie für 4 alltägliche Funktionen benötigen, liegt in den verschlüsselten Funktionsnamen ... Warum heißt Unshift nicht Insert? Die Schicht sollte entfernt werden. etc ...
Pascal
76
// Warum heißt unshift nicht Insert? // Es stammt aus den Konventionen der Programmiersprache C, in denen Array-Elemente wie ein Stapel behandelt wurden. (Siehe perlmonks.org/?node_id=613129 für eine vollständige Erklärung)
Dreftymac
25
@Pascal Nein, Einfügen und Entfernen wären dafür besonders schlechte Namen; Sie implizieren zufälligen Zugriff, anstatt von der Vorderseite des Arrays hinzuzufügen / zu entfernen
meagar
25
Ich hätte gedacht, dass das Verschieben den ersten Schlüssel entfernen und das Verschieben beim ersten Schlüssel einfügen würde, aber das ist nur mein allgemeiner Gedanke
Shannon Hochkins
27
Ich mag die DNA-Referenz
Hunter WebDev
235

Verwenden Sie mit ES6 den Spread-Operator ...:

DEMO

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

console.log(arr)

Abdennour TOUMI
quelle
19
erstellt auch ein neues Array, nützlich für reine Funktionen
Devonj
Was bedeutet dies für die Leistung? Ist es langsamer als unshift ()?
Peter T.
1
Sicher, es wird langsamer, da es sich um ein unveränderliches Array handelt (Erstellen eines neuen Arrays). Wenn Sie mit einem großen Array arbeiten oder die Leistung Ihre erste Anforderung ist, sollten Sie concatstattdessen verwenden.
Abdennour TOUMI
Leistung ist im Jahr 2018 nicht wichtig, neue Versionen in Browser und Knoten erhalten die gleiche Leistung
Stackdave
75

Ein anderer Weg, dies zu tun concat

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

Der Unterschied zwischen concatund unshiftbesteht darin, dass concatein neues Array zurückgegeben wird. Die Leistung zwischen ihnen kann hier gefunden werden .

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

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

Hier ist das Testergebnis

Geben Sie hier die Bildbeschreibung ein

zangw
quelle
Es wäre gut für Ihre Antwort, den Leistungsvergleich von beiden anzuhängen, abgesehen vom Hinzufügen der Referenz.
Ivan De Paz Centeno
Ich habe gerade erfahren, dass jsPerf vorübergehend nicht verfügbar ist, während wir an der Veröffentlichung von v2 arbeiten. Bitte versuchen Sie es später noch einmal über den Link. Ein weiterer guter Grund, die Ergebnisse einzuschließen, anstatt sie zu verknüpfen.
Tigger
jsPref Ergebnis :: 25.510unshift ± 3,18% 99% langsamer concat: 2.436.894 ± 3,39% am schnellsten
Illuminator
In der neuesten Safari läuft fn_unshift () schneller.
passatgt
In der neuesten Safari (Version 10) ist fn_unshift () wieder langsamer.
rmcsharry
45

Schneller Spickzettel:

Die Begriffe Shift / Unshift und Push / Pop können etwas verwirrend sein, zumindest für Leute, die mit der Programmierung in C möglicherweise nicht vertraut sind.

Wenn Sie mit dem Jargon nicht vertraut sind, finden Sie hier eine kurze Übersetzung alternativer Begriffe, die möglicherweise leichter zu merken sind:

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

* array_push()     -  (aka Append ;; InsertAfter   ;; InsertAtEnd )     
* array_pop()      -  (aka UnAppend ;; RemoveAfter   ;; RemoveFromEnd ) 
dreftymac
quelle
20

Sie haben ein Array: var arr = [23, 45, 12, 67];

Um ein Element am Anfang hinzuzufügen, möchten Sie Folgendes verwenden splice:

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

ozimax06
quelle
arr.splice (0, arr.length, 34);
Lior Elrom
1
@LiorElrom was macht dein Snippet?
Janus Troelsen
@ Poushy es ist browser-spezifisch, in Firefox 54 ist unshift50% schneller (aber meistens besser lesbar)
icl7126
@poushy Nicht mehr. Viel langsamer.
Andrew
17

Ohne zu mutieren

Tatsächlich mutieren alle unshift/ pushund shift/ das Ursprungsarray.pop

Das unshift/ pushHinzufügen eines Elements zum vorhandenen Array von Anfang / Ende und shift/ popEntfernen eines Elements vom Anfang / Ende eines Arrays.

Es gibt jedoch nur wenige Möglichkeiten, einem Array Elemente ohne Mutation hinzuzufügen. Das Ergebnis ist ein neues Array, das am Ende des Arrays den folgenden Code enthält:

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

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

Verwenden Sie den folgenden Code, um den Anfang des ursprünglichen Arrays hinzuzufügen:

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

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

Mit der obigen Methode fügen Sie den Anfang / das Ende eines Arrays ohne Mutation hinzu.

AmerllicA
quelle
Ich habe gerade eine sliceFunktion am Ende von gesetzt originArray, um zu verhindern, dass sie veränderbar ist.
Ahmad Khani
1
Genial! Wenn es um (Redux) State Management geht ... diese Antwort ist wertvoll!
Pedro Ferreira
1
Das ist der richtige Weg!
mmm
10

Verwendung der ES6-Destrukturierung: (Vermeidung von Mutationen aus dem ursprünglichen Array)

const newArr = [item, ...oldArr]

Ben Adam
quelle
9

var testdata = new Array();
testdata = [23, 45, 12, 67];
testdata = [34, ...testdata]; 
console.log(testdata)

Tirkesh Turkesh
quelle
1
Dies ist die gleiche Antwort wie Abdennour TOUMI
T04435
8

Wenn Sie kontinuierlich ein Element am Anfang eines Arrays einfügen müssen, ist es schneller, pushAnweisungen zu verwenden , denen ein Aufruf von folgt reverse, anstatt unshiftständig aufzurufen .

Benchmark-Test: http://jsben.ch/kLIYf

Jenny O'Reilly
quelle
1
Hinweis: Das anfängliche Array sollte leer sein.
192kb
5

Mit splicefügen wir am Anfang ein Element in ein Array ein:

arrName.splice( 0, 0, 'newName1' );
Srikrushna
quelle
Es ist eine richtige Antwort. Vielen Dank, dass Sie Srikrushna
Khanh Tran