Skip to main content

Mastering Arrays

Pour apprendre à connaitre et maitriser les tableaux en JS.

Trier​

sort​

Cette méthode trie les éléments du tableau en fonction d'une condition.

Live Editor
function Sort() {
  let myArray = [6,9,4,8,3,7,1,5,2]

  // Tri les éléments par ordre croissant
  let sortedArray = myArray.sort((a, b) => a - b)

  return (
    <div>
      <h2>{sortedArray.map(element => `${element} ,`)}</h2>
    </div>
  )
}
Result
Loading...

Filtrage​

filter​

Cette méthode retourne un nouveau tableau contenant uniquement les éléments correspondant à la condition.

Live Editor
function Filter() {
  let myArray = [1,2,3,4,5,6,7,8,9]

  // Ne retourne que les éléments supérieur à 4
  let filteredArray = myArray.filter(element => element > 4)

  return (
    <div>
      <h2>{filteredArray.map(element => `${element} ,`)}</h2>
    </div>
  )
}
Result
Loading...

find​

Cette méthode retourne le premier élément du tableau correspondant à la condition.

Live Editor
function Find() {
  let myArray = [1,2,3,4,5,6,7,8,9]

  // Retourne l'élément 4
  let element = myArray.find(element => element == 4)

  return (
    <div>
      <h2>{element}</h2>
    </div>
  )
}
Result
Loading...

findIndex​

Cette méthode ressemble beaucoup à la méthode find mais retourne la position de l'élément dans le tableau.

Live Editor
function FindIndex() {
  let myArray = [1,2,3,4,5,6,7,8,9]

  // Retourne la position de '4'
  let element = myArray.findIndex(element => element == 4)

  return (
    <div>
      <h2>{element}</h2>
    </div>
  )
}
Result
Loading...

Ordonner​

reverse​

Cette méthode inverse l'ordre de tous les éléments du tableau.

Live Editor
function Reverse() {
  let myArray = [1,2,3,4,5,6,7,8,9]

  let reverseArray = myArray.reverse()

  return (
    <div>
      <h2>{reverseArray.map(element => `${element} ,`)}</h2>
    </div>
  )
}
Result
Loading...

Parcourir le tableau​

map​

Cette méthode retourne un nouveau tableau rempli avec le callback de la fonction passé en paramètre.

Live Editor
function Map() {
  let myArray = [1,2,3,4,5,6,7,8,9]

 // Pour chaque élément, le double est retourné.
  let doubleArray = myArray.map(element => element * 2)

  return (
    <div>
      <h2>{doubleArray.map(element => `${element} ,`)}</h2>
    </div>
  )
}
Result
Loading...

forEach​

Cette méthode exécute une fonction pour chaque élément du tableau.

Live Editor
function ForEach() {
  let myArray = [1,2,3,4,5,6,7,8,9]

  let sum = 0

  myArray.forEach(element => {sum = sum + element})

  return (
    <div>
      <h2>{sum}</h2>
    </div>
  )
}
Result
Loading...

reduce​

Cette méthode prend deux arguments, l'accumulateur (acc) et l'élément courant (n).

Pour chaque élément le résultat sera stocké dans l'accumulateur.

Live Editor
function Reduce() {
  let myArray = [1,2,3,4,5,6,7,8,9]

  let sum = myArray.reduce((acc, n) => acc + n)

  return (
    <div>
      <h2>{sum}</h2>
    </div>
  )
}
Result
Loading...

Faire une condition​

includes​

Cette méthode permet de savoir si un élément ce trouve dans un tableau

Live Editor
function Includes() {
  let myArray = [1,2,3,4,5,6,7,8,9]

  let bool

  if(myArray.includes(6)){
    bool = 'true'
  } else {
    bool = 'false'
  }

  return (
    <div>
      <h2>{bool}</h2>
    </div>
  )
}
Result
Loading...

some​

Cette méthode permet de savoir si au moins un élément du tableau valide la condition donnée.

Live Editor
function Some() {
  let myArray = [1,2,3,4,5,6,7,8,9]

  let bool

  // Vérifie si au moins un élément est supérieur à 6
  if(myArray.some(element => element > 6)){
    bool = 'true'
  } else {
    bool = 'false'
  }

  return (
    <div>
      <h2>{bool}</h2>
    </div>
  )
}
Result
Loading...

every​

Cette méthode permet de savoir si tous les éléments du tableau valident la condition donnée.

Live Editor
function Every() {
  let myArray = [1,2,3,4,5,6,7,8,9]

  let bool

  // Vérifie si tous les éléments sont supérieur à 6
  if(myArray.every(element => element > 6)){
    bool = 'true'
  } else {
    bool = 'false'
  }

  return (
    <div>
      <h2>{bool}</h2>
    </div>
  )
}
Result
Loading...

Transformation​

fill​

Cette méthode permet de remplacer tous les éléments du tableau par une valeur.

Live Editor
function Fill() {
  let myArray = [1,2,3,4,5,6,7,8,9]

  // Ne retourne que les éléments supérieur à 4
  let filteredArray = myArray.fill(4)

  return (
    <div>
      <h2>{filteredArray.map(element => `${element} ,`)}</h2>
    </div>
  )
}
Result
Loading...

flat​

Cette méthode permet de supprimer les tableaux imbriqués.

Live Editor
function Flat() {
  let myArray = [[1,2],[3,4,5],[6,7],[8,9]]

  let fattenArray = myArray.flat(2)

  return (
    <div>
      <h2>{fattenArray.map(element => `${element} ,`)}</h2>
    </div>
  )
}
Result
Loading...

flatMap​

Cette méthode permet de supprimer les tableaux imbriqués tous en appliquant une fonction a chaque élément.

Cette méthode combine les fonctions flat et map.

Live Editor
function FlatMap() {
  let myArray = [[1],[3],[6],[8]]

  let fattenArray = myArray.flatMap(n => n * 3)

  return (
    <div>
      <h2>{fattenArray.map(element => `${element} ,`)}</h2>
    </div>
  )
}
Result
Loading...