Kopieren Sie Array-Elemente in ein anderes Array

Ich habe ein JavaScript-Array, dataArraydas ich in ein neues Array verschieben möchte newArray. Außer ich will nicht newArray[0]sein dataArray. Ich möchte alle Elemente in das neue Array einfügen:

var newArray = [];

newArray.pushValues(dataArray1);
newArray.pushValues(dataArray2);
// ...

oder noch besser:

var newArray = new Array (
   dataArray1.values(),
   dataArray2.values(),
   // ... where values() (or something equivalent) would push the individual values into the array, rather than the array itself
);

Das neue Array enthält nun alle Werte der einzelnen Datenarrays. Gibt es eine Kurzform wie " pushValuesverfügbar", damit ich nicht jedes einzelne durchlaufen dataArrayund die Elemente einzeln hinzufügen muss?

Verwenden Sie die Concat- Funktion wie folgt :

var arrayA = [1, 2];
var arrayB = [3, 4];
var newArray = arrayA.concat(arrayB);

Der Wert von newArraywird [1, 2, 3, 4]( arrayAund arrayBbleibt unverändert; concaterstellt und gibt ein neues Array für das Ergebnis zurück).

Vorausgesetzt, Ihre Arrays sind nicht sehr groß (siehe Einschränkung unten), können Sie die push()Methode des Arrays verwenden, an das Sie Werte anhängen möchten. push()kann mehrere Parameter annehmen, sodass Sie die apply()Methode verwenden können, um das zu pushende Array von Werten als Liste von Funktionsparametern zu übergeben. Dies hat den Vorteil concat(), dass dem Array Elemente hinzugefügt werden, anstatt ein neues Array zu erstellen.

Es scheint jedoch, dass bei großen Arrays (in der Größenordnung von 100.000 Mitgliedern oder mehr) dieser Trick fehlschlagen kann . Für solche Arrays ist die Verwendung einer Schleife ein besserer Ansatz. Weitere Informationen finden Sie unter https://stackoverflow.com/a/17368101/96100 .

var newArray = [];
newArray.push.apply(newArray, dataArray1);
newArray.push.apply(newArray, dataArray2);

Vielleicht möchten Sie dies in eine Funktion verallgemeinern:

function pushArray(arr, arr2) {
    arr.push.apply(arr, arr2);
}

... oder zum ArrayPrototyp hinzufügen :

Array.prototype.pushArray = function(arr) {
    this.push.apply(this, arr);
};

var newArray = [];
newArray.pushArray(dataArray1);
newArray.pushArray(dataArray2);

... oder das Original emulieren push() Verfahren durch mehrere Parameter unter Verwendung der Tatsache ermöglicht , dass concat(), wie push(), mehrere Parameter erlaubt:

Array.prototype.pushArray = function() {
    this.push.apply(this, this.concat.apply([], arguments));
};

var newArray = [];
newArray.pushArray(dataArray1, dataArray2);

Hier ist eine schleifenbasierte Version des letzten Beispiels, die für große Arrays und alle gängigen Browser geeignet ist, einschließlich IE <= 8:

Array.prototype.pushArray = function() {
    var toPush = this.concat.apply([], arguments);
    for (var i = 0, len = toPush.length; i < len; ++i) {
        this.push(toPush[i]);
    }
};

Ich werde noch eine "zukunftssichere" Antwort hinzufügen

In ECMAScript 6 können Sie die Spread-Syntax verwenden :

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

console.log(arr1)

Die Spread-Syntax ist noch nicht in allen gängigen Browsern enthalten. Informationen zur aktuellen Kompatibilität finden Sie in dieser (ständig aktualisierten) Kompatibilitätstabelle .

Sie können jedoch die Spread-Syntax mit Babel.js verwenden .

bearbeiten:

Weitere Kommentare zur Leistung finden Sie in der Antwort von Jack Giffin unten. Es scheint, dass concat immer noch besser und schneller ist als der Spread-Operator.

Einen eleganten Weg von MDN gefunden

var vegetables = ['parsnip', 'potato'];
var moreVegs = ['celery', 'beetroot'];

// Merge the second array into the first one
// Equivalent to vegetables.push('celery', 'beetroot');
Array.prototype.push.apply(vegetables, moreVegs);

