Tableaux et objets

Ce que tu vas apprendre

• Créer et lire des tableaux et des objets.
• Transformer une liste avec map, filter et find.
• Utiliser la déstructuration et le spread pour écrire moins de code.

Les tableaux

Un tableau est une liste ordonnée de valeurs, écrite entre crochets. Chaque valeur a une position, appelée indice, qui commence à 0.

const ingredients = ['farine', 'oeufs', 'lait']

console.log(ingredients[0])       // "farine"
console.log(ingredients.length)   // 3

ingredients.push('sucre')
console.log(ingredients)          // ["farine", "oeufs", "lait", "sucre"]

push ajoute à la fin. Un tableau déclaré avec const peut être modifié : seule la réaffectation de la variable est interdite.

Les objets

Un objet regroupe des valeurs sous des noms, les propriétés. Il est écrit entre accolades.

const recette = {
  titre: 'Crêpes',
  minutes: 20,
  vegetarien: true
}

console.log(recette.titre)       // "Crêpes"
console.log(recette['minutes'])  // 20

recette.minutes = 25

Le point est la lecture habituelle. Les crochets servent quand le nom est dans une variable.

Un objet peut contenir une fonction, qu'on appelle alors une méthode. Un tableau d'objets est la forme la plus courante pour décrire une liste de recettes.

const recettes = [
  { id: 1, titre: 'Crêpes', minutes: 20 },
  { id: 2, titre: 'Ratatouille', minutes: 60 },
  { id: 3, titre: 'Salade', minutes: 10 }
]

map : transformer chaque élément

map applique une fonction à chaque élément et renvoie un nouveau tableau de même taille.

const titres = recettes.map((recette) => recette.titre)
console.log(titres)  // ["Crêpes", "Ratatouille", "Salade"]

Le tableau d'origine n'est pas modifié.

filter : garder certains éléments

filter garde les éléments pour lesquels la fonction renvoie true.

const rapides = recettes.filter((recette) => recette.minutes <= 20)
console.log(rapides.length)  // 2

find : trouver un élément

find renvoie le premier élément qui correspond, ou undefined s'il n'y en a aucun.

const crepes = recettes.find((recette) => recette.id === 1)
console.log(crepes.titre)  // "Crêpes"

On les enchaîne : recettes.filter(...).map(...) garde les recettes rapides puis extrait leurs titres.

La déstructuration

La déstructuration extrait des valeurs d'un objet ou d'un tableau en une ligne.

const { titre, minutes } = recettes[0]
console.log(titre, minutes)  // "Crêpes" 20

const [premier, deuxieme] = ['farine', 'oeufs', 'lait']
console.log(premier, deuxieme)  // "farine" "oeufs"

Les noms entre accolades doivent correspondre aux propriétés. Pour un tableau, c'est la position qui compte. On la retrouve dans les paramètres :

const afficher = ({ titre, minutes }) => `${titre} (${minutes} min)`
console.log(afficher(recettes[0]))

Le spread

Les trois points ... étalent le contenu d'un tableau ou d'un objet dans un nouveau.

const base = ['farine', 'oeufs']
const complet = [...base, 'lait', 'sucre']

const crepes = { titre: 'Crêpes', minutes: 20 }
const crepesLongues = { ...crepes, minutes: 30 }

Le dernier exemple copie crepes en remplaçant minutes. L'objet d'origine reste intact : c'est la façon habituelle de « modifier » sans toucher à l'original.

Accéder sans planter

Lire une propriété d'une valeur undefined provoque une erreur. L'optional chaining ?. s'arrête et renvoie undefined à la place.

const recette = { titre: 'Crêpes' }

console.log(recette.auteur?.nom)         // undefined, sans erreur
console.log(recette.auteur?.nom ?? 'Anonyme')  // "Anonyme"

L'opérateur ?? donne une valeur de remplacement quand la partie gauche est null ou undefined.

Objets et JSON

Le JSON est un format texte qui ressemble aux objets JavaScript. Deux fonctions font la conversion.

const texte = JSON.stringify({ titre: 'Crêpes', minutes: 20 })
const objet = JSON.parse(texte)
console.log(objet.titre)  // "Crêpes"

C'est le format des données échangées avec un serveur, vu dans le dernier cours.

À retenir

• Un tableau est une liste indexée à partir de 0, un objet associe des noms à des valeurs.
• map transforme, filter sélectionne, find renvoie le premier élément qui correspond.
• La déstructuration extrait des valeurs : const { titre } = recette.
• Le spread ... copie un tableau ou un objet en le complétant ou en remplaçant des valeurs.
• ?. et ?? évitent les erreurs sur les valeurs absentes.
• JSON.stringify et JSON.parse convertissent entre objet et texte.