Transformations de tableaux en

À propos de Transformations de tableaux

En JavaScript, la classe Array dispose de nombreuses méthodes intégrées et puissantes pour transformer les tableaux. Ces méthodes rendent la conversion d'un tableau en un autre bien plus simple qu'avec une simple boucle for ou une manipulation plus directe.

Certaines méthodes sont pures, ce qui signifie qu'elles ne modifient pas le tableau d'origine. Elles renvoient à la place un nouveau tableau. D'autres méthodes, en revanche, modifient le tableau sur lequel elles sont appelées et ne renvoient pas le tableau modifié.

Voici quelques-unes des méthodes les plus couramment utilisées pour transformer des tableaux. Une liste complète des méthodes disponibles se trouve dans la documentation MDN.

map (pure)

Cette méthode crée un nouveau tableau en transformant chaque élément selon une fonction passée en argument. Ces fonctions de rappel s'écrivent souvent sous la forme de fonctions fléchées.

let arr = [1, 2, 3, 4];

const newArr = arr.map((value) => value - 1);
console.log(newArr);
// => [0, 1, 2, 3]
console.log(arr);
// => [1, 2, 3, 4]

Il est à noter que le tableau obtenu aura toujours la même longueur que le tableau d'origine.

filter (pure)

Cette méthode crée un tableau en filtrant le tableau courant, grâce à une fonction de filtrage (qui renvoie vrai si l'élément doit être conservé et faux s'il doit être supprimé).

let arr = [1, 2, 3, 4];

arr.filter((value) => value % 2 === 0);
// => [2, 4]

reduce (pure)

Cette méthode réduit le tableau à une seule valeur à l'aide d'une fonction qui prend un accumulateur et l'élément courant du tableau comme paramètres. Cette fonction indique comment l'élément courant doit être fusionné dans l'accumulateur et renvoie l'accumulateur qui sera utilisé à l'itération suivante.

let arr = [1, 2, 3, 4];

// Get the sum of elements
arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
// => 10

// Classify the numbers by whether they are odd or not
arr.reduce(
  (accumulator, currentValue) => {
    if (currentValue % 2 === 0) {
      accumulator.even.push(currentValue);
    } else {
      accumulator.odd.push(currentValue);
    }

    return accumulator;
  },
  { even: [], odd: [] },
);
// => { even: [2, 4], odd: [1, 3] }

reverse

Cette méthode inverse les éléments d'un tableau.

const arr = [1, 2, 3, 4];

arr.reverse();
// => [4, 3, 2, 1]

Cette méthode modifie le tableau sur lequel elle est appelée.

slice (pure)

À partir d'un indice de début et d'un indice de fin, cette méthode crée un sous-tableau du tableau sur lequel elle est appelée.

L'élément situé à l'indice de fin n'est pas inclus. De plus, tous les paramètres sont facultatifs : l'indice de début vaut 0 par défaut et l'indice de fin vaut par défaut la longueur du tableau.

const arr = [1, 2, 3, 4];

arr.slice(1, 2); // [2]
arr.slice(1); // [2, 3, 4]
// You can also use negative numbers, that represent the indexes
// starting from the end of the array
arr.slice(-2); // [3, 4]

splice

Supprime ou remplace et/ou ajoute de nouveaux éléments d'un tableau. Elle prend les paramètres suivants :

• l'indice de l'élément à partir duquel commencer à modifier le tableau
• le nombre d'éléments à supprimer
• les éléments à insérer dans le tableau (facultatif)

splice renvoie les éléments qui ont été supprimés.

const arr = ['1', '2', '5', '6'];

// Insert an element at index 2
arr.splice(2, 0, '3');
console.log(arr);
// => ['1', '2', '3', '5', '6']

// Remove 2 elements, starting at index 3 and insert 2 elements
const removed = arr.splice(3, 2, '4', '5');
console.log(removed);
// => ['5', '6']
console.log(arr);
// => ['1', '2', '3', '4', '5']

// Remove 1 element at index 1
arr.splice(1, 1);
console.log(arr);
// => ['1', '3', '4', '5']

sort

Par défaut, sort trie les éléments d'un tableau en les convertissant d'abord en strings, puis en appliquant une comparaison de strings (voir le concept Comparaison). Le tri se fait en place, ce qui signifie que le tableau d'origine est modifié. sort renvoie aussi ce tableau modifié, ce qui est pratique si tu veux y enchaîner d'autres méthodes.

const arr = ['c', 'a', 'z', 'b'];
const result = arr.sort();
console.log(result);
// => ['a', 'b', 'c', 'z']
console.log(arr);
// => ['a', 'b', 'c', 'z']

const arr = [3, 1, 2, 10];
arr.sort();
// => [1, 10, 2, 3]
// Because the string '10' comes before '2' in dictionary order.

Pour personnaliser le comportement du tri, tu peux passer une fonction de comparaison en argument. Cette fonction de comparaison est elle-même appelée avec deux arguments, qui sont deux éléments du tableau. Elle doit alors renvoyer ce qui suit :

• un nombre négatif si le premier argument doit être trié avant le second
• un nombre positif si le premier argument doit être trié après le second
• 0 si l'ordre des éléments doit rester le même

Avec cela, on peut régler le problème du tri des nombres en passant la bonne fonction de comparaison.

const arr = [3, 1, 2, 10];
arr.sort((a, b) => a - b);
// => [1, 2, 3, 10]
// "a - b" is negative when b is greater than a, positive when
// a is greater than b and 0 when they are equal.

Voici un exemple d'utilisation d'une fonction de comparaison personnalisée pour trier un tableau d'objets.

const arr = [
  { name: 'Lydia', age: 7 },
  { name: 'Anne', age: 34 },
  { name: 'Holger', age: 59 },
];

arr.sort((item1, item2) => {
  if (item1.name < item2.name) {
    return -1;
  }
  if (item1.name > item2.name) {
    return 1;
  }
  return 0;
});
// => [ { name: 'Anne', age: 34 }, { name: 'Holger', age: 59 },
// { name: 'Lydia', age: 7 } ]

Depuis 2019, la spécification du langage indique que le tri doit être stable, mais il n'y a aucune garantie concernant les performances (complexité en temps et en espace).