console.log(vegetables); // ['parsnip', 'potato', 'celery', 'beetroot']

Oder Sie können die spread operatorFunktion von ES6 verwenden:

let fruits = [ 'apple', 'banana'];
const moreFruits = [ 'orange', 'plum' ];

fruits.push(...moreFruits); // ["apple", "banana", "orange", "plum"]

var a=new Array('a','b','c');
var b=new Array('d','e','f');
var d=new Array('x','y','z');
var c=a.concat(b,d)

Löst das Ihr Problem?

Folgendes scheint mir am einfachsten zu sein:

var newArray = dataArray1.slice();
newArray.push.apply(newArray, dataArray2);

Da "push" eine variable Anzahl von Argumenten akzeptiert, können Sie die applyMethode von verwendenpush Funktion verwenden, um alle Elemente eines anderen Arrays zu pushen. Es erstellt einen Aufruf zum Push mit seinem ersten Argument ("newArray" hier) als "this" und den Elementen des Arrays als verbleibenden Argumenten.

Die sliceAnweisung in der ersten Anweisung erhält eine Kopie des ersten Arrays, sodass Sie sie nicht ändern.

Update Wenn Sie eine Version von Javascript mit verfügbarem Slice verwenden, können Sie den pushAusdruck wie folgt vereinfachen :

newArray.push(...dataArray2)

Die folgende Funktion hat kein Problem mit der Länge der Arrays und bietet eine bessere Leistung als alle vorgeschlagenen Lösungen:

function pushArray(list, other) {
    var len = other.length;
    var start = list.length;
    list.length = start + len;
    for (var i = 0; i < len; i++ , start++) {
        list[start] = other[i];
    }
}

Leider weigert sich jspref, meine Einsendungen anzunehmen. Hier sind die Ergebnisse unter Verwendung von Benchmark.js

        Name            |   ops/sec   |  ± %  | runs sampled
for loop and push       |      177506 |  0.92 | 63
Push Apply              |      234280 |  0.77 | 66
spread operator         |      259725 |  0.40 | 67
set length and for loop |      284223 |  0.41 | 66

wo

für loop und push ist:

    for (var i = 0, l = source.length; i < l; i++) {
        target.push(source[i]);
    }

Drücken Sie Übernehmen:

target.push.apply(target, source);

Spread-Operator:

    target.push(...source);

und schließlich ist die 'eingestellte Länge und for-Schleife' die obige Funktion

𝗥𝗲𝘀𝗲𝗮𝗿𝗰𝗵 𝗔𝗻𝗱 𝗥𝗲𝘀𝘂𝗹𝘁𝘀

Für die Fakten werden ein Leistungstest bei jsperf und die Überprüfung einiger Dinge in der Konsole durchgeführt. Für die Recherche wird die Website irt.org verwendet. Unten finden Sie eine Sammlung all dieser Quellen sowie eine Beispielfunktion unten.

╔═══════════════╦══════╦═════════════════╦════════ ═══════╦═════════╦══════════╗
║ Methode ║Concat║slice & push.apply ║ push.apply x2 ║ ForLoop ║Spread ║
╠═══════════════╬══════╬═════════════════╬════════ ═══════╬═════════╬══════════╣
║ mOps / Sec ║179 ║104 ║ 76 ║ 81 ║28 ║
╠═══════════════╬══════╬═════════════════╬════════ ═══════╬═════════╬══════════╣
║ Sparse Arrays ║ JA! »Nur die in Scheiben geschnittenen ║ nein ║ Vielleicht 2   ║ nein ║
║ spärlich gehalten ║ ║array (1. Argument) ║ ║ ║ ║
╠═══════════════╬══════╬═════════════════╬════════ ═══════╬═════════╬══════════╣
║ Unterstützung ║MSIE 4║MSIE 5.5 ║ MSIE 5.5 ║ MSIE 4 ║Edge 12 ║
Source ( Quelle ) ║NNav 4║NNav 4.06 ║NNav 4.06 ║NNav 3 ║ MSIE  NNav ║
╠═══════════════╬══════╬═════════════════╬════════ ═══════╬═════════╬══════════╣
║Array-ähnliche Handlungen║nein theNur das Geschobene ║ JA! ║ JA! FWenn ║
║wie ein Array ║ ║array (2. Argument) ║ ║iterator 1   ║
╚═══════════════╩══════╩═════════════════╩════════ ═══════╩═════════╩══════════╝
1 Wenn das Array-ähnliche Objekt keine Symbol.iterator- Eigenschaft hat, versuchen Sie es
  um es zu verbreiten, wird eine Ausnahme ausgelöst.
