Jak rozszerzyć istniejącą tablicę JavaScript o inną tablicę, bez tworzenia nowej tablicy

Wydaje się, że nie ma sposobu na rozszerzenie istniejącej tablicy JavaScript o inną tablicę, tj. Na emulację extendmetody Pythona .

Chcę osiągnąć następujące cele:

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

Wiem, że istnieje a.concat(b)metoda, ale tworzy ona nową tablicę zamiast po prostu rozszerzać pierwszą. Chciałbym algorytm, który działa skutecznie, gdy ajest znacznie większy niż b(tj. Taki, który nie kopiuje a).

_{Uwaga: To nie jest kopia jak dołączyć coś do tablicy? - celem jest dodanie całej zawartości jednej tablicy do drugiej i zrobienie tego „na miejscu”, tzn. bez kopiowania wszystkich elementów rozszerzonej tablicy.}

.pushMetoda może trwać wiele argumentów. Możesz użyć operatora rozkładania, aby przekazać wszystkie elementy drugiej tablicy jako argumenty do .push:

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

Jeśli twoja przeglądarka nie obsługuje ECMAScript 6, możesz .applyzamiast tego użyć :

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

A może uważasz, że to jest jaśniejsze:

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

Pamiętaj, że wszystkie te rozwiązania zakończą się niepowodzeniem z błędem przepełnienia stosu, jeśli tablica bjest zbyt długa (problemy zaczynają się od około 100 000 elementów, w zależności od przeglądarki).
Jeśli nie możesz zagwarantować, że bjest wystarczająco krótki, powinieneś użyć standardowej techniki opartej na pętli opisanej w drugiej odpowiedzi.

_{Aktualizacja 2018 : Lepszą odpowiedź jest nowsza jeden z kopalni : a.push(...b). Nie głosuj więcej na ten temat, ponieważ tak naprawdę nigdy nie odpowiedział na pytanie, ale był to hack z 2015 roku wokół pierwszego trafienia w Google :)}

Dla tych, którzy po prostu szukali „Rozszerzenia tablicy JavaScript” i znaleźli się tutaj, możesz bardzo dobrze użyć Array.concat.

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

Concat zwróci kopię nowej tablicy, ponieważ początkowy wątek nie chciał. Ale może ci to nie przeszkadzać (z pewnością w przypadku większości zastosowań będzie to w porządku).

Do tego jest też trochę dobrego cukru ECMAScript 6 w postaci operatora spreadu:

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

(Kopiuje również.)

Powinieneś użyć techniki opartej na pętli. Inne odpowiedzi na tej stronie oparte na użyciu .applymogą się nie powieść w przypadku dużych tablic.

Dość zwarta implementacja oparta na pętli to:

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

Następnie możesz wykonać następujące czynności:

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

Odpowiedź DzinX (przy użyciu push.apply) i inne .applyoparte na nim metody zawodzą, gdy tablica, którą dodajemy, jest duża (testy pokazują, że dla mnie duża jest> około 150 000 wpisów w Chrome i> 500 000 wpisów w Firefox). Możesz zobaczyć ten błąd występujący w tym jsperf .

Wystąpił błąd, ponieważ rozmiar stosu wywołań został przekroczony, gdy „Function.prototype.apply” jest wywoływany z dużą tablicą jako drugim argumentem. (MDN ma uwagę na temat niebezpieczeństw związanych z przekroczeniem wielkości stosu wywołań przy użyciu Function.prototype.apply - patrz sekcja zatytułowana „Zastosuj i funkcje wbudowane”).

Aby porównać szybkość z innymi odpowiedziami na tej stronie, sprawdź ten jsperf (dzięki EaterOfCode). Implementacja oparta na pętli jest podobna pod względem szybkości do używania Array.push.apply, ale zwykle jest nieco wolniejsza niż Array.slice.apply.

Co ciekawe, jeśli dodawana macierz jest rzadka, forEachpowyższa metoda oparta na rzadkości może skorzystać z rzadkości i przewyższyć .applymetody oparte; sprawdź ten jsperf, jeśli chcesz to przetestować sam.

