ECMAScript-Vorschlag: Array.prototype. {Flat, flatMap}

ECMAScript-Innovationen



Hallo Leser Habr. Ich mache Sie auf eine interessante Sache aufmerksam, die wird bald erscheinen bereits im ECMAScript-Standard enthalten. Es ist bereits verfügbar. fast in allen Browsern und allen Funktionen auch. Diese Innovation ist nur eine Zuckerverpackung und kann mit Ihren eigenen Mitteln gelöst werden, und ich werde Ihnen dies auch zeigen. Aber mit diesem Zucker können wir weniger Code schreiben, weil wir ihn so lieben. Dem Array werden also Grundfunktionen hinzugefügt. In diesem Fall gibt es zwei davon, mit denen wir mehrstufige Arrays auf eine oder mehrere Verschachtelungsebenen erweitern können. Ja, ja, und das alles, wie sie sofort sagen


ECMAScript-Vorschlag: Array.prototype. {Flat, flatMap}


Dieser Vorschlag war einst als Array.prototype.flat {ten, Map} bekannt . Es hat Bühnenstatus . 3 4 von TC39, d.h. Kandidat Fertig Ich denke, es lohnt sich ein wenig abzulenken und über diesen TC39 zu sprechen und über die Standards, mit denen man vertraut ist, kann diesen Rückzug überspringen. also:


JavaScript-Standards und wie es vorbereitet wird.


ECMAScript


ECMAScript ist ein Standard, der von ECMA International entwickelt und gepflegt wird. Es wurde von der Ecma-Generalversammlung im Juni 1997 verabschiedet. Insbesondere ist ECMAScript ein ECMA-262- Standard, der als ECMAScript-Sprachspezifikation bezeichnet wird. Der Standard wurde basierend auf der Originalversion von JavaScript von Brendan Aich von Netscape und dem Microsoft JScript-Interpreter erstellt, hat sich aber seitdem erheblich weiterentwickelt.


JavaScript ist eine Implementierung der ECMAScript- Spezifikation. Dies bedeutet, dass Entwickler von Browsern und Frameworks wie Node.js konsequent neue Funktionen implementieren sollten, da die Spezifikation neue Entwürfe oder veröffentlichte Editionen enthält. Zu diesem Zweck werden Änderungen an den Engines vorgenommen, mit denen diese Browser und Frameworks JavaScript-Code interpretieren und ausführen.


Warum brauchen Sie eine Spezifikation? Verschiedene Browser verwenden unterschiedliche JavaScript-Engines, z. B. V8 in Chrome, SpiderMonkey in Firefox usw. Wenn Sie in JavaScript schreiben, erwarten Sie, dass alle Engines in allen Umgebungen Ihren Code genau gleich analysieren und ausführen. Ohne eine standardisierte Spezifikation kann jede dieser Engines JavaScript nach Belieben ausführen. Dies ist offensichtlich nicht sehr gut.


TC39


Das Ecma International Technical Committee 39 (auch bekannt als TC39) ist ein Komitee von sehr klugen Leuten, es ist übrigens mit einer Gruppe von Teilnehmern verbunden, die auch klug sind. Sie alle versammeln sich ungefähr alle zwei Monate zu Ausschusssitzungen und diskutieren vorbereitete Themenlisten.
Das Ziel von TC39 ist es, die zuvor erwähnte ECMAScript-Spezifikation nach Diskussion und Konsens beizubehalten und zu aktualisieren. Dies umfasst Sprachsyntax, Semantik, Bibliotheken und verwandte Technologien, auf denen die Sprache basiert.


Dieser Prozess wird von TC39 definiert. Alles beginnt mit einem Entwurf einer Funktion, die die Spezifikation erweitert oder ändert. Diese Entwürfe stammen häufig von Entwicklergemeinschaften oder von den TC39-Mitgliedern selbst. Wenn der Vorschlag würdig ist, erhält der Entwurf den Status eines offiziellen Vorschlags.


Auf dem Weg von der Idee zur Veröffentlichung durchläuft der Vorschlag dann mehrere spezifische Phasen. Sie sind von null bis vier männlichen Programmierern nummeriert:


[“Strawman”, “Proposal”, “Draft”, “Candidat”, “Finished”] 

Der Übergang zum nächsten Schritt erfordert die Genehmigung von TC39. Wenn der Vorschlag Stufe 4 erreicht hat, ist zu erwarten, dass er in der nächsten offiziell veröffentlichten Ausgabe der Spezifikation des ECMA-262-Standards enthalten sein wird und schließlich in einer Umgebung mit JavaScript angezeigt wird. Weitere Informationen zu diesem Vorgang finden Sie im Dokument selbst .