2 Hängt vom Code ab. Der folgende Beispielcode "YES" bewahrt die Spärlichkeit.

function mergeCopyTogether(inputOne, inputTwo){
   var oneLen = inputOne.length, twoLen = inputTwo.length;
   var newArr = [], newLen = newArr.length = oneLen + twoLen;
   for (var i=0, tmp=inputOne[0]; i !== oneLen; ++i) {
        tmp = inputOne[i];
        if (tmp !== undefined || inputOne.hasOwnProperty(i)) newArr[i] = tmp;
    }
    for (var two=0; i !== newLen; ++i, ++two) {
        tmp = inputTwo[two];
        if (tmp !== undefined || inputTwo.hasOwnProperty(two)) newArr[i] = tmp;
    }
    return newArr;
}

Wie oben gezeigt, würde ich argumentieren, dass Concat fast immer der richtige Weg ist, um sowohl Leistung als auch die Fähigkeit zu erhalten, die Spärlichkeit von Ersatz-Arrays beizubehalten. Dann document.body.childrenwürde ich für Array-Likes (wie DOMNodeLists wie ) die Verwendung der for-Schleife empfehlen, da sie sowohl die zweitperformanteste als auch die einzige andere Methode ist, die spärliche Arrays beibehält. Im Folgenden werden wir schnell darauf eingehen, was unter spärlichen Arrays und Array-Likes zu verstehen ist, um Verwirrung zu beseitigen.

𝗧𝗵𝗲 𝗙𝘂𝘁𝘂𝗿𝗲

Zunächst denken einige Leute vielleicht, dass dies ein Zufall ist und dass Browser-Anbieter irgendwann dazu kommen werden, Array.prototype.push so zu optimieren, dass es schnell genug ist, um Array.prototype.concat zu schlagen. FALSCH! Array.prototype.concat ist immer schneller (zumindest im Prinzip), da es sich um ein einfaches Kopieren und Einfügen über die Daten handelt. Unten finden Sie ein vereinfachtes, überzeugend-visuelles Diagramm, wie eine 32-Bit-Array-Implementierung aussehen könnte (bitte beachten Sie, dass echte Implementierungen viel komplizierter sind).

Byte ║ Daten hier
═════╬═══════════
0x00 ║ int nonNumericPropertiesLength = 0x00000000
0x01 ║ ibid
0x02 ║ ibid
0x03 ║ ibid
0x00 ║ int Länge = 0x00000001
0x01 ║ ibid
0x02 ║ ibid
0x03 ║ ibid
0x00 ║ int valueIndex = 0x00000000
0x01 ║ ibid
0x02 ║ ibid
0x03 ║ ibid
0x00 ║ int valueType = JS_PRIMITIVE_NUMBER
0x01 ║ ibid
0x02 ║ ibid
0x03 ║ ibid
0x00 ║ uintptr_t valuePointer = 0x38d9eb60 (oder wo immer es sich im Speicher befindet)
0x01 ║ ibid
0x02 ║ ibid
0x03 ║ ibid

Wie oben gezeigt, ist alles, was Sie tun müssen, um so etwas zu kopieren, fast so einfach wie das Byte-für-Byte-Kopieren. Mit Array.prototype.push.apply ist es viel mehr als ein einfaches Kopieren und Einfügen über die Daten. Die ".apply" muss jeden Index im Array überprüfen und in eine Reihe von Argumenten konvertieren, bevor sie an Array.prototype.push übergeben wird. Dann muss Array.prototype.push jedes Mal zusätzlich mehr Speicher zuweisen und (für einige Browser-Implementierungen) möglicherweise sogar einige Positionssuchdaten für die Spärlichkeit neu berechnen.

