Malgré le fait qu'au cours des sept dernières années, j'écris en JavaScript presque tous les jours ouvrables, je dois admettre que je prête peu d'attention aux nouvelles sur les innovations d'ES. Les principales fonctionnalités comme async / wait et proxy sont une chose, mais chaque année, il y a un flux de petits changements progressifs qui ne tombent pas dans mon champ de vision, car il y a toujours quelque chose de plus important à étudier.
Dans cet article, j'ai rassemblé les capacités des JS modernes, dont on n'a pas beaucoup parlé lors de leur apparition. Certains d'entre eux ne font qu'accroître la convivialité, et certains sont incroyablement pratiques et peuvent vous éviter d'écrire un tas de code.
ES2015
Littéraux binaires et octaux
JavaScript n'a pas souvent à utiliser de manipulation binaire. Mais parfois, des tâches surgissent qui ne peuvent être résolues autrement. Par exemple, lorsque vous écrivez du code hautes performances pour des appareils faibles, vous insérez des bits dans le stockage local, effectuez des manipulations de pixels RVB dans un navigateur ou travaillez avec des formats de données binaires très compacts.
Tout cela peut nécessiter beaucoup de travail pour cacher / combiner des nombres binaires; il m'a toujours semblé qu'ils étaient en vain cachés dans des décimales. Pour de tels cas, le format littéral binaire a été ajouté à ES6:
0b .
const binaryZero = 0b0; const binaryOne = 0b1; const binary255 = 0b11111111; const binaryLong = 0b111101011101101;
Cela simplifie considérablement le travail avec les indicateurs binaires:
Même chose avec les nombres octaux. Dans le monde JS, c'est une opportunité de niche, mais ils sont souvent utilisés pour la mise en réseau et certains formats de fichiers. Vous pouvez écrire des nombres octaux en utilisant la syntaxe
0o .
Number.isNaN ()
À ne pas confondre avec
window.isNaN() , il s'agit d'une nouvelle méthode avec un comportement beaucoup plus intuitif.
L'
isNaN classique a quelques astuces intéressantes:
isNaN(NaN) === true isNaN(null) === false isNaN(undefined) === true isNaN({}) === true isNaN('0/0') === true isNaN('hello') === true
Qu'est-ce que cela nous donne? Tout d'abord, aucun de ces paramètres n'est réellement
NaN . Comme d'habitude, le problème vient de toutes les propriétés JavaScript «favorites»: le casting de type. Les arguments de
window.isNaN sont
window.isNaN en nombres à l'aide de la fonction
Number .
La nouvelle
Number.isNaN() statique
Number.isNaN() résout ce problème. Il renvoie une fois pour toutes l'égalité des arguments qui lui ont été transmis ainsi qu'à
NaN . Ceci est absolument clair:
Number.isNaN(NaN) === true Number.isNaN(null) === false Number.isNaN(undefined) === false Number.isNaN({}) === false Number.isNaN('0/0') === false Number.isNaN('hello') === false
Signature: Number.isNaN : (value: any) => booleanES2016
Opérateur d'exponentiation
Cela se produit de temps en temps, il est donc bon d'avoir une syntaxe littérale sous la main pour l'exponentiation:
2**2 === 4 3**2 === 9 3**3 === 27
Étrange, mais j'étais
sûr que cela existe déjà en JavaScript. Peut-être confondu avec Python.
Array.prototype.includes ()
C'était difficile à manquer, mais si vous avez écrit
array.indexOf(x) !== -1 au cours des trois dernières années, alors réjouissez-vous de la nouvelle méthode
includes :
[1, 2, 3].includes(2) === true [1, 2, 3].includes(true) === false
includes utilise
l'algorithme Same Value Zero , qui est presque identique à la vérification stricte d'égalité (
=== ), sauf qu'il peut gérer les valeurs
NaN . Cet algorithme compare également les objets par des liens plutôt que par des contenus:
const object1 = {}; const object2 = {}; const array = [object1, 78, NaN]; array.includes(object1) === true array.includes(object2) === false array.includes(NaN) === true
includes peuvent prendre un deuxième paramètre,
fromIndex , qui vous permet de fournir une valeur de décalage:
Utile
Signature: Array.prototype.includes : (match: any, offset?: Int) => booleanES2017
Mémoire partagée et opérations atomiques
Ce sont quelques fonctionnalités intéressantes qui sont tout simplement inestimables si vous avez besoin de faire beaucoup de travail avec des travailleurs Web. Vous pouvez partager directement la mémoire avec plusieurs processus et définir des verrous pour éviter les conditions de concurrence.
Ce sont deux excellentes fonctionnalités avec des API assez complexes, donc je ne les décrirai pas ici. Pour plus de détails, envoyez-vous à cet article:
https://www.sitepen.com/blog/the-return-of-sharedarraybuffers-and-atomics/ . Tous les navigateurs ne prennent pas encore en charge ces fonctionnalités, mais j'espère que la situation s'améliorera au cours des deux prochaines années.
ES2018
Mine d'or d'expressions régulières
ES2018 a tout un tas de nouvelles fonctionnalités d'expression régulière:
Matchs cachés (correspondance avec les personnages précédents)
Dans les environnements d'exécution qui prennent en charge cela, vous pouvez désormais écrire des expressions régulières qui recherchent des caractères
avant de les faire correspondre. Par exemple, pour rechercher tous les nombres précédés d'un signe dollar:
const regex = /(?<=\$)\d+/; const text = 'This cost $400'; text.match(regex) === ['400']
Tout tourne autour du nouveau groupe lookbehind, les groupes d'anticipation jumeaux:
Look ahead: (?=abc) Look behind: (?<=abc) Look ahead negative: (?!abc) Look behind negative: (?<!abc)
Malheureusement, aujourd'hui, vous ne pouvez pas traduire la nouvelle syntaxe lookbehind pour les anciens navigateurs, il est donc tout à fait possible que vous ne puissiez l'utiliser que dans Node pendant un certain temps.
Groupes de capture nommés
Les expressions régulières peuvent désormais sélectionner des sous-échantillons et les utiliser pour une analyse simple. Jusqu'à récemment, nous ne pouvions faire référence à ces fragments que par des nombres, par exemple:
const getNameParts = /(\w+)\s+(\w+)/g; const name = "Weyland Smithers"; const subMatches = getNameParts.exec(name); subMatches[1] === 'Weyland' subMatches[2] === 'Smithers'
Et maintenant il y a une syntaxe pour nommer ces sous-échantillons (ou groupes d'enregistrement): à l'intérieur des crochets au début, nous mettons
?<titl> , si nous voulons donner un nom au groupe:
const getNameParts = /(?<first>\w+)\s(?<last>\w+)/g; const name = "Weyland Smithers"; const subMatches = getNameParts.exec(name); const {first, last} = subMatches.groups first === 'Weyland' last === 'Smithers'
Malheureusement, cela ne fonctionne que sur Chrome et Node maintenant.
Maintenant, les points peuvent marquer de nouvelles lignes
Il est uniquement nécessaire d'apposer l'indicateur
/s , par exemple,
/someRegex./s ,
/anotherRegex./sg .
ES2019
Array.prototype.flat () et flatMap ()
J'étais très content de voir ça sur MDN.
Autrement dit,
flat() convertit un tableau multidimensionnel en un tableau unidimensionnel à une profondeur maximale donnée:
const multiDimensional = [ [1, 2, 3], [4, 5, 6], [7,[8,9]] ]; multiDimensional.flat(2) === [1, 2, 3, 4, 5, 6, 7, 8, 9]
flatMap est une
map suivie d'un
flat de profondeur 1. Ceci est utile si vous devez mapper une fonction qui renvoie un tableau, mais vous n'avez pas besoin que le résultat soit une structure de données imbriquée:
const texts = ["Hello,", "today I", "will", "use FlatMap"];
Capture illimitée
Vous pouvez maintenant écrire des expressions try / catch sans référence aux erreurs de lancement:
try {
Soit dit en passant, les crochets dans lesquels vous ne tenez pas compte de la valeur de
e sont parfois appelés
gestion des exceptions Pokemon . Parce que vous devez tous les attraper!
Méthodes de découpage des valeurs de chaîne
Légèrement, mais agréable:
const padded = ' Hello world '; padded.trimStart() === 'Hello world '; padded.trimEnd() === ' Hello world';