Nawiasem mówiąc, nie ulegaj pokusie (tak jak ja!) Dalszego skrócenia implementacji forEach do:

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

ponieważ powoduje to śmieciowe wyniki! Dlaczego? Ponieważ Array.prototype.forEachudostępnia trzy argumenty funkcji, którą wywołuje - są to: (element_value, element_index, source_array). Wszystkie zostaną forEachprzekazane do pierwszej tablicy dla każdej iteracji, jeśli użyjesz „forEach (this.push, this)”!

Najbardziej elegancki wydaje mi się w tych dniach:

arr1.push(...arr2);

Artykuł MDN na temat operatora spreadu wspomina o tym miłym, słodkim sposobie w ES2015 (ES6):

Lepsze pchnięcie

Przykład: push jest często używane do wypychania tablicy na koniec istniejącej tablicy. W ES5 jest to często wykonywane jako:

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

W ES6 z spreadem staje się to:

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

Zauważ, że arr2nie może być ogromne (trzymaj poniżej 100 000 przedmiotów), ponieważ stos wywołań przepełnia się, zgodnie z odpowiedzią jcdude.

Najpierw kilka słów o apply()JavaScript, aby zrozumieć, dlaczego go używamy:

apply()Sposób wywołuje funkcję z daną thiswartością i argumentów przedstawionych w tablicy.

Push oczekuje listy elementów do dodania do tablicy. apply()Sposób przyjmuje jednak oczekiwanych argumentów do połączenia funkcji jako macierzy. To pozwala nam łatwo łączyć pushelementy jednej tablicy w drugą za pomocą wbudowanej push()metody.

Wyobraź sobie, że masz te tablice:

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

i po prostu zrób to:

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

Wynik będzie:

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

To samo można zrobić w ES6 za pomocą operatora spreadu („ ...”) w następujący sposób:

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

Krótsze i lepsze, ale obecnie nie w pełni obsługiwane we wszystkich przeglądarkach.

Również jeśli chcesz przenieść wszystko z tablicy bdo a, opróżniając bproces, możesz to zrobić:

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

a wynik będzie następujący:

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

Jeśli chcesz użyć jQuery, jest $ .merge ()

Przykład:

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

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

Podoba mi się a.push.apply(a, b)metoda opisana powyżej, a jeśli chcesz, zawsze możesz utworzyć funkcję biblioteki w ten sposób:

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

i użyj tego w ten sposób

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

a.append(b)

Można to zrobić za pomocą splice():

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

Ale chociaż jest brzydszy, nie jest szybszy niż push.apply, przynajmniej nie w Firefoksie 3.0.

To rozwiązanie działa dla mnie (przy użyciu operatora rozprzestrzeniania 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);

Możesz utworzyć polifill dla rozszerzenia, jak mam poniżej. Dodanie do tablicy; w miejscu i zwrócić się, aby można było połączyć inne metody.

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

Łączenie odpowiedzi ...

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

Kolejne rozwiązanie do połączenia więcej niż dwóch tablic

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

Następnie zadzwoń i wydrukuj jako:

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

Dane wyjściowe będą: Array [1, 2, 3, 4, 5, 6, 7]

Odpowiedź jest bardzo prosta.

>>> 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]

Concat działa bardzo podobnie do konkatenacji ciągów JavaScript. Zwróci kombinację parametru, który umieściłeś w funkcji concat na końcu tablicy, na której wywołujesz funkcję. Najważniejsze jest to, że musisz przypisać zwróconą wartość do zmiennej, aby się zgubiła. Na przykład

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

Użyj Array.extendzamiast Array.push> 150 000 rekordów.

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 prosty, nie liczy na operatorów spreadów ani nie stosuje się, jeśli to jest problem.

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

Po uruchomieniu kilku testów wydajności jest to bardzo powolne, ale odpowiada na pytanie, czy nie należy tworzyć nowej tablicy. Concat jest znacznie szybszy, nawet jQuery $.merge()go wyrzuca.

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