Como estender uma matriz JavaScript existente com outra matriz, sem criar uma nova matriz

Não parece haver uma maneira de estender uma matriz JavaScript existente com outra matriz, ou seja, emular o extendmétodo do Python .

Eu quero alcançar o seguinte:

>>> a = [1, 2]
[1, 2]
>>> b = [3, 4, 5]
[3, 4, 5]
>>> SOMETHING HERE
>>> a
[1, 2, 3, 4, 5]

Eu sei que existe um a.concat(b)método, mas ele cria uma nova matriz em vez de simplesmente estender a primeira. Eu gostaria de um algoritmo que funcione eficientemente quando afor significativamente maior que b(isto é, um que não copie a).

_{Nota: Esta não é uma duplicata de Como acrescentar algo a uma matriz? - o objetivo aqui é adicionar todo o conteúdo de uma matriz à outra e fazê-lo "no lugar", ou seja, sem copiar todos os elementos da matriz estendida.}

O .pushmétodo pode receber vários argumentos. Você pode usar o operador spread para passar todos os elementos da segunda matriz como argumentos para .push:

>>> a.push(...b)

Se o seu navegador não suportar o ECMAScript 6, você poderá usar .apply:

>>> a.push.apply(a, b)

Ou talvez, se você acha mais claro:

>>> Array.prototype.push.apply(a,b)

Observe que todas essas soluções falharão com um erro de estouro de pilha se a matriz bfor muito longa (o problema começa em cerca de 100.000 elementos, dependendo do navegador).
Se você não pode garantir que bseja curto o suficiente, use uma técnica padrão baseada em loop descrita na outra resposta.

_{Atualização 2018 : Uma resposta melhor é a mais recente de uma mina : a.push(...b). Não vote mais nessa, pois ela nunca respondeu à pergunta, mas foi um hack de 2015 em torno do primeiro hit no Google :)}

Para aqueles que simplesmente pesquisaram "JavaScript array extend" e chegaram aqui, você pode muito bem usar Array.concat.

var a = [1, 2, 3];
a = a.concat([5, 4, 3]);

O Concat retornará uma cópia da nova matriz, pois o iniciador de threads não desejava. Mas você pode não se importar (certamente, para a maioria dos usos, isso será bom).

Há também um bom açúcar ECMAScript 6 para isso na forma do operador de propagação:

const a = [1, 2, 3];
const b = [...a, 5, 4, 3];

(Ele também copia.)

Você deve usar uma técnica baseada em loop. Outras respostas nesta página baseadas no uso .applypodem falhar em matrizes grandes.

Uma implementação baseada em loop bastante concisa é:

Array.prototype.extend = function (other_array) {
    /* You should include a test to check whether other_array really is an array */
    other_array.forEach(function(v) {this.push(v)}, this);
}

Você pode fazer o seguinte:

var a = [1,2,3];
var b = [5,4,3];
a.extend(b);

A resposta do DzinX (usando push.apply) e outros .applymétodos baseados falham quando a matriz que estamos anexando é grande (testes mostram que para mim grandes são> 150.000 entradas aproximadamente no Chrome e> 500.000 entradas no Firefox). Você pode ver esse erro ocorrendo neste jsperf .

Ocorre um erro porque o tamanho da pilha de chamadas é excedido quando 'Function.prototype.apply' é chamado com uma matriz grande como o segundo argumento. (MDN tem uma observação sobre os perigos de exceder o tamanho da pilha de chamadas usando Function.prototype.apply - consulte a seção "funções aplicáveis ​​e incorporadas".)

Para uma comparação de velocidade com outras respostas nesta página, consulte este jsperf (graças ao EaterOfCode). A implementação baseada em loop é semelhante em velocidade ao uso Array.push.apply, mas tende a ser um pouco mais lenta que Array.slice.apply.

Curiosamente, se a matriz que você está anexando é escassa, o forEachmétodo baseado acima pode tirar vantagem da escassez e superar os .applymétodos baseados; confira este jsperf se você quiser testar isso por si mesmo.

A propósito, não fique tentado (como eu estava!) A reduzir ainda mais a implementação do forEach para:

Array.prototype.extend = function (array) {
    array.forEach(this.push, this);
}

porque isso produz resultados de lixo! Por quê? Porque Array.prototype.forEachfornece três argumentos para a função que chama - estes são: (element_value, element_index, source_array). Tudo isso será enviado para sua primeira matriz para cada iteração forEachse você usar "forEach (this.push, this)"!

Sinto que o mais elegante hoje em dia é:

arr1.push(...arr2);

O artigo da MDN sobre o operador de spread menciona essa maneira agradável e açucarada no ES2015 (ES6):

Um empurrão melhor

Exemplo: push é frequentemente usado para enviar uma matriz ao final de uma matriz existente. No ES5, isso geralmente é feito como:

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
// Append all items from arr2 onto arr1
Array.prototype.push.apply(arr1, arr2);

No ES6 com spread, isso se torna:

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1.push(...arr2);

Observe que arr2não pode ser enorme (mantenha-o abaixo de cerca de 100.000 itens), porque a pilha de chamadas transborda, conforme resposta do jcdude.

Primeiro, algumas palavras sobre apply()JavaScript para ajudar a entender por que usamos:

O apply()método chama uma função com um determinado thisvalor e os argumentos são fornecidos como uma matriz.

