Come posso aggiungere nuovi elementi di array all'inizio di un array in Javascript?

Ho bisogno di aggiungere o anteporre elementi all'inizio di un array.

Ad esempio, se il mio array appare come di seguito:

[23, 45, 12, 67]

E la risposta dalla mia chiamata AJAX è 34, voglio che l'array aggiornato sia come il seguente:

[34, 23, 45, 12, 67]

Attualmente sto programmando di farlo in questo modo:

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

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

theArray = newArray;
delete newArray;

C'è un modo migliore per farlo? Javascript ha delle funzionalità integrate che lo fanno?

La complessità del mio metodo è O(n)e sarebbe davvero interessante vedere implementazioni migliori.

Usa unshift. È come push, tranne per il fatto che aggiunge elementi all'inizio della matrice anziché alla fine.

• unshift/ push- aggiunge un elemento all'inizio / alla fine di un array
• shift/ pop - rimuove e restituisce il primo / ultimo elemento di un array

Un semplice diagramma ...

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

e grafico:

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

Consulta la documentazione dell'array MDN . Praticamente ogni linguaggio che ha la capacità di spingere / pop elementi da un array avrà anche la possibilità di spostare / spostare elementi (a volte chiamati push_front/ pop_front), non dovresti mai implementarli da soli.

Come sottolineato nei commenti, se si desidera evitare di mutare l'array originale, è possibile utilizzare concat, che concatena due o più array insieme. Puoi usarlo per spingere funzionalmente un singolo elemento sul fronte o sul retro di un array esistente; per fare ciò, è necessario trasformare il nuovo elemento in un singolo array di elementi:

const array = [ 3, 2, 1 ]

const newFirstElement = 4

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

concatpuò anche aggiungere elementi. Gli argomenti concatpossono essere di qualsiasi tipo; sono implicitamente racchiusi in una matrice a elemento singolo, se non sono già una matrice:

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 ]

Con ES6, utilizzare l'operatore spread ...:

DEMO

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

console.log(arr)

Un altro modo per farlo concat

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

La differenza tra concate unshiftè che concatrestituisce un nuovo array. Le prestazioni tra loro possono essere trovate qui .

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

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

Ecco il risultato del test

Cheatsheet veloce:

I termini shift / unshift e push / pop possono essere un po 'confusi, almeno per le persone che potrebbero non avere familiarità con la programmazione in C.

Se non hai familiarità con il gergo, ecco una rapida traduzione di termini alternativi, che potrebbe essere più facile da ricordare:

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

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

hai un array: var arr = [23, 45, 12, 67];

Per aggiungere un elemento all'inizio, si desidera utilizzare splice:

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

Senza mutate

In realtà, tutti unshift/ pushe shift/ pop mutano l'array di origine.

Il unshift/ pushaggiungi un elemento alla matrice esistente da inizio / fine e shift/pop dall'inizio / fine rimuove un elemento dall'inizio / fine della matrice.

Ma ci sono alcuni modi per aggiungere elementi a un array senza una mutazione. il risultato è un nuovo array, per aggiungere alla fine dell'array utilizzare il codice seguente:

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

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

Per aggiungere l'inizio dell'array originale, utilizzare il codice seguente:

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

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

Con il modo sopra, aggiungi all'inizio / fine di un array senza una mutazione.

Utilizzo della destrutturazione ES6: (evitando la mutazione dell'array originale)

const newArr = [item, ...oldArr]

Se è necessario inserire continuamente un elemento all'inizio di un array, è più veloce utilizzare le pushistruzioni seguite da una chiamata reverse, invece di chiamare unshiftsempre.

Test benchmark: http://jsben.ch/kLIYf

Usando spliceinseriamo un elemento in un array al begnning:

arrName.splice( 0, 0, 'newName1' );