2016-05-02 6 views
2

Ich sah response dies mit einem anderen ein Array erstreckt, so habe ich versucht:Wie kann ich zwei Arrays in Javascript verketten?

console.log(['a', 'b'].push.apply(['c', 'd'])); 

aber er druckt:

2 

sollte es nicht Druck:

['a', 'b', 'c', 'd'] 

wenn nicht Was habe ich falsch gemacht?

+2

Siehe hier https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat – elclanrs

+0

'Array.prototype.push.apply (ABArray, CDArray)' – undefined

Antwort

15

wenn nicht, was ich falsch gemacht?

Zunächst einmal .push die neue Länge des Arrays zurückgibt:

var arr = [1, 1, 1]; 
console.log(arr.push(1)); // 4 
console.log(arr); // [1, 1, 1, 1] 

Zweitens .apply braucht zwei Argumente: Das Objekt, das Sie die Funktion, und eine Reihe von Argumenten anwenden möchten . Sie übergeben nur ein einziges Argument, also entspricht Ihr Code im Wesentlichen:

['c', 'd'].push() 

I.e. Sie fügen dem Array ['c', 'd'] nichts hinzu. Das erklärt auch, warum Sie 2 in der Ausgabe sehen: ['c', 'd'] hat Länge 2 und .push() fügt keine Elemente hinzu, so dass es immer noch die Länge 2 hat.

Wenn Sie .push verwenden, um das Original-Array zu mutieren (statt einen neuen wie .concat Schaffung der Fall ist), müsste es aussehen:

var arr = ['a', 'b']; 
arr.push.apply(arr, ['c', 'd']); // equivalent to Array.prototype.push.apply(arr, [...]) 
//   ^ ^--------^ 
// apply to arr arguments 
console.log(arr); // ['a', 'b', 'c', 'd'] 

Siehe auch

+0

vielleicht diese Beispiel ist klarer: '[] .push.apply (arr, ['c', 'd']);' – maioman

+1

Ich stimme zu, aber ich mag es nicht, Arrays unnötig zu erstellen;) –

10

Versuchen Sie folgendes:

console.log(['a', 'b'].concat(['c', 'd'])); 
4

Wenn Ihr Szenario für ES6 Syntax ermöglicht, können Sie die spread element verwenden, um Arrays zu verketten:

var arr1 = [1,2]; 
var arr2 = [3,4]; 
var arr3 = [...arr1, ...arr2]; 
console.log(arr3); // Logs [1,2,3,4] 
+1

Können wir es * Spread-Element nennen *? Es ist kein Operator (auch wenn Sie das an einigen Stellen lesen). –

+2

