webentwicklung-frage-antwort-db.com.de

Konvertieren Sie ES6 Iterable in Array

Angenommen, Sie haben ein Array-ähnliches Javascript ES6 Iterable, von dem Sie im Voraus wissen, dass es eine begrenzte Länge hat. Wie kann ich das in ein Javascript-Array umwandeln?

Der Grund dafür ist, dass viele js-Bibliotheken wie Underscore und Lodash nur Arrays unterstützen. Wenn Sie also eine ihrer Funktionen für Iterable verwenden möchten, müssen diese zunächst in ein Array konvertiert werden.

In Python können Sie einfach die Funktion list () verwenden. Gibt es in ES6 ein Äquivalent?

61
Michael Bylstra

Sie können Array.from oder den Spread-Operator verwenden.

Beispiel:

let x = new Set([ 1, 2, 3, 4 ]);

let y = Array.from(x);
console.log(y); // = [ 1, 2, 3, 4 ]

let z = [ ...x ];
console.log(z); // = [ 1, 2, 3, 4 ]

105

Sie können die Methode Array.from verwenden, die in ES6 hinzugefügt wird, aber nur Arrays und iterierbare Objekte wie Maps und Sets (auch in ES6 verfügbar) unterstützt. Für reguläre Objekte können Sie die toArray - Methode von Underscore oder die toArray-Methode von lodash verwenden, da beide Bibliotheken tatsächlich eine große Unterstützung für Objekte und nicht nur für Arrays bieten. Wenn Sie bereits Unterstriche oder Lodash verwenden, können sie zum Glück das Problem für Sie lösen und verschiedene funktionale Konzepte hinzufügen, z. B. map und für Ihre Objekte.

10
Colin Hartwig

Zusammenfassung:

  • Array.from()-Funktion benötigt eine iterierbare Eingabe wie in input und gibt ein Array der iterierbaren zurück.
  • Spread-Operator: ... in Kombination mit einem Array-Literal.

const map = new Map([[ 1, 'one' ],[ 2, 'two' ]]);

const newArr1  = [ ...map  ];  // create an Array literal and use the spread syntax on it
const newArr2 = Array.from( map );  // 

console.log(newArr1, newArr2); 

Vorbehalt beim Kopieren von Arrays:

Beachten Sie, dass mit diesen Methoden nur eine oberflächliche Kopie erstellt wird, wenn Sie ein Array kopieren möchten. Ein Beispiel wird das mögliche Problem klären:

let arr = [1, 2, ['a', 'b']];

let newArr = [ ...arr ];

console.log(newArr);

arr[2][0] = 'change';

console.log(newArr);

Aufgrund des geschachtelten Arrays wird hier die Referenz kopiert und kein neues Array erstellt. Wenn wir also das verschachtelte Array des alten Arrays mutieren, wird diese Änderung im neuen Array übernommen (da sie sich auf dasselbe Array beziehen, wurde der Verweis kopiert).

Lösung für den Vorbehalt:

Wir können das Problem der Erstellung flacher Kopien lösen, indem Sie mit JSON.parse(JSON.stringify(array)) einen tiefen Klon des Arrays erstellen. Zum Beispiel:

let arr = [1, 2, ['a', 'b']]

let newArr = Array.from(arr);

let deepCloneArr = JSON.parse(JSON.stringify(arr));

arr[2][0] = 'change';

console.log(newArr, deepCloneArr)

4

Der folgende Ansatz wird für Maps getestet:

const MyMap = new Map([
  ['a', 1],
  ['b', 2],
  ['c', 3]
]);

const MyArray = [...MyMap].map(item => {
  return {[item[0]]: item[1]}
});

console.info( MyArray ); //[{"a", 1}, {"b", 2}, {"c": 3}]
0
Roman