Frage zum Wiki-Artikel ‚from‘

[Felix Riesterer]

Liebee Mitlesende, lieber @Orlok,

gerade stöberte ich wieder in "zuletzt aktualisierte Seiten" im Wiki und bin über Array.from gestolpert. Nun meine Verständnisfrage:

Kann man in unterstützenden Browsern Array.from(arg) synonym verwenden, wie die Krücke [].slice.call(arg)?

Genaueres Beispiel:

function init () {
    var labels = [].slice.call(document.getElementsByTagName("label")),
        inputs = Array.from(document.querySelectorAll("input"));

    labels.forEach(function (el, i) {
        // el contains <label>, i contains index number
    });

    inputs.forEach(function (el, i) {
        // el contains <input>, i contains index number
    });
}

Sowohl getElementsByTagName("label"), als auch document.querySelectorAll("label") geben als Wert eine NodeList (eventuell sogar live?) zurück. Möchte man z.B. diese Elemente aus dem DOM entfernen, hätte man beim Iterieren über die NodeList ein Problem, weshalb man da lieber "echte" Arrays haben möchte. Sind die beiden Schreibweisen für die beiden Variablen wirklich synonym, oder habe ich den Wiki-Artikel falsch verstanden? Und wenn sie synonym sind, warum sieht dann das Polyfill dazu bei MDN so irrsinnig kompliziert aus?

Sollten sie synonym sein, dann würde ich dem Artikel einen Hinweis darauf spendieren.

Liebe Grüße,

Felix Riesterer.

[Orlok]

Hallo Felix

gerade stöberte ich wieder in "zuletzt aktualisierte Seiten" im Wiki und bin über Array.from gestolpert. Nun meine Verständnisfrage:

Kann man in unterstützenden Browsern Array.from(arg) synonym verwenden, wie die Krücke [].slice.call(arg)?

Ja, wenn man slice und from so aufruft, dann ist das im Prinzip das Gleiche. In beiden Fällen wird ein Array mit den Elementen von arg erzeugt. Zumindest sofern arg ein Array-ähnliches, beziehungsweise iterierbares Objekt ist. Wie zum Beispiel auch arguments in dem Code-Beispiel des Wiki-Artikels.

Genaueres Beispiel:

function init () {
    var labels = [].slice.call(document.getElementsByTagName("label")),
        inputs = Array.from(document.querySelectorAll("input"));

    labels.forEach(function (el, i) {
        // el contains <label>, i contains index number
    });

    inputs.forEach(function (el, i) {
        // el contains <input>, i contains index number
    });
}

Sowohl getElementsByTagName("label"), als auch document.querySelectorAll("label") geben als Wert eine NodeList (eventuell sogar live?) zurück. Möchte man z.B. diese Elemente aus dem DOM entfernen, hätte man beim Iterieren über die NodeList ein Problem, weshalb man da lieber "echte" Arrays haben möchte. Sind die beiden Schreibweisen für die beiden Variablen wirklich synonym, oder habe ich den Wiki-Artikel falsch verstanden? Und wenn sie synonym sind, warum sieht dann das Polyfill dazu bei MDN so irrsinnig kompliziert aus?

Du kannst der Methode from auch eine NodeList übergeben und sie überführt deren Elemente in ein Array, denn auch bei NodeLists handelt es sich um Array-ähnliche Objekte. Dass der Algorithmus der Methode from etwas umfangreicher ist hat verschiedene Gründe. Die Verarbeitung verschiedenartiger Objekte ist einer, die optional durchgeführte Map-Funktion ein anderer.

Sollten sie synonym sein, dann würde ich dem Artikel einen Hinweis darauf spendieren.

Wie dir sicher aufgefallen ist, gab es bislang im Wiki noch keinen Artikel zu Array.from und ich habe die Seite erst heute Mittag erstellt. Das was da bisher steht ist entsprechend erst der Anfang eines in Kürze weitaus umfangreicheren Artikels, an dem ich gerade schreibe.

Gib mir bitte etwas Zeit! ;-)

Viele Grüße,

Orlok

[Orlok]

Hallo @Felix Riesterer …

… und an alle die es Interessiert: Ich habe den Artikel zu Array.from nun soweit fertiggestellt.

Ich denke, es sind alle wichtigen Aspekte berücksichtigt worden, wobei jedoch das Problem besteht, dass im Zusammenhang mit dieser Methode einige Features von ES6 zur Sprache kommen mussten, welche bislang im Wiki noch nicht dokumentiert sind, sodass die entsprechenden Verlinkungen noch fehlen.

Sobald ich die Zeit dazu finde, werde ich die Artikel zu diesen Themen, die ich teilweise schon angefangen habe zu schreiben, ins Wiki stellen, und diese dann bei Array.from verlinken.

Beste Grüße,

Orlok

[Felix Riesterer]

Lieber Orlok,

herzlichen Dank für Deinen Fleiß!

Liebe Grüße,

Felix Riesterer.