Itérations d'objets JavaScript
Méthodes générales
// Copie les propriétés d'un objet source vers un objet cible
Object.assign(target, source)
// Crée un objet à partir d'un objet existant
Object.create(object)
// Renvoie un tableau des paires clé/valeur d'un objet
Object.entries(object)
// Crée un objet à partir d'une liste de clés/valeurs
Object.fromEntries()
// Renvoie un tableau des clés d'un objet
Object.keys(object)
// Renvoie un tableau des valeurs des propriétés d'un objet
Object.values(object)
// Regroupe les éléments d'un objet selon une fonction
Object.groupBy(object, callback)
JavaScript Object.assign()
La méthode Object.assign() copie les propriétés d'un ou plusieurs objets source vers un objet cible.
Exemple
// Créer un objet cible
const person1 = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
// Créer un objet source
const person2 = {firstName: "Anne", lastName: "Smith"};
// Assigner la source à la cible
Object.assign(person1, person2); JavaScript Object.entries()
ECMAScript 2017 a ajouté la méthode Object.entries() aux objets.
Object.entries() renvoie un tableau des paires clé/valeur d'un objet :
Exemple
const person = {
firstName : "John",
lastName : "Doe",
age : 50,
eyeColor : "blue"
};
let text = Object.entries(person); Object.entries() facilite l'utilisation des objets dans les boucles :
Exemple
const fruits = {Bananas:300, Oranges:200, Apples:500};
let text = "";
for (let [fruit, value] of Object.entries(fruits)) {
text += fruit + ": " + value + "<br>";
} Object.entries() facilite également la conversion des objets en cartes :
Exemple
const fruits = {Bananas:300, Oranges:200, Apples:500};
const myMap = new Map(Object.entries(fruits)); Object.entries() est pris en charge dans tous les navigateurs modernes depuis mars 2017 :
JavaScript Object.fromEntries()
La méthode fromEntries() crée un objet à partir d'une liste de paires clé/valeur.
Exemple
const fruits = [
["apples", 300],
["pears", 900],
["bananas", 500]
];
const myObj = Object.fromEntries(fruits); JavaScript Object.values()
Object.values() est similaire à Object.entries() , mais renvoie un tableau unidimensionnel des valeurs de l'objet :
Exemple
const person = {
firstName : "John",
lastName : "Doe",
age : 50,
eyeColor : "blue"
};
let text = Object.values(person); Object.values() est pris en charge dans tous les navigateurs modernes depuis mars 2017 :
JavaScript Object.groupBy()
ES2024 a ajouté la méthode Object.groupBy() à JavaScript.
La méthode Object.groupBy() regroupe les éléments d'un objet selon des valeurs de chaîne renvoyées par une fonction de rappel.
La méthode Object.groupBy() ne modifie pas l'objet d'origine.
Exemple
// Créer un tableau
const fruits = [
{name:"apples", quantity:300},
{name:"bananas", quantity:500},
{name:"oranges", quantity:200},
{name:"kiwi", quantity:150}
];
// Fonction de rappel pour regrouper les éléments
function myCallback({ quantity }) {
return quantity > 200 ? "ok" : "low";
}
// Regrouper par quantité
const result = Object.groupBy(fruits, myCallback);
Support des navigateurs
Object.groupby() est une fonctionnalité d'ES2024.
JavaScript 2024 est pris en charge dans les nouveaux navigateurs depuis mars 2024 :
| Chrome 117 | Edge 117 | Firefox 119 | Safari 17.4 | Opera 103 |
| Sep 2023 | Sep 2023 | Oct 2023 | Okt 2024 | May 2023 |
Avertissement
Les fonctionnalités d'ES2024 sont relativement nouvelles.
Les anciens navigateurs peuvent nécessiter un code alternatif (Polyfill)
Object.groupBy() vs Map.groupBy()
La différence entre Object.groupBy() et Map.groupBy() est :
Object.groupBy() regroupe les éléments dans un objet JavaScript.
Map.groupBy() regroupe les éléments dans un objet Map.
JavaScript Object.keys()
La méthode Object.keys() renvoie un tableau contenant les clés d'un objet.
Exemple
// Créer un objet
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
// Obtenir les clés
const keys = Object.keys(person); Boucle JavaScript for...in
L'instruction JavaScript for...in parcourt les propriétés d'un objet.
Syntaxe
for (let variable in object ) {
// code à exécuter
} Le bloc de code à l'intérieur de la boucle for...in sera exécuté une fois pour chaque propriété.
Parcourir les propriétés d'un objet :
Exemple
const person = {
fname:" John",
lname:" Doe",
age: 25
};
for (let x in person) {
txt += person[x];
} En savoir plus :
Définitions d'objets JavaScript
Constructeurs d'objets JavaScript
Déstructuration d'objets JavaScript
Prototypes d'objets JavaScript
Itérations d'objets JavaScript
Getters & Setters d'objets JavaScript