Como posso adicionar novos elementos a um array no início de um array em JavaScript?

Eu tenho a necessidade de adicionar ou inserir elementos no início de um array.

Por exemplo, se o meu array parecer com o abaixo:

[23, 45, 12, 67]

E a resposta da minha chamada AJAX é 34, eu quero que o array atualizado seja como o 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 uma maneira melhor de fazer isso? O JavaScript tem alguma funcionalidade embutida que faz isso?

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

Resposta #1

Use unshift. É como push, exceto que adiciona elementos ao início do array em vez de ao final.

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

Um diagrama simples...

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

e gráfico:

Confira a documentação de Arrays da MDN. Quase toda linguagem que tem a capacidade de adicionar/remover elementos de um array também terá a capacidade de descolar/colar no início (às vezes chamado de push_front/pop_front) elementos, você nunca deverá ter que implementar isso por conta própria.

Como apontado nos comentários, se você quiser evitar modificar seu array original, você pode usar concat, que concatena dois ou mais arrays juntos. Você pode usar isso para adicionar funcionalmente um único elemento no início ou no final de um array existente; para fazer isso, você precisa transformar o novo elemento em um array de um único elemento:

const array = [3, 2, 1]

const newFirstElement = 4

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

console.log(newArray);

concat também pode adicionar itens. Os argumentos de concat podem ser de qualquer tipo; eles são implicitamente embrulhados em um array de um único elemento, se ainda não forem um array:

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);

Resposta #2

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

Resposta #3

Com ES6, use o operador spread ...:

Demo

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

console.log(arr)

Resposta #4

Outra maneira de fazer isso é através de concat:

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

A diferença entre concat e unshift é que concat retorna um novo array. 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:

Resposta #5

Resumo rápido:

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

Se você não está familiarizado com o jargão, aqui está uma rápida tradução de termos alternativos, que pode ser mais fácil 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 ) 

Resposta #6

Usando desestruturação do ES6 (evitando mutação do array original):

const newArr = [item, ...oldArr]

Resposta #7

Você tem um array: var arr=[23, 45, 12, 67];

Para adicionar um item no início, você quer usar splice:

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

Resposta #8

Sem Mutação

Na verdade, todos unshift/push e shift/pop modificam o array de origem.

O unshift/push adiciona um item ao array existente do início/fim e shift/pop remove um item do início/fim de um array.

Mas existem poucas maneiras de adicionar itens a um array sem mutação. O resultado é um novo array; para adicionar ao final do array, 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 do array 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 um array sem uma mutação.

Resposta #9

Cheatsheet para adicionar novos elementos no início do array

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. operador spread do 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];

Nota: Em cada um desses exemplos, você pode adicionar vários itens fornecendo mais itens para inserir.

Resposta #10

Se você precisar inserir continuamente um elemento no início de um array, é mais rápido usar instruções push seguidas por uma chamada a reverse, em vez de chamar unshift o tempo todo.

Teste de referência: http://jsben.ch/kLIYf