Aktualisiert, um "Spread-Element" anzugeben. Für alle Interessierten ist Spread Element der in der ES6-Spezifikation verwendete Wortlaut.Sie können es im Abschnitt [Ausdrücke] (http://www.ecma-international.org/ecma-262/6.0/#sec-expressions) überprüfen. Scrollen Sie ein wenig nach _SpreadElement_. Je mehr du weisst! –

1

du versuchen sollte:

a= ['a', 'b']; 
b= ['c', 'd']; 
a.push.apply(a,b); 

console.log(a); 
4

Wenn Sie einen modernen Browser verwenden Sie dann

console.log([...['a', 'b'], ...['c', 'd']]) 

Wenn Sie usin: die Ausbreitung Betreiber ... wie so verwenden, g ein älterer Browser/nein Transpiler dann ist concat der Weg zu gehen:

console.log(['a', 'b'].concat(['c', 'd'])) 
1

Sie Variablen wie so

\t <script type="text/javascript"> 
 
\t var arr1=['a', 'b']; 
 
\t var arr2=['c', 'd']; 
 
\t Array.prototype.push.apply(arr1, arr2); 
 
\t console.log(arr1); 
 
\t </script>

+0

Dies ist eine Hacky-Lösung –

+0

@ Matías: Warum denkst du das? –

+0

Weil es bessere Lösungen gibt, als die Funktionen des Prototyps aufzurufen ... Weitere Antworten finden Sie in den Antworten –

2

verwenden sollten, wie es hier ein allgemeines Missverständnis zu sein scheint über die Verwendung verschiedener Array-Anhängungsmethoden werde ich mit der sichersten Alternative zu ES6's Einführung des Spreizoperators

hinzufügen

Funktionssprache

Funktionale Sprachen entwickelt Code Entwicklungsingenieure ermöglicht Programmierern und Systeme zu vereinfachen, Funktionen zu definieren gemeinsame Operationen/Algorithmen zu ersetzen. JS ist eine funktionale Sprache, Sie schreiben Funktionen, um das Leben einfacher zu machen, speichern Sie die Eingabe und machen das Programm einfacher zu testen und zu validieren, also warum es mit gefährlichen Alternativen zu kämpfen. Der Fehler, der in den Antworten (mit Ausnahme von Jonathan Michaliks Antwort) gemacht wird, ist der Versuch, die Sprache entweder dazu zu zwingen, etwas zu tun, was durch eine Funktion erledigt werden sollte, oder eine Lösung ohne Erklärung zu liefern von dem, was es tut (Array.concat).

Schreiben Sie eine Funktion zum Anhängen von Arrays, zum Beispiel.

function appendArray(array,array1){ // adds the items in array1 
            // array1 can be any type 
            // to the end of array 
    var len,i; 
    array1 = [].concat(array1); // ensure array1 is an array 
    len = array1.length; 
    i = 0; 
    while(i < len){ 
     array[array.length] = array1[i++]; // this is 2* quicker than invoking push 
    } 
    return array; 
} 

für die 60 Sekunden, um es zu schreiben dauert, oder weniger als Teil einer allgemeinen Bibliothek schließen Sie eine sichere und für allgemeine Zwecke Array Anfügen Funktion erstellt haben.

log(appendArray([0, 1, 2, 3], 4)); // 0,1,2,3,4 
log(appendArray([0, 1, 2, 3], [4, 5, 6])); // 0,1,2,3,4,5,6 

Nun, warum die anderen Antworten keine guten Lösungen sind.

Array.concat

ist die sicherere Option, und verwendet werden, wenn Sie die Kontrolle über alle Verweise auf dem Array sind. Es leidet unter der Tatsache, dass es ein neues Array erstellt, wenn es verwendet wird.

var array1 = [1,2,3]; 
var array2 = [4,5,6]; 
array1 = array1.concat(array2); // 1,2,3,4,5,6 

Viele sind unter dem falschen Glauben, dass die concat (array2) Array1 hinzugefügt wird, ist es nicht, wird es zu einer Kopie array1 hinzugefügt. Wenn Sie andere Verweise auf das ursprüngliche Array haben, erstellen Sie am Ende eine Kopie des verketteten Arrays, während das ursprüngliche Array im Speicher verbleibt.

function doSomething(array){ 
    ... generate some info 
    array.concat(info); 
} 

var myArray = [...someData]; // the array 
var myObject.setArray(myArray); // create a new referance to the array in myObject 
myArray = doSomething(myArray); // adds info via concat to the array. 

Es ist nicht sofort ersichtlich, aber Sie haben jetzt zwei Arrays die ursprüngliche Innenseite myObject und die verkettete Version in myObject, die das Array referance in Schließung speichern kann, dass man nicht dereferenzieren alle, wenn Sie ändern oder löschen können assoziierter Kontext Sie wissen auch nicht, wie viele Referenzen auf das ursprüngliche Array existieren.

Function.apply()

Es gibt viele Gründe, diese Funktion nicht zu verwenden, aber von besonderer Bedeutung ist es auf der Array.push Funktion. Es leidet an Unbestimmtheit, wenn Sie es verwenden, ohne die Arrays zu überprüfen.

Ohne myArray für undefined zu überprüfen können Sie nicht vorhersagen, was das Ergebnis von apply sein wird. Es könnte einen Fehler auslösen oder einen Fehler verursachen, oder es kann automatisch fehlschlagen, wenn der globale Bereich eine Push-Funktion hat und Sie sich nicht im strikten Modus befinden.

Ohne die JS-Version ES5 oder ES6 zu wissen, die data auf myArray ein Objekt gedrückt haben, gelten können, oder alle Elemente in data ES5 nicht erkennt Array wie Objekte als Arrays für Function.apply während ES6 tut. Sie müssen also myArray oder data überprüfen, um den richtigen Typ für die aktuelle JS-Version zu haben.

Argumente haben Limits, die vom aktuellen JS-Kontext abhängig sind, es gibt auch eine Inkonsistenz zwischen der Handhabung langer Argumentlisten durch JS-Kontext. Einige werden einen Fehler ausgeben, andere werden einfach die Argumente abschneiden.

var myPixelData = []; 
myPixelData.push.apply(myPixelData,getSomePixelData()); // what will happen???? 

Diese werfen kann, oder es kann funktionieren, oder es kann nur geschoben 65535 Artikel auf das Array, oder mehr oder weniger. Sie müssen es in einen try catch einbinden und die Ergebnisse gegen die Länge des von getPixelData zurückgegebenen Arrays überprüfen. All die zusätzliche Komplexität, nur um es einfacher zu machen ???

warum So Function.apply auf Array.push verwenden oder Array.concat verwenden, wenn es so viel einfacher ist, eine Funktion zu schreiben, zu tun, was Sie wollen, und Sie aus einer langen Liste von Problemen, Unklarheiten und Fehlern speichern.