Como posso adicionar novos elementos de matriz no início de uma matriz em Javascript?

Eu preciso adicionar ou adicionar elementos no início de uma matriz.

Por exemplo, se minha matriz se parecer com abaixo:

[23, 45, 12, 67]

E a resposta da minha chamada AJAX é que 34eu quero que a matriz atualizada seja a seguinte:

[34, 23, 45, 12, 67]

Atualmente, estou planejando fazer assim:

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

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

theArray = newArray;
delete newArray;

Existe alguma maneira melhor de fazer isso? O Javascript tem alguma funcionalidade interna que faz isso?

A complexidade do meu método é O(n)e seria realmente interessante ver melhores implementações.

Use unshift. É como push, exceto que ele adiciona elementos ao início da matriz em vez do final.

• unshift/ push- adiciona um elemento ao início / fim de uma matriz
• shift/ pop - remove e retorna o primeiro / último elemento de uma matriz

Um diagrama simples ...

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

e gráfico:

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

Confira a documentação da matriz MDN . Praticamente todas as linguagens que têm a capacidade de empurrar / pop elementos de uma matriz também têm a capacidade de desviar / mudar (às vezes chamado push_front/ pop_front) elementos, você nunca precisará implementá-los.

Conforme apontado nos comentários, se você deseja evitar a mutação de sua matriz original, pode usar concat, que concatena duas ou mais matrizes juntas. Você pode usar isso para empurrar funcionalmente um único elemento para a frente ou para trás de uma matriz existente; para fazer isso, você precisa transformar o novo elemento em uma única matriz de elementos:

const array = [ 3, 2, 1 ]

const newFirstElement = 4

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

concattambém pode acrescentar itens. Os argumentos para concatpodem ser de qualquer tipo; eles estão implicitamente agrupados em uma matriz de elemento único, se ainda não forem uma 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 ]

Com o ES6, use o operador spread ...:

DEMO

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

console.log(arr)

Outra maneira de fazer isso através concat

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

A diferença entre concate unshifté que concatretorna uma nova matriz. O desempenho entre eles pode ser encontrado aqui .

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

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

Aqui está o resultado do teste

Folha de dicas rápida:

Os termos shift / unshift e push / pop podem ser um pouco confusos, pelo menos para as pessoas que podem não estar familiarizadas com a programação em C.

Se você não conhece o jargão, aqui está uma tradução rápida de termos alternativos, que podem ser mais fáceis de lembrar:

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

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

você tem uma matriz: var arr = [23, 45, 12, 67];

Para adicionar um item ao começo, você deseja usar splice:

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

Sem mutação

Na verdade, todos unshift/ pushe shift/ pop modificam a matriz de origem.

O unshift/ pushadiciona um item à matriz existente a partir do início / fim e shift/ popremove um item do início / fim de uma matriz.

Mas existem poucas maneiras de adicionar itens a uma matriz sem uma mutação. o resultado é uma nova matriz, para adicionar ao final da matriz, use o código abaixo:

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

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

Para adicionar ao início da matriz original, use o código abaixo:

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

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

Com a maneira acima, você adiciona ao início / fim de uma matriz sem uma mutação.

Usando a desestruturação do ES6: (evitando a mutação da matriz original)

const newArr = [item, ...oldArr]

Se você precisar inserir continuamente um elemento no início de uma matriz, é mais rápido usar pushinstruções seguidas por uma chamada para reverse, em vez de chamar unshifto tempo todo.

Teste de benchmark: http://jsben.ch/kLIYf

Usando splicenós inserimos um elemento em uma matriz no início:

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