¿Cómo puedo agregar nuevos elementos de matriz al comienzo de una matriz en Javascript?

Tengo la necesidad de agregar o anteponer elementos al comienzo de una matriz.

Por ejemplo, si mi matriz se ve a continuación:

[23, 45, 12, 67]

Y la respuesta de mi llamada AJAX es 34, quiero que la matriz actualizada sea como la siguiente:

[34, 23, 45, 12, 67]

Actualmente estoy planeando hacerlo así:

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

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

theArray = newArray;
delete newArray;

¿Hay alguna forma mejor de hacer esto? ¿Tiene Javascript alguna funcionalidad incorporada que haga esto?

La complejidad de mi método es O(n)y sería realmente interesante ver mejores implementaciones.

Uso unshift. Es como push, excepto que agrega elementos al principio de la matriz en lugar del final.

• unshift/ push- agrega un elemento al principio / final de una matriz
• shift/ pop - eliminar y devolver el primer / último elemento de una matriz

Un diagrama simple ...

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

y gráfico:

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

Consulte la documentación de la matriz MDN . Prácticamente todos los lenguajes que tienen la capacidad de insertar / extraer elementos de una matriz también tendrán la capacidad de quitar / cambiar elementos (a veces llamados push_front/ pop_front), nunca debería tener que implementarlos usted mismo.

Como se señaló en los comentarios, si desea evitar la mutación de su matriz original, puede usar concat, que concatena dos o más matrices juntas. Puede usar esto para empujar funcionalmente un solo elemento en la parte frontal o posterior de una matriz existente; para hacerlo, debe convertir el nuevo elemento en una sola matriz de elementos:

const array = [ 3, 2, 1 ]

const newFirstElement = 4

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

concatTambién puede agregar elementos. Los argumentos concatpueden ser de cualquier tipo; están implícitamente envueltos en una matriz de un solo elemento, si aún no son una matriz:

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, use el operador de propagación ...:

MANIFESTACIÓN

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

console.log(arr)

Otra forma de hacerlo a través de concat

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

La diferencia entre concaty unshiftes que concatdevuelve una nueva matriz. El rendimiento entre ellos se puede encontrar aquí .

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

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

Aquí está el resultado de la prueba.

Hoja de trucos rápida:

Los términos shift / unshift y push / pop pueden ser un poco confusos, al menos para las personas que pueden no estar familiarizadas con la programación en C.

Si no está familiarizado con la jerga, aquí hay una traducción rápida de términos alternativos, que puede ser más fácil de recordar:

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

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

tienes una matriz: var arr = [23, 45, 12, 67];

Para agregar un elemento al principio, desea usar splice:

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

Sin mutar

En realidad, todos unshift/ pushy shift/ pop mutan la matriz de origen.

El unshift/ pushagregar un elemento a la matriz existente desde el inicio / final y shift/ popeliminar un elemento desde el principio / final de una matriz.

Pero hay pocas formas de agregar elementos a una matriz sin una mutación. el resultado es una nueva matriz, para agregar al final de la matriz use el siguiente código:

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

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

Para agregar al comienzo de la matriz original, use el siguiente código:

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

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

Con la forma anterior, agrega al principio / final de una matriz sin una mutación.

Uso de la desestructuración de ES6: (evitando la mutación de la matriz original)

const newArr = [item, ...oldArr]

Si necesita insertar continuamente un elemento al comienzo de una matriz, es más rápido usar pushsentencias seguidas de una llamada a reverse, en lugar de llamar aunshift todo el tiempo.

Prueba de referencia: http://jsben.ch/kLIYf

Usando splice, insertamos un elemento en una matriz al comienzo:

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