Eine alternative Art, darüber nachzudenken, ist dies. Das Quellarray 1 ist ein großer Stapel zusammengehefteter Papiere. Das Quellarray zwei ist ebenfalls ein großer Papierstapel. Wäre es schneller für dich?

1. Gehen Sie in den Laden und kaufen Sie genügend Papier, um eine Kopie jedes Quellarrays zu erhalten. Führen Sie dann jeden Papierstapel des Quellarrays durch ein Kopiergerät und heften Sie die resultierenden zwei Kopien zusammen.
2. Gehen Sie in den Laden und kaufen Sie genug Papier für eine einzelne Kopie des ersten Quellarrays. Kopieren Sie dann das Quellarray von Hand auf das neue Papier, und achten Sie darauf, dass alle leeren Stellen mit geringer Dichte ausgefüllt werden. Gehen Sie dann zurück in den Laden und kaufen Sie genügend Papier für das zweite Quellarray. Gehen Sie dann das zweite Quellarray durch und kopieren Sie es, ohne dass Lücken in der Kopie entstehen. Heften Sie dann alle kopierten Papiere zusammen.

In der obigen Analogie steht Option 1 für Array.prototype.concat, während Option 2 für Array.prototype.push.apply steht. Lassen Sie uns dies mit einem ähnlichen JSperf testen, der sich nur darin unterscheidet, dass dieser die Methoden über spärliche Arrays und nicht über feste Arrays testet. Man kann es hier finden .

Daher ruhe ich meinen Fall aus, dass die Zukunft der Leistung für diesen speziellen Anwendungsfall nicht in Array.prototype.push liegt, sondern in Array.prototype.concat.

𝗖𝗹𝗮𝗿𝗶𝗳𝗶𝗰𝗮𝘁𝗶𝗼𝗻𝘀

𝗦𝗽𝗮𝗿𝗲 𝗔𝗿𝗿𝗮𝘆𝘀

Wenn bestimmte Mitglieder des Arrays einfach fehlen. Zum Beispiel:

// This is just as an example. In actual code, 
// do not mix different types like this.
var mySparseArray = [];
mySparseArray[0] = "foo";
mySparseArray[10] = undefined;
mySparseArray[11] = {};
mySparseArray[12] =  10;
mySparseArray[17] = "bar";
console.log("Length:   ", mySparseArray.length);
console.log("0 in it:  ", 0 in mySparseArray);
console.log("arr[0]:   ", mySparseArray[0]);
console.log("10 in it: ", 10 in mySparseArray);
console.log("arr[10]   ", mySparseArray[10]);
console.log("20 in it: ", 20 in mySparseArray);
console.log("arr[20]:  ", mySparseArray[20]);

Alternativ können Sie mit Javascript Ersatzarrays einfach initialisieren.

var mySparseArray = ["foo",,,,,,,,,,undefined,{},10,,,,,"bar"];

𝗔𝗿𝗿𝗮𝘆-𝗟𝗶𝗸𝗲𝘀

Ein Array-ähnliches Objekt ist ein Objekt, das mindestens eine lengthEigenschaft hat, jedoch nicht mit new Arrayoder initialisiert wurde []. Beispielsweise werden die folgenden Objekte als Array-ähnlich klassifiziert.

{0: "foo", 1: "bar", Länge: 2}

document.body.children

neues Uint8Array (3)

• Dies ist Array-ähnlich, da das Konstruieren in ein Array den Konstruktor ändert, obwohl es sich um ein (n) (typisiertes) Array handelt.

(function () {Argumente zurückgeben}) ()

Beobachten Sie, was mit einer Methode passiert, die Array-Likes in Arrays wie Slice zwingt.

var slice = Array.prototype.slice;
// For arrays:
console.log(slice.call(["not an array-like, rather a real array"]));
// For array-likes:
console.log(slice.call({0: "foo", 1: "bar", length:2}));
console.log(slice.call(document.body.children));
console.log(slice.call(new Uint8Array(3)));
console.log(slice.call( function(){return arguments}() ));

• ANMERKUNG: Aufgrund der Leistung wird empfohlen, Slice-on-Funktionsargumente aufzurufen.

