Object.keys(), Object.values(), Object.entries() & spread
Utilisez les flèches, cliquez ou glissez pour naviguer
1. Utiliser Object.keys()
Obtenir les clés d'un objet
2. Utiliser Object.values()
Obtenir les valeurs
3. Utiliser Object.entries()
Obtenir les paires clé-valeur
4. Copier et fusionner des objets
Object.assign() et le spread
5. Combiner avec les méthodes de tableau
map(), filter(), reduce() sur les objets
Le problème : comment itérer sur un objet ?
for...in a ses limites
Object.keys(), Object.values(), Object.entries()
Trois outils, trois retours
Combiner avec .map(), .filter(), .reduce()
La puissance des tableaux sur les objets
Copier et fusionner avec le spread
{ ...obj } et Object.assign()
Object.freeze() : rendre un objet immuable
Protéger ses données
Comment itérer proprement sur un objet ?
// Un objet simple
const utilisateur = {
nom: "Marie",
age: 28,
ville: "Paris"
};
Comment obtenir les clés ? Les valeurs ? Les deux ?
const utilisateur = { nom: "Marie", age: 28 };
for (let cle in utilisateur) {
console.log(cle);
// "nom", "age"
}
Problèmes avec for...in :
Tous retournent des TABLEAUX
Object.keys()
Les clés
Object.values()
Les valeurs
Object.entries()
Les paires
const utilisateur = {
nom: "Marie",
age: 28,
ville: "Paris"
};
const cles = Object.keys(utilisateur);
// ["nom", "age", "ville"]
Retourne un TABLEAU de clés
On peut utiliser .map(), .filter(), .reduce()...
const utilisateur = {
nom: "Marie",
age: 28,
ville: "Paris"
};
const valeurs = Object.values(utilisateur);
// ["Marie", 28, "Paris"]
Retourne un TABLEAU de valeurs
Utile pour calculer des sommes, trouver des max/min...
const utilisateur = {
nom: "Marie",
age: 28
};
const paires = Object.entries(utilisateur);
// [["nom", "Marie"], ["age", 28]]
Retourne un TABLEAU de TABLEAUX
Chaque élément est [clé, valeur]
const obj = { a: 1, b: 2, c: 3 };
Object.keys()
["a", "b", "c"]
Tableau de clés
Object.values()
[1, 2, 3]
Tableau de valeurs
Object.entries()
[["a",1], ["b",2], ["c",3]]
Tableau de paires
Ces méthodes retournent des TABLEAUX
On peut donc utiliser .map(), .filter(), .reduce()...
const produit = { nom: "Laptop", prix: 999 };
const clesMajuscules = Object.keys(produit)
.map(cle => cle.toUpperCase());
// ["NOM", "PRIX"]
Chaînage possible !
Object.keys(obj).map(...).filter(...)
const scores = { alice: 85, bob: 42, charlie: 90 };
const scoresHauts = Object.values(scores)
.filter(score => score >= 50);
// [85, 90]
Trouver les éléments qui respectent une condition
const panier = { pomme: 2, banane: 3, orange: 4 };
const total = Object.values(panier)
.reduce((acc, prix) => acc + prix, 0);
// 9
Somme, moyenne, max, min...
reduce() est ultra puissant sur les valeurs
Object.entries() + destructuring
La façon la plus élégante d'itérer
const utilisateur = { nom: "Marie", age: 28 };
for (const [cle, valeur] of Object.entries(utilisateur)) {
console.log(`${cle}: ${valeur}`);
}
// "nom: Marie"
// "age: 28"
for...of + destructuration [clé, valeur]
Accès direct aux DEUX en une seule ligne
Le spread operator sur les objets
{ ...obj }
const original = { a: 1, b: 2 };
const copie = { ...original };
// { a: 1, b: 2 }
// copie est un NOUVEL objet
Copie superficielle (shallow copy)
Les sous-objets ne sont PAS copiés en profondeur
const defauts = { theme: "dark", lang: "fr" };
const utilisateur = { lang: "en", nom: "Marie" };
const config = { ...defauts, ...utilisateur };
// { theme: "dark", lang: "en", nom: "Marie" }
Le dernier gagne !
Les propriétés du dernier objet écrasent les précédentes
Ordre A puis B
{ ...a, ...b }
B écrase A sur les conflits
Ordre B puis A
{ ...b, ...a }
A écrase B sur les conflits
Le dernier objet spreadé gagne toujours
const a = { x: 1 };
const b = { y: 2 };
const fusion = Object.assign({}, a, b);
// { x: 1, y: 2 }
Spread { ...obj }
Syntaxe moderne
Plus lisible
Object.assign()
Syntaxe classique
Mutation possible
Object.assign() mute le premier argument
const target = {};
Object.assign(target, a, b);
// target est modifié!
Spread ne mute jamais
const nouveau = { ...a, ...b };
// a et b inchangés
Préférez le spread pour éviter les effets de bord
Rendre un objet immuable
Protéger ses données contre les modifications
const config = { apiUrl: "https://api.example.com" };
Object.freeze(config);
config.apiUrl = "hacked";
// Erreur en mode strict!
// L'objet reste inchangé
L'objet ne peut plus être modifié
Ajout, suppression, modification = impossibles
const obj = {
nom: "Marie",
adresse: { ville: "Paris" }
};
Object.freeze(obj);
obj.adresse.ville = "Lyon";
// Ça fonctionne! Le sous-objet n'est PAS freeze
Les sous-objets restent modifiables !
Pour un freeze profond, il faut une fonction récursive
Les objets n'ont PAS de .length
obj.length // undefined
Object.keys(obj).length // correct
Confondre Object.keys et Object.values
Object.keys(obj) // ["nom", "age"]
Object.values(obj) // ["Marie", 28]
Object.freeze est superficiel
Les sous-objets restent modifiables
L'erreur
const obj = { a: 1, b: 2 };
obj.length;
// undefined
La solution
const obj = { a: 1, b: 2 };
Object.keys(obj).length;
// 2
Ces méthodes retournent des TABLEAUX
On peut donc chaîner avec map/filter/reduce
Object.entries() + destructuring = combo puissant
for (const [cle, valeur] of Object.entries(obj))
Le spread sur les objets : { ...obj }
Fonctionne comme sur les tableaux
Lors d'une fusion, le dernier objet gagne
Les propriétés sont écrasées
Object.keys()
["clé1", "clé2"]
Object.values()
[val1, val2]
Object.entries()
[["clé", val], ...]
{ ...obj }
Copier / Fusionner
Object.freeze() pour l'immuabilité
Attention : freeze superficiel!
1. Compter les propriétés d'un objet
Utiliser Object.keys().length
2. Calculer la somme des valeurs
Object.values() + reduce()
3. Filtrer les propriétés par valeur
Object.entries() + filter() + Object.fromEntries()
4. Fusionner des configurations
Spread operator avec priorité
Object.keys/values/entries retournent des TABLEAUX
entries() + destructuring = combo gagnante
{ ...obj } pour copier et fusionner
Le dernier spreadé gagne en cas de conflit!
Maîtrisez les objets, maîtrisez JavaScript
Prochaine leçon : Les prototypes et l'héritage