En juillet 2023, ECMAScript a publié plusieurs nouvelles spécifications pour JavaScript. Certaines fonctionnalités incluent de nouvelles méthodes Array qui ne modifient pas le tableau existant. Dans ce blog, nous parlerons de trois d'entre eux (un de 2024) que vous devez connaître si vous souhaitez être au courant des dernières tendances du Web et de JavaScript. !

Array.toSorted()

L'Array.sort() original trie les éléments d'un tableau sur place. Parfois, vous ne souhaitez peut-être pas ce comportement. En programmation, il est généralement recommandé d'éviter de modifier les valeurs existantes et de renvoyer une nouvelle version.

Array.toSorted() résout ce problème en renvoyant un nouveau tableau avec les éléments triés comme décrit dans la fonction de rappel !

J'aime particulièrement cette fonctionnalité car j'avais déjà commencé à l'utiliser dans mon code bien avant que VSCode et les navigateurs Web ne la prennent en charge correctement !

let numbers = [4, 2, 1, 3];
let sortedNumbers = numbers.toSorted();
console.log(sortedNumbers); // Output: [1, 2, 3, 4]

Array.toReversed()

Array.toReversed() est un nouvel ajout qui fournit un moyen immuable d'inverser un tableau. Contrairement à Array.reverse(), qui modifie le tableau d'origine, Array.toReversed() renvoie une copie inversée du tableau, laissant l'original inchangé.

let letters = ['a', 'b', 'c', 'd'];
let reversedLetters = letters.toReversed();
console.log(reversedLetters); // Output: ['d', 'c', 'b', 'a']
console.log(letters); // Output: ['a', 'b', 'c', 'd']

Array.ToSpliced()

Array.toSpliced() offre un moyen non destructif de supprimer, remplacer ou ajouter des éléments dans un tableau. Array.splice() traditionnel modifie le tableau directement, mais Array.toSpliced() crée un nouveau tableau avec les modifications appliquées, laissant le tableau d'origine inchangé. Cela peut être bénéfique lorsque vous devez appliquer des modifications sans affecter les données sources.

let numbers = [1, 2, 3, 4, 5];
let splicedNumbers = numbers.toSpliced(1, 2, 6, 7);
console.log(splicedNumbers); // Output: [1, 6, 7, 4, 5]
console.log(numbers); // Output: [1, 2, 3, 4, 5]

Objet.groupBy()

Cette méthode a été officiellement publiée dans ES2024, mais était encore disponible auparavant avec les polyfills et était déjà passée à une étape ultérieure d'ECMAScript.

Object.groupBy() regroupe les éléments d'un tableau donné en fonction d'une propriété d'objet spécifique. Ceci est extrêmement utile et peut s'avérer très utile lorsque vous souhaitez regrouper une certaine liste d'objets, puis les parcourir en conséquence dans une structure clé-valeur. Un fait intéressant à propos de cette méthode est qu’elle n’a pas été implémentée en tant que méthode prototype de tableau en raison de problèmes de compatibilité Web. (De nombreuses anciennes bibliothèques JavaScript implémentaient déjà du code dans l'espace de noms Array.prototype.group(), c'est pourquoi !)

BONUS : implémentation de votre propre Object.groupBy() pour regrouper plusieurs éléments

Éventuellement, vous devrez peut-être également effectuer un regroupement selon plusieurs propriétés. Le Object.groupBy() d'origine regroupe à un seul niveau.

Implémentez le code ci-dessous dans votre projet pour regrouper les éléments selon plusieurs propriétés !

function multiLevelGroupBy(array, criteria) {
  // Base case: if no criteria are left, return the array itself
  if (criteria.length === 0) return array;

  // Get the first criterion
  const [firstCriterion, ...remainingCriteria] = criteria;

  // Group by the first criterion
  const grouped = array.reduce((acc, item) => {
    const key = firstCriterion(item);
    if (!acc[key]) acc[key] = [];
    acc[key].push(item);
    return acc;
  }, {});

  // For each group, recursively apply the remaining criteria
  for (let key in grouped) {
    grouped[key] = multiLevelGroupBy(grouped[key], remainingCriteria);
  }

  return grouped;
}

Exemple:

const data = [
  { country: 'USA', state: 'California', city: 'Los Angeles', name: 'John' },
  { country: 'USA', state: 'California', city: 'San Francisco', name: 'Alice' },
  { country: 'USA', state: 'New York', city: 'New York City', name: 'Bob' },
  { country: 'Canada', state: 'Ontario', city: 'Toronto', name: 'Carol' },
  { country: 'Canada', state: 'Quebec', city: 'Montreal', name: 'Dave' },
]

let groupedData = multiLevelGroupBy(data, [
  item => item.country,
  item => item.state,
  item => item.city
]);

console.log(groupedData);

/* Expected Output: */
{
  USA: {
    California: {
      'Los Angeles': [{ country: 'USA', state: 'California', city: 'Los Angeles', name: 'John' }],
      'San Francisco': [{ country: 'USA', state: 'California', city: 'San Francisco', name: 'Alice' }]
    },
    New York: {
      'New York City': [{ country: 'USA', state: 'New York', city: 'New York City', name: 'Bob' }]
    }
  },
  Canada: {
    Ontario: {
      Toronto: [{ country: 'Canada', state: 'Ontario', city: 'Toronto', name: 'Carol' }]
    },
    Quebec: {
      Montreal: [{ country: 'Canada', state: 'Quebec', city: 'Montreal', name: 'Dave' }]
    }
  }
}

La fin!

Si vous êtes arrivé à la fin de cet article, merci beaucoup d'avoir lu ! ?