Beobachten Sie, was ein Verfahren geschieht verwenden , die sich nicht Array-likes in Arrays wie concat zwingen.

var empty = [];
// For arrays:
console.log(empty.concat(["not an array-like, rather a real array"]));
// For array-likes:
console.log(empty.concat({0: "foo", 1: "bar", length:2}));
console.log(empty.concat(document.body.children));
console.log(empty.concat(new Uint8Array(3)));
console.log(empty.concat( function(){return arguments}() ));

Mit JavaScript ES6 können Sie den Operator ... als Spread-Operator verwenden, der das Array im Wesentlichen in Werte konvertiert. Dann können Sie so etwas tun:

const myArray = [1,2,3,4,5];
const moreData = [6,7,8,9,10];

const newArray = [
  ...myArray,
  ...moreData,
];

Obwohl die Syntax kurz ist, weiß ich nicht, wie dies intern funktioniert und welche Auswirkungen dies auf die Leistung großer Arrays hat.

Hier ist der ES6-Weg

var newArray = [];
let dataArray1 = [1,2,3,4]
let dataArray2 = [5,6,7,8]
newArray = [...dataArray1, ...dataArray2]
console.log(newArray)

Die oben beschriebene Methode eignet sich für die meisten Fälle, und die Fälle, die nicht berücksichtigt werden concat, sind, da Sie hunderttausende Elemente in Arrays haben.

    let dataArray1 = [1,2,3,4]
    let dataArray2 = [5,6,7,8]
    let newArray = dataArray1.concat(dataArray2);
    console.log(newArray)

Es gibt eine Reihe von Antworten zu Array.prototype.push.apply . Hier ist ein klares Beispiel:

var dataArray1 = [1, 2];
var dataArray2 = [3, 4, 5];
var newArray = [ ];
Array.prototype.push.apply(newArray, dataArray1); // newArray = [1, 2]
Array.prototype.push.apply(newArray, dataArray2); // newArray = [1, 2, 3, 4, 5]
console.log(JSON.stringify(newArray)); // Outputs: [1, 2, 3, 4, 5]

Wenn Sie eine ES6-Syntax haben:

var dataArray1 = [1, 2];
var dataArray2 = [3, 4, 5];
var newArray = [ ];
newArray.push(...dataArray1); // newArray = [1, 2]
newArray.push(...dataArray2); // newArray = [1, 2, 3, 4, 5]
console.log(JSON.stringify(newArray)); // Outputs: [1, 2, 3, 4, 5]

Wenn Sie das ursprüngliche Array ändern möchten, können Sie Folgendes verbreiten und verschieben:

var source = [1, 2, 3];
var range = [5, 6, 7];
var length = source.push(...range);

console.log(source); // [ 1, 2, 3, 5, 6, 7 ]
console.log(length); // 6

Wenn Sie sicherstellen möchten, dass nur Elemente desselben Typs in das sourceArray aufgenommen werden (z. B. keine Zahlen und Zeichenfolgen mischen), verwenden Sie TypeScript.

/**
 * Adds the items of the specified range array to the end of the source array.
 * Use this function to make sure only items of the same type go in the source array.
 */
function addRange<T>(source: T[], range: T[]) {
    source.push(...range);
}

Wir haben zwei Arrays a und b. Der Code, der hier ausgeführt wurde, ist Array. Ein Wert wird in Array b verschoben.

let a = [2, 4, 6, 8, 9, 15]

function transform(a) {
    let b = ['4', '16', '64']
    a.forEach(function(e) {
        b.push(e.toString());
    });
    return b;
}

transform(a)

[ '4', '16', '64', '2', '4', '6', '8', '9', '15' ]

Versuche dies:

var arrayA = [1, 2];
var arrayB = [3, 4];
var newArray = arrayB.reduce((pre, cur) => [...pre, ...cur], arrayA);
console.log(newArray)

Verwenden Sie anstelle der Funktion push () die Funktion concat für den IE. Beispiel,

var a=a.concat(a,new Array('amin'));

Dies ist ein funktionierender Code und es funktioniert gut:

var els = document.getElementsByTagName('input'), i;
var invnum = new Array();
var k = els.length;
for(i = 0; i < k; i++){invnum.push(new Array(els[i].id,els[i].value))}