Array.from()

Die Methode Array.from() ist eine vielseitige Methode, die in der Praxis häufig verwendet wird, um array-ähnliche oder iterierbare Objekte in echte Arrays umzuwandeln.

Diese Methode gehört zu Array-Klasse und ist eine statische Methode, was bedeutet, dass sie direkt auf der Array-Klasse aufgerufen wird, nicht auf Instanzen eines Arrays.

Die Methode Array.from() erstellt ein neues Array, indem sie ein array-ähnliches oder iterierbares Objekt nimmt und dessen Elemente in ein echtes Array kopiert.

Syntax

            Syntax
        
Array.from(arrayLike, mapFn, thisArg);

Parameter

arrayLike

Dies ist das array-ähnliche oder iterierbare Objekt, das in ein Array konvertiert werden soll. Beispiele hierfür sind NodeList, arguments-Objekte oder andere Objekte, die eine length Eigenschaft haben und indizierte Elemente enthalten.

mapFn

(Optional): Eine Funktion, die auf jedes Element des neuen Arrays angewendet wird. Diese Funktion verhält sich ähnlich wie die Callback-Funktion in Array.prototype.map().

thisArg

(Optional) Ein optionaler Wert, der als this in der mapFn verwendet wird.

Array-Like vs. Iterable

Um zu verstehen, warum Array.from() so nützlich ist, muss man den Unterschied zwischen array-ähnlichen und iterierbaren Objekten verstehen.

Array-ähnliche Objekte

Diese Objekte haben eine length Eigenschaft und indizierte Elemente, aber sie sind keine echten Arrays. Beispiele sind die arguments-Objekte innerhalb einer Funktion und NodeList-Objekte, die von DOM-Methoden wie document.querySelectorAll() zurückgegeben werden.

            Beispiel
        
function example() {
    console.log(arguments);
}

example(1, 2, 3);
[Arguments] { '0': 1, '1': 2, '2': 3 }

Iterierbare Objekte

Diese Objekte implementieren das Symbol.iterator Protokoll, was bedeutet, dass sie über eine Schleife iteriert werden könnne, wie z.B. Arrays, Strings, Maps, Sets und andere. Mithilfe von for-of Schleife kann über sie iteriert werden.

            Beispiel
        
let iterable = new Set([1, 2, 3]);
for (let value of iterable) {
    console.log(value);
}
1
2
3

Verwendung von `Array.from()`

Umwandlung eines Array-ähnlichen Objekts in Array

Ein typisches Szenario ist die Konvertierung des arguments Objekts in ein echtes Arrays. Da arguments ein array-ähnliches Objekt ist, kann es nicht direkt auf Methoden wie map() oder forEach() zugreifen.

            Beispiel
        
function example() {
    let args = Array.from(arguments);
    console.log(args);
    console.log(args.map(x => x * 2));
}

example(1, 2, 3);
[ 1, 2, 3 ]
[ 2, 4, 6 ]

Umwandlung einer NodeList in ein Array

Ein weiteres Beispiel ist die Umwandlung einer NodeList, die von Methoden wie document.querySelectorAll() zurückgegeben wird, in ein echtes Arrays, sodass man Array-Methoden darauf anwenden kann.

            Beispiel
        
let nodeList = document.querySelectorAll("div");
let divArray = Array.from(nodeList);

divArray.forEach(div => {
    console.log(div.textContent);
});

Array.from() - NodeList - Beispiel

Anwendung einer Map-Funktion während der Umwandlung

Man kann Array.from() auch verwenden, um während der Umwandlung eine Transformation auf jedes Element anzuwenden, ähnlich wie bei Array.prototype.map().

            Beispiel
        
let array = Array.from([1, 2, 3], x => x * 2);
console.log(array);
[ 2, 4, 6 ]

Umwandlung eines Strings in ein Array

Strings sind iterierbar, was bedeutet, dass sie mit Array.from() in Arrays von Zeichen umgewandelt werden können.

            Beispiel
        
let str = "Hello";
let charArray = Array.from(str);
console.log(charArray);
[ 'H', 'e', 'l', 'l', 'o' ]

navigation Navigation