Verwendung von Array.from in JavaScript ES6

ES6 fügt die from-Funktion zu Array hinzu, um andere Objekte in Arrays umzuwandeln.

Natürlich haben auch andere Objekte Anforderungen und nicht alle können in Arrays umgewandelt werden.

1. Stellen Sie Objekte mit der Iterator-Schnittstelle bereit, z. B. Set, Map, Array.

2. Was ist ein Array-ähnliches Objekt? Das bedeutet, dass ein Objekt ein Längenattribut haben muss.

Karte konvertieren

Konvertieren Sie die Schlüssel-Wert-Paare des Map-Objekts in ein eindimensionales Array.

Tatsächlich ist die Reihenfolge der konvertierten Array-Elemente Schlüssel1, Wert1, Schlüssel2, Wert2, Schlüssel3, Wert3 ....

const map1 = new Map();
map1.set('k1', 1);
map1.set('k2', 2);
map1.set('k3', 3);
console.log('%s', Array.from(map1))

Ergebnis:

k1,1,k2,2,k3,3

Satz konvertieren

Konvertieren Sie die Elemente des Set-Objekts in ein Array.

const set1 = new Set();
set1.add(1).add(2).add(3)
console.log('%s', Array.from(set1))

Ergebnis

1,2,3

Zeichenfolge konvertieren

Sie können die ASCII-Zeichenfolge auch in ein Datenpaket zerlegen Zerlegen Sie Unicode-Zeichenfolgen genau in Arrays.

console.log('%s', Array.from('hello world'))
console.log('%s', Array.from('\u767d\u8272\u7684\u6d77'))

Ergebnis:

h,e,l,l,o, ,w,o,r,l,d
白,色,的,海

Array-ähnliches Objekt

Ein Array-ähnliches Objekt muss eine Länge haben , Ihre Elementattributnamen müssen numerische Werte oder Zeichen sein, die in numerische Werte konvertiert werden können.

Hinweis: Der Attributname stellt die Indexnummer des Arrays dar. Wenn keine solche Indexnummer vorhanden ist, ist das entsprechende Element im übertragenen Array leer.

console.log('%s', Array.from({  0: '0',  1: '1',  3: '3',
  length:4}))

Ergebnis:

0,1,,3

Wenn das Objekt nicht über das Längenattribut verfügt, wird es in ein leeres Array umgewandelt.

console.log('%s', Array.from({  0: 0,  1: 1}))

Das Ergebnis ist ein leeres Array.

Wenn der Attributname des Objekts nicht in eine Indexnummer umgewandelt werden kann.

console.log('%s', Array.from({
  a: '1',
  b: '2',
  length:2}))

Das Ergebnis ist auch ein leeres Array

Array.from kann drei Parameter akzeptieren

Schauen wir uns an die Definition:

Array.from(arrayLike[, mapFn[, thisArg]])

arrayLike: das konvertierte Objekt.

mapFn: Kartenfunktion.

thisArg: das Objekt, auf das this in der Map-Funktion zeigt.

Der zweite Parameter, die Kartenfunktion

, wird zur Verarbeitung jedes Elements in der Konvertierung verwendet, und das verarbeitete Ergebnis wird als Elementwert verwendet ​​des Ergebnisarrays.

console.log('%s', Array.from([1, 2, 3, 4, 5], (n) => n + 1))

Ergebnis:

Die obige Kartenfunktion fügt tatsächlich 1 zu jedem Wert im Array hinzu.

2,3,4,5,6

Der dritte Parameter, das Objekt, auf das dies in der Kartenfunktion zeigt

Dieser Parameter ist sehr nützlich, wir können Das Verarbeitete Daten und Verarbeitungsobjekte werden getrennt und verschiedene Datenverarbeitungsmethoden werden in verschiedene Objekte gekapselt. Die Verarbeitungsmethoden verwenden denselben Namen.

Wenn Array.from zum Konvertieren des Datenobjekts aufgerufen wird, können je nach tatsächlicher Situation unterschiedliche Verarbeitungsobjekte injiziert werden, um unterschiedliche Ergebnisse zu erzielen, was zur Entkopplung geeignet ist.

Bei diesem Ansatz handelt es sich um die Anwendung eines Vorlagenentwurfsmusters, das der Abhängigkeitsinjektion etwas ähnelt.

let diObj = n + 2'%s'1, 2, 3, 4, 5

Ergebnis:

3,4,5,6,7

Das obige ist der detaillierte Inhalt vonVerwendung von Array.from in JavaScript ES6. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!