Proposition ECMAScript: Array.prototype. {Flat, flatMap}

Innovations ECMAScript



Bonjour lecteurs Habr. J'attire votre attention sur une chose intéressante qui apparaîtra bientôt figurait déjà dans la norme ECMAScript. Il est déjà disponible. presque dans tous les navigateurs et toutes les fonctionnalités aussi. Cette innovation n'est qu'un emballage de sucre et elle peut être résolue par vos propres moyens et je vais vous le montrer aussi. Mais ce sucre nous permettra d'écrire moins de code, car nous l'aimons tellement. Ainsi, des fonctions de base sont ajoutées au tableau, dans ce cas, il y en a 2, ce qui nous permettra d'étendre les tableaux à plusieurs niveaux en un ou plusieurs niveaux d'imbrication. Oui, oui, et tout cela comme on dit hors de la boîte


Proposition ECMAScript: Array.prototype. {Flat, flatMap}


Cette proposition était connue sous le nom de Array.prototype.flat {ten, Map} . Il a le statut d' étape . 3 4 du TC39, c'est-à-dire déjà Candidat Terminé Je pense que cela vaut la peine d'être distrait et de parler de ce très TC39 et des normes, qui sont familiers avec, peuvent sauter cette retraite. donc:


Normes JavaScript et mode de préparation.


ECMAScript


ECMAScript est une norme développée et maintenue par ECMA International . Il a été adopté par l'Assemblée générale Ecma en juin 1997. Plus précisément, ECMAScript est une norme ECMA-262 appelée ECMAScript Language Specification. La norme a été créée sur la base de la version originale de JavaScript par Brendan Aich de Netscape et de l'interpréteur Microsoft JScript, mais s'est depuis considérablement développée.


JavaScript est une implémentation de la spécification ECMAScript . Cela signifie que, comme la spécification comporte de nouveaux brouillons ou des éditions publiées, les développeurs de navigateurs et de frameworks tels que Node.js doivent systématiquement implémenter de nouvelles fonctionnalités. Pour ce faire, des modifications sont apportées aux moteurs que ces navigateurs et frameworks utilisent pour interpréter et exécuter du code JavaScript.


Pourquoi avez-vous besoin d'une spécification? Différents navigateurs utilisent différents moteurs JavaScript, par exemple, V8 dans Chrome, SpiderMonkey dans Firefox, etc. Lorsque vous écrivez en JavaScript, vous vous attendez à ce que tous les moteurs de tous les environnements analysent et exécutent votre code exactement de la même manière. Sans spécification standardisée, n'importe lequel de ces moteurs serait libre d'exécuter JavaScript à sa guise, ce n'est évidemment pas très bon.


TC39


Le comité technique 39 d'Ecma International (alias TC39) est un comité de personnes très intelligentes, il est également connecté à un groupe de participants par la manière intelligente. Ils se réunissent tous aux réunions du comité tous les deux mois environ et discutent de listes de questions préétablies.
Le but du TC39 est de maintenir et de mettre à jour la spécification ECMAScript mentionnée précédemment, après discussion et consensus. Cela inclut la syntaxe du langage, la sémantique, les bibliothèques et les technologies connexes sur lesquelles le langage est basé.


Ce processus est défini par TC39. Tout commence par une ébauche d'une fonctionnalité qui étend ou modifie la spécification. Ces versions proviennent souvent des communautés de développeurs ou des membres du TC39 eux-mêmes. Si la proposition est valable, le projet obtient le statut de proposition officielle.


Ensuite, sur le chemin de l'idée à la publication, la proposition passe par plusieurs étapes spécifiques. Ils sont numérotés de zéro à quatre programmeurs masculins :


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

Passer à l'étape suivante nécessite l'approbation du TC39. Si la proposition a atteint l'étape 4, on peut s'attendre à ce qu'elle soit incluse dans la prochaine édition officiellement publiée de la spécification de la norme ECMA-262, et par conséquent, elle apparaîtra dans un environnement qui exécute JavaScript. Vous pouvez en savoir plus sur ce processus à partir du document lui-même .


Toutes les propositions existantes d'introduction à la norme peuvent être trouvées ici sur github
Eh bien, maintenant allons plus loin ...


Array.prototype.flat


La méthode flat () renvoie un nouveau tableau,


 var newArray = arr.flat(depth); 

dans lequel tous les éléments imbriqués sous des tableaux ont été "élevés" récursivement au niveau de profondeur spécifié.


Un exemple:


 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] 

Il y a aussi un effet secondaire, il supprime les éléments de tableau non définis


Un exemple:


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

Cap sur le faire vous-même


Nous utilisons réduire et concat


Un exemple:


 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



La méthode flatMap () applique d'abord une fonction à chaque élément, puis convertit le résultat en une structure plate et le place dans un nouveau tableau. Elle est identique à la fonction map, suivie de l'utilisation de la fonction flat avec un paramètre de profondeur de 1, mais flatMap est souvent utile car il fonctionne un peu plus efficacement.


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

callback - Une fonction qui produit les éléments d'un nouveau tableau prend trois arguments:


  1. currentValue - L'élément actuel du tableau à traiter.
  2. index (facultatif) - L'index de l'élément à traiter dans le tableau.
  3. array (facultatif) - Le tableau à parcourir.
    thisArg (facultatif) - La valeur utilisée comme ceci lors de l'appel de la fonction de rappel.
    Valeur de retour - Un nouveau tableau, dont chaque élément est le résultat de la fonction de rappel et est "élevé" au niveau 1.

exemple:


 [ { 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"] 

Faites-le vous-même


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

Conclusion


N'oubliez pas que cette fonctionnalité est ajoutée à la langue pour une raison. Les raisons pour lesquelles les gens intelligents de TC39 font cela sont l'amélioration de la qualité du langage, l'abrégé, l'utilisabilité et autres. Apprenez ces innovations à l'avance et au moment où elles sont officiellement publiées et prises en charge partout, vous pouvez immédiatement vous mettre au travail sans perdre de temps. Vous pouvez également vous positionner comme un expert JavaScript dans votre organisation, capable d'offrir de nouvelles fonctionnalités linguistiques qui peuvent améliorer à la fois le code et le produit lui-même.


ps: pendant la rédaction de l'article :), la proposition est passée à l' étape 4
Array.prototype.{flat,flatMap} à l'étape 4, par 2019.01.29 TC39

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


All Articles