O Push espera uma lista de itens a serem adicionados à matriz. O apply()método, no entanto, aceita os argumentos esperados para a chamada de função como uma matriz. Isso nos permite facilmente pushos elementos de uma matriz em outra matriz com o push()método embutido .

Imagine que você tem estas matrizes:

var a = [1, 2, 3, 4];
var b = [5, 6, 7];

e simplesmente faça o seguinte:

Array.prototype.push.apply(a, b);

O resultado será:

a = [1, 2, 3, 4, 5, 6, 7];

O mesmo pode ser feito no ES6 usando o operador de spread (" ...") assim:

a.push(...b); //a = [1, 2, 3, 4, 5, 6, 7]; 

Mais curto e melhor, mas não totalmente suportado em todos os navegadores no momento.

Além disso, se você deseja mover tudo da matriz bpara o aesvaziamento bno processo, você pode fazer isso:

while(b.length) {
  a.push(b.shift());
} 

e o resultado será o seguinte:

a = [1, 2, 3, 4, 5, 6, 7];
b = [];

Se você deseja usar o jQuery, há $ .merge ()

Exemplo:

a = [1, 2];
b = [3, 4, 5];
$.merge(a,b);

Resultado: a = [1, 2, 3, 4, 5]

Eu gosto do a.push.apply(a, b)método descrito acima e, se você quiser, pode sempre criar uma função de biblioteca como esta:

Array.prototype.append = function(array)
{
    this.push.apply(this, array)
}

e use assim

a = [1,2]
b = [3,4]

a.append(b)

É possível fazer isso usando splice():

b.unshift(b.length)
b.unshift(a.length)
Array.prototype.splice.apply(a,b) 
b.shift() // Restore b
b.shift() // 

Mas apesar de ser mais feio, não é mais rápido que push.apply, pelo menos não no Firefox 3.0.

Esta solução funciona para mim (usando o operador de propagação do ECMAScript 6):

let array = ['my', 'solution', 'works'];
let newArray = [];
let newArray2 = [];
newArray.push(...array); // Adding to same array
newArray2.push([...array]); // Adding as child/leaf/sub-array
console.log(newArray);
console.log(newArray2);

Você pode criar um polyfill para estender como eu tenho abaixo. Ele será adicionado à matriz; no local e retorne a si próprio, para que você possa encadear outros métodos.

if (Array.prototype.extend === undefined) {
  Array.prototype.extend = function(other) {
    this.push.apply(this, arguments.length > 1 ? arguments : other);
    return this;
  };
}

function print() {
  document.body.innerHTML += [].map.call(arguments, function(item) {
    return typeof item === 'object' ? JSON.stringify(item) : item;
  }).join(' ') + '\n';
}
document.body.innerHTML = '';

var a = [1, 2, 3];
var b = [4, 5, 6];

print('Concat');
print('(1)', a.concat(b));
print('(2)', a.concat(b));
print('(3)', a.concat(4, 5, 6));

print('\nExtend');
print('(1)', a.extend(b));
print('(2)', a.extend(b));
print('(3)', a.extend(4, 5, 6));

body {
  font-family: monospace;
  white-space: pre;
}

Combinando as respostas ...

Array.prototype.extend = function(array) {
    if (array.length < 150000) {
        this.push.apply(this, array)
    } else {
        for (var i = 0, len = array.length; i < len; ++i) {
            this.push(array[i]);
        };
    }  
}

Outra solução para mesclar mais de duas matrizes

var a = [1, 2],
    b = [3, 4, 5],
    c = [6, 7];

// Merge the contents of multiple arrays together into the first array
var mergeArrays = function() {
 var i, len = arguments.length;
 if (len > 1) {
  for (i = 1; i < len; i++) {
    arguments[0].push.apply(arguments[0], arguments[i]);
  }
 }
};

Em seguida, ligue e imprima como:

mergeArrays(a, b, c);
console.log(a)

A saída será: Array [1, 2, 3, 4, 5, 6, 7]

A resposta é super simples.

>>> a = [1, 2]
[1, 2]
>>> b = [3, 4, 5]
[3, 4, 5]
>>> SOMETHING HERE
(The following code will combine the two arrays.)

a = a.concat(b);

>>> a
[1, 2, 3, 4, 5]

O Concat atua de maneira muito semelhante à concatenação de strings JavaScript. Ele retornará uma combinação do parâmetro que você colocou na função concat no final da matriz na qual você chama a função. O ponto crucial é que você deve atribuir o valor retornado a uma variável ou ele se perde. Então por exemplo

a.concat(b);  <--- This does absolutely nothing since it is just returning the combined arrays, but it doesn't do anything with it.

Use em Array.extendvez de Array.pushpara> 150.000 registros.

if (!Array.prototype.extend) {
  Array.prototype.extend = function(arr) {
    if (!Array.isArray(arr)) {
      return this;
    }

    for (let record of arr) {
      this.push(record);
    }

    return this;
  };
}

Super simples, não conta com operadores espalhados ou aplica, se isso é um problema.

b.map(x => a.push(x));

Depois de executar alguns testes de desempenho, é muito lento, mas responde à pergunta em relação à não criação de uma nova matriz. O Concat é significativamente mais rápido, até o jQuery $.merge()grita.

https://jsperf.com/merge-arrays19b/1