Les méthodes de tableau JavaScript nous permettent de manipuler nos données. Cependant, nous devons les utiliser avec soin en fonction de la façon dont ils manipulent nos tableaux. Certains d'entre eux reposent sur l'immuabilité et d'autres utilisent la voie mutable. Et savoir comment ils manipulent nos données peut nous aider à créer des applications prévisibles.

Dans cet article, je vais vous guider à travers les méthodes de tableau mutateur et non-mutateur et leur valeur de retour.

Notez que cet article n'est pas une introduction aux méthodes de tableau. Je vais me concentrer sur la mutabilité et l'immuabilité. Donc, si vous êtes nouveau dans les méthodes de tableau, cet article pourrait vous aider.

Sinon, commençons.

• Méthodes de tableau de mutateurs

  • sort()
  • unshift()
  • shift()
  • splice()
  • push()
  • reverse()
  • pop()
  • fill()
  • forEach()

• Méthodes de tableau non-mutateur

  • slice()
  • join()
  • includes()
  • filter()
  • concat()
  • every()
  • find()
  • findIndex()
  • map()
  • reduce()
  • some()
  • flat()
  • flatMap()

Méthodes de tableau de mutateurs

Ces méthodes suivantes modifieront le tableau.

sort()

Il trie les éléments d'un tableau.

valeur de retour: le tableau trié.

const myAwesomeArray = [5, 4, 3, 2, 1]

// Tri du plus petit au plus grand
myAwesomeArray.sort((a, b) => a - b)
// -------> valeur de retour: [1, 2, 3, 4, 5]

unshift()

Il ajoute un ou plusieurs éléments au début d'un tableau.

valeur de retour: la nouvelle longueur du tableau.

const myAwesomeArray = [5, 4, 3, 2, 1]

myAwesomeArray.unshift(6)
// -------> valeur de retour: (6)

shift()

Il supprime le premier élément d'un tableau.

valeur de retour: l'élément supprimé ou undefined si le tableau est vide.

const myAwesomeArray = [5, 4, 3, 2, 1]

myAwesomeArray.shift()
// -------> valeur de retour: (5)

splice()

Il supprime ou remplace les éléments existants et/ou ajoute de nouveaux éléments.

valeur de retour: Le tableau qui contient les éléments/éléments supprimés. Si aucun élément n'est supprimé, il renvoie un tableau vide.

const myAwesomeArray = [5, 4, 3, 2, 1]

myAwesomeArray.splice(0, 1, 8)
// -------> valeur de retour: [5]

push()

Il ajoute un ou plusieurs éléments à la fin d'un tableau.

valeur de retour: la nouvelle longueur du tableau.

const myAwesomeArray = [5, 4, 3, 2, 1]

myAwesomeArray.push(7)
// -------> valeur de retour: (6)

reverse()

Il inverse un tableau.

valeur de retour: le tableau inversé.

const myAwesomeArray = ["e", "d", "c", "b", "a"]

myAwesomeArray.reverse()
// -------> valeur de retour: ['a', 'b', 'c', 'd', 'e']

pop()

Il supprime le dernier élément d'un tableau.

valeur de retour: l'élément supprimé du tableau ou undefined si le tableau est vide.

const myAwesomeArray = [5, 4, 3, 2, 1]

myAwesomeArray.pop()
// -------> valeur de retour: 1

fill()

Il remplit tous les éléments d'un tableau avec la même valeur.

valeur de retour: le tableau modifié.

const myAwesomeArray = [1, 2, 3, 4, 5]

myAwesomeArray.fill(0, 1, 3)
// -------> valeur de retour: [1, 0, 0, 4, 5]

forEach()

Il applique une fonction à chaque élément du tableau.

valeur de retour: il retourne undefined.

const myAwesomeArray = [
  { id: 1, nom: "john" },
  { id: 2, nom: "Ali" },
  { id: 3, nom: "Mass" },
]

myAwesomeArray.forEach(element => console.log(element.name))
// -------> valeur de retour: undefined

Méthodes de tableau non-mutateur

Ces méthodes suivantes ne modifient pas le tableau, ils renvoient une représentation du tableau.

slice()

Il extrait une section d'un tableau donné.

valeur de retour: le nouveau tableau avec les éléments extraits.

const myAwesomeArray = [1, 2, 3, 4, 5]

myAwesomeArray.slice(0, 3)
// -------> valeur de retour: [1, 2, 3]

join()

Il joint tous les éléments d'un tableau en une chaîne.

