Explorer les dernières fonctionnalités de JavaScript – ES2023

ECMAScript 2023 (ES14) a introduit plusieurs améliorations de JavaScript, optimisant à la fois la fonctionnalité et l’expressivité. Cet article vous présente les derniers ajouts : le très attendu findLast et findLastIndex méthodes de tableau, nouvelles méthodes de tableau immuables comme toSorted et toSpliceddes symboles comme clés WeakMap et l’inclusion de Hashbang Grammar.

Depuis l’introduction d’ES2015, communément appelé ES6, JavaScript évolue à un rythme dynamique. Avec de nouvelles fonctionnalités ajoutées chaque année, la dernière version, ECMAScript 2023 (ES14), apporte un certain nombre de fonctionnalités utiles à JavaScript.

Dans cet article, nous examinerons les derniers ajouts : nouvelles méthodes de tableau, symboles comme clés WeakMap et prise en charge de Hashbang Grammar.

Nouvelles méthodes de tableau : findLast et findLastIndex

Méthode findLast Array

ES2023 a introduit le findLast méthode array, un ajout très utile qui simplifie le processus de localisation du dernier élément d’un tableau qui satisfait une fonction de prédicat donnée. Illustrons cela avec un exemple :

const numbers = [1, 2, 3, 4, 5, 6, 7]
const lastEvenNum = numbers.findLast(number => number % 2 === 0)

Avec findLast, vous pouvez rapidement identifier le dernier élément correspondant dans un tableau. Avant cela, il existait différentes solutions pour parvenir à ce résultat. Par exemple, nous pourrions d’abord inverser un tableau, puis trouver le premier élément qui correspond au prédicat.

const numbers = [1, 2, 3, 4, 5, 6, 7]
const lastEvenNum = [...numbers].reverse().find(number => number % 2 === 0)

Cette solution convient lorsqu’il ne s’agit pas de très grands tableaux. Le code ci-dessus crée une nouvelle copie du numbers array, l’inverse puis trouve le premier élément qui correspond au prédicat. Le coût des opérations supplémentaires est négligeable si vous traitez de petits ensembles de données.

Une approche plus performante nécessite de parcourir le tableau de nombres une seule fois et d’attribuer des valeurs qui correspondent au prédicat à une variable.

const numbers = [1, 2, 3, 4, 5, 6, 7]
let lastEvenNum

for (const num of numbers) {
  if (num % 2 === 0) {
    lastEvenNum = num
  }
}

Cette solution est plus impérative, mais beaucoup plus rapide, car elle ne nécessite qu’une seule boucle et n’implique pas de copier le tableau de nombres et de l’inverser.

Méthode de tableau findLastIndex

S’appuyant sur le concept de recherche du dernier élément, ES2023 a également introduit findLastIndex. Cette méthode renvoie l’index du dernier élément qui remplit une condition spécifique. Voici une application pratique :

const numbers = [1, 2, 3, 4, 5, 6, 7]
const lastEvenNumIndex = numbers.findLastIndex(number => number % 2 === 0)

Ci-dessous, vous pouvez voir comment trouver un index du dernier élément qui correspond au prédicat à l’aide d’une boucle for.

let lastEvenNumIndex;

for (let i = 0; i <= numbers.length; i++) {
  const num = numbers[i];
  if (num % 2 === 0) {
    lastEvenNumIndex = i;
  }
}

Le findLastIndex La méthode est beaucoup plus propre et déclarative que la solution impérative pour la boucle.

Nouvelles méthodes de tableaux immuables : toSorted, toSpliced ​​et with

findLast et findLastIndex ne sont pas les seules méthodes de tableau introduites dans ES2023. D’autres nouvelles méthodes de tableau sont toSorted, toSpliced et with.

Mais attends, n’est-ce pas déjà fait sort et splice méthodes ? Pourquoi avons-nous besoin toSorted et toSpliced?

Le problème avec sort et splice méthodes est qu’elles mutent le tableau d’origine sur lequel elles sont appelées. Voici un exemple :

const fruits = ['banana', 'kiwi', 'apple', 'orange']
const sortedFruits = fruits.sort((a, b) => a.localeCompare(b))

Le sortedFruits const reçoit une gamme triée de fruits. Cependant, le fruits le tableau a également été modifié. Ce comportement peut conduire à des mutations accidentelles de données inattendues.

La même chose s’applique à la splice méthode. Le splice La méthode peut être utilisée pour ajouter, remplacer et supprimer des éléments d’un tableau, mais elle mute également le tableau d’origine. C’est là qu’interviennent les nouvelles méthodes. Jetons un coup d’œil à chacune des méthodes nouvellement ajoutées.

Méthode de tableau toSorted

Le toSorted méthode, comme vous l’avez probablement déjà deviné, est une nouvelle alternative à la sort méthode. Il vous permet de créer une version triée d’un tableau sans altérer l’original. Voici un exemple de tri des fruits par ordre alphabétique, mais cette fois avec le toSorted méthode.

const fruits = ['banana', 'kiwi', 'apple', 'orange']
const sortedFruits = fruits.toSorted((a, b) => a.localeCompare(b))

Le toSorted La méthode crée une copie au lieu de muter le tableau d’origine. Cela se traduit par un code plus prévisible et évite les mutations accidentelles des données.

Méthode de tableau toSpliced

Avec toSplicedvous pouvez créer un nouveau tableau en épissant des éléments sans modifier le tableau source.

const items = ['carrot', 'banana', 'potato']
const vegetables = items.toSpliced(1, 1)

Cette méthode est particulièrement pratique lorsque vous devez manipuler des tableaux sans effets secondaires.

avec la méthode Array

Compléter l’ensemble des nouvelles méthodes de tableau est la with méthode. Il vous permet de remplacer un élément à un index spécifié, en créant un nouveau tableau tout en préservant l’original :

const vegetables = ['carrot', 'potato']
const updatedVegetables = vegetables.with(1, 'parsnip')

Le with La méthode est un équivalent immuable de la mise à jour d’un tableau en utilisant la notation entre crochets.

const vegetables = ['carrot', 'potato']
const newVegetables = [...vegetables]
newVegetables[1] = 'parsnip'

Symboles comme clés WeakMap

Un autre changement intéressant dans ES2023 est l’inclusion de symboles comme clés WeakMap. Auparavant, les symboles n’étaient pas autorisés dans ce contexte. Cette amélioration offre de nouvelles possibilités, comme illustré dans l’exemple suivant :

const weakMap = new WeakMap()
const uniqueSymbolKey = Symbol('myUniqueSymbolKey')
weakMap.set(uniqueSymbolKey, 'value')
console.log(weakMap.get(uniqueSymbolKey)) 

Cette mise à jour étend la polyvalence des symboles et des WeakMaps, qui constituent un excellent outil pour associer des informations supplémentaires à certaines valeurs sans affecter le garbage collection.

Grammaire du hashbang

JavaScript dans ES2023 inclut désormais Hashbang Grammar, permettant aux développeurs de spécifier le programme ou le moteur utilisé pour exécuter un script. Cette fonctionnalité est utile dans divers environnements et peut être implémentée comme suit :

#!/usr/bin/env node

console.log('I am a JS script that should be run in Node.js!')

Conclusion

ES2023 a inauguré une nouvelle ère de développement JavaScript, marquée par des fonctionnalités et une expressivité améliorées. Les nouvelles méthodes de tableau, les méthodes de tableau immuables, les symboles comme clés WeakMap et Hashbang Grammar contribuent collectivement à un langage plus polyvalent et plus efficace.