Alle bestehenden Vorschläge zur Einführung in den Standard finden Sie hier auf github
Nun, jetzt gehen wir weiter ...


Array.prototype.flat


Die flat () -Methode gibt ein neues Array zurück.


 var newArray = arr.flat(depth); 

in dem alle unter Arrays verschachtelten Elemente rekursiv auf die angegebene Ebenentiefe "angehoben" wurden.


Ein Beispiel:


 const arr1 = [1, 2, [3, 4]]; arr1.flat(); //? [1, 2, 3, 4] const arr2 = [1, 2, [3, 4, [5, 6]]]; arr2.flat(); //? [1, 2, 3, 4, [5, 6]] const arr3 = [1, 2, [3, 4, [5, 6]]]; arr3.flat(2); //? [1, 2, 3, 4, 5, 6] 

Es gibt auch einen Nebeneffekt, es entfernt undefinierte Array-Elemente


Ein Beispiel:


 const arr4 = [1, 2, , 4, 5]; arr4.flat(); //? [1, 2, 4, 5] 

Mach es selbst


Wir verwenden Reduzieren und Concat


Ein Beispiel:


 const arr1 = [1,2,3,[1,2,3,4, [2,3,4]]]; function flattenDeep(arr1) { return arr1.reduce((acc, val) => Array.isArray(val) ? acc.concat(flattenDeep(val)) : acc.concat(val), []); } flattenDeep(arr1); //? [1, 2, 3, 1, 2, 3, 4, 2, 3, 4] 

Array.prototype.flatMap



Die flatMap () -Methode wendet zuerst eine Funktion auf jedes Element an, konvertiert dann das Ergebnis in eine flache Struktur und platziert es in einem neuen Array. Dies ist identisch mit der Kartenfunktion, gefolgt von der Verwendung der flachen Funktion mit einem Tiefenparameter von 1, aber flatMap ist oft nützlich, weil es etwas effizienter arbeitet.


 var new_array = arr.flatMap(function callback(currentValue[, index[, array]]) { // return element for new_array }[, thisArg]) 

callback - Eine Funktion, die die Elemente eines neuen Arrays erzeugt, benötigt drei Argumente:


  1. currentValue - Das aktuelle Element des zu verarbeitenden Arrays.
  2. index (optional) - Der Index des Elements, das im Array verarbeitet werden soll.
  3. array (optional) - Das zu durchlaufende Array.
    thisArg (optional) - Der Wert, der beim Aufrufen der Rückruffunktion als thisArg verwendet wird.
    Rückgabewert - Ein neues Array, dessen jedes Element das Ergebnis der Rückruffunktion ist und auf Stufe 1 "angehoben" wird.

Beispiel:


 [ { x: 1, y: 2 }, { x: 3, y: 4 }, { x: 5, y: 6 } ].flatMap(c => [cx, cy]) //? [1, 2, 3, 4, 5, 6] // or const orders = [ { orderId: 42, items: [ {name: 'soap', price: 1.99}, {name: 'shampoo', price: 4.99} ] }, { orderId: 1337, items: [ {name: 'toothpaste', price: 5.59}, {name: 'toothbrush', price: 8.99} ] } ]; orders.flatMap(i => i.items.map(i => i.name)); //? ["soap", "shampoo", "toothpaste", "toothbrush"] 

Überschrift mach es selbst


 var arr1 = [1, 2, 3, 4]; arr1.reduce((acc, x) => acc.concat([x * 2]), []); // [2, 4, 6, 8] 

Fazit


Denken Sie daran, dass diese Funktionalität der Sprache aus einem bestimmten Grund hinzugefügt wird. Die Gründe, warum intelligente Leute von TC39 dies tun, sind die Verbesserung der Sprachqualität, Abstraktion, Benutzerfreundlichkeit und andere. Lernen Sie diese Innovationen im Voraus kennen. Wenn sie offiziell veröffentlicht und überall unterstützt werden, können Sie sofort an die Arbeit gehen, ohne Zeit zu verschwenden. Sie können sich auch als JavaScript-Experte in Ihrem Unternehmen positionieren und neue Sprachfunktionen anbieten, mit denen sowohl der Code als auch das Produkt selbst verbessert werden können.


ps: während der Artikel geschrieben wurde :), ging der Vorschlag zu Stufe 4 über
Array.prototype.{flat,flatMap} bis Stufe 4, gemäß 29.09.2019, TC39

Source: https://habr.com/ru/post/de433820/


All Articles