valeur de retour: une chaîne (string) avec tous les éléments du tableau concaténés ou la chaîne vide si le tableau est vide.

const myAwesomeArray = ["JavaScript", "est", "génial"]

myAwesomeArray.join("")
// -------> valeur de retour: "JavaScript est génial"

includes()

Il détermine si le tableau contient une valeur donnée ou non.

valeur de retour: il retourne un booléen true ou false.

const myAwesomeArray = [1, 2, 3, 4, 5]

myAwesomeArray.includes(3)
// -------> valeur de retour: true

filter()

Il filtre un tableau avec une fonction pour déterminer quel élément réussit le test.

valeur de retour: le nouveau tableau avec les éléments qui ont réussit le test sinon il renvoie un tableau vide.

const myAwesomeArray = [
  { id: 1, nom: "john" },
  { id: 2, nom: "Ali" },
  { id: 3, nom: "Mass" },
  { id: 4, nom: "Mass" },
]

myAwesomeArray.filter(element => element.name === "Mass")
// -------> valeur de retour: [{id: 3, nom: "Mass"},
// {id: 4, nom: "Masse"}]

concat()

Il fusionne deux ou plusieurs tableaux/valeurs en le concaténant.

valeur de retour: le nouveau tableau avec des tableaux/valeurs concaténés.

const myAwesomeArray = [1, 2, 3, 4, 5] const myAwesomeArray2 = [10, 20, 30, 40, 50] myAwesomeArray.concat (myAwesomeArray2) // -------> valeur de retour: [1, 2, 3, 4, 5, 10, 20, 30, 40, 50]

every()

Il vérifie si tous les éléments du tableau réussissent ou non la fonction de test.

valeur de retour: il retourne un booléen true ou false.

const myAwesomeArray = ["a", "a", "a", "a", "a"]

myAwesomeArray.every(test => test === "a")
// -------> valeur de retour: true

find()

Il trouve l'élément qui satisfait la fonction de test passée en paramètre.

valeur de retour: le premier élément qui satisfait la fonction de test sinon il retourne undefined.

const myAwesomeArray = [
  { id: 1, nom: "john" },
  { id: 2, nom: "Ali" },
  { id: 3, nom: "Mass" },
]

myAwesomeArray.find(element => element.id === 3)
// -------> valeur de retour: {id: 3, nom: "Mass"}

findIndex()

Il retourne l'index d'un élément trouvé et qui satisfait la fonction de test.

valeur de retour: l'indice du premier élément qui satisfait la fonction de test sinon il retourne -1.

const myAwesomeArray = [
  { id: 1, nom: "john" },
  { id: 2, nom: "Ali" },
  { id: 3, nom: "Mass" },
]

myAwesomeArray.findIndex(element => element.id === 3)
// -------> valeur de retour: 2

map()

Il prend une fonction comme argument qui s'exécutera sur tous les éléments du tableau.

valeur de retour: un nouveau tableau qui contient chaque élément résultant de la fonction passée en paramètre.

const myAwesomeArray = [5, 4, 3, 2, 1]
myAwesomeArray.map (x => x \* x)

// -------> valeur de retour: [25, 16, 9, 4, 1]

reduce()

Il exécute une fonction de réduction sur chaque élément du tableau.

valeur de retour: une valeur unique qui résulte de la réduction du tableau.

const myAwesomeArray = [1, 2, 3, 4, 5]

myAwesomeArray.reduce ((total, value) => total \* value)
// -------> valeur de retour = 120

some()

Il détermine si au moins un élément du tableau correspond ou non à la fonction de test.

valeur de retour: il retourne un booléen true ou false.

const myAwesomeArray = ["a", "b", "c", "d", "e"]

myAwesomeArray.some(test => test === "d")
// -------> valeur de retour: true

flat()

Il aplatit tous les éléments du sous-tableau dans un nouveau tableau.

valeur de retour: un nouveau tableau avec les éléments du sous-tableau concaténés dedans.

const myAwesomeArray = [[1, 2], [3, 4], 5]

myAwesomeArray.flat()
// -------> valeur de retour: [1, 2, 3, 4, 5]

flatMap()

Il applique une fonction à chaque élément du tableau, puis aplatit le résultat en un tableau.

valeur de retour: un nouveau tableau avec chaque élément résultant de la fonction passée en paramètre et aplati.

const myAwesomeArray = [[1], [2], [3], [4], [5]]

myAwesomeArray.flatMap (arr => arr \* 10)
// -------> valeur de retour: [10, 20, 30, 40, 50]