Clonage et Fusion d'Objets avec l'Opérateur Spread
L'opérateur de propagation, noté ...
, est un outil utile pour créer de nouveaux objets en fusionnant et en copiant les propriétés d'objets existants. Avec l'opérateur de propagation, il est possible d'effectuer les opérations suivantes :
- Clonage d'objets ;
- Ajout ou modification de propriétés ;
- Création de nouveaux objets.
Examinons comment utiliser l'opérateur de propagation avec les objets.
Opérateur de propagation
L'opérateur de propagation (...
) peut être utilisé dans divers contextes, mais l'un de ses usages les plus courants consiste à créer de nouveaux objets en étalant les propriétés d'objets existants.
Voici la syntaxe de base de l'opérateur de propagation utilisé pour la création d'objets :
const newObject = { ...sourceObject };
newObject
: Le nouvel objet à créer ;sourceObject
: L'objet source dont on souhaite copier les propriétés.
Clonage d’un objet
Examinons comment cloner un objet. Nous allons créer un nouvel objet avec les mêmes propriétés et valeurs que l’objet source. Toute modification apportée au nouvel objet n’affecte pas l’objet d’origine.
const originalObject = {
name: "Diamond Kite",
color: "purple",
};
// Create a cloned object by spreading the original object
const clonedObject = { ...originalObject }; // Cloning with the help of the spread operator
// Add a new property to the cloned object
clonedObject.size = "large"; // Adding a new property to the cloned object
console.log(originalObject); // Output: {name: 'Diamond Kite', color: 'purple'}
console.log(clonedObject); // Output: {name: 'Diamond Kite', color: 'purple', size: 'large'}
Dans cet exemple, clonedObject
est un nouvel objet qui est un clone de originalObject
. Toute modification apportée à clonedObject
n’affectera pas originalObject
. Ainsi, clonedObject
possède trois propriétés tandis que originalObject
n’en possède que deux.
Ajout ou modification de propriétés
L’opérateur de propagation est également utile pour ajouter ou modifier des propriétés dans un nouvel objet. Il est possible d’inclure des propriétés supplémentaires ou d’écraser celles existantes dans le nouvel objet.
const waterBottle = {
brand: "HydroFlask",
capacity: 32,
};
const extendedWaterBottle = {
...waterBottle,
color: "blue",
capacity: 24,
};
console.log(waterBottle); // Output: {brand: 'HydroFlask', capacity: 32}
console.log(extendedWaterBottle); // Output: {brand: 'HydroFlask', capacity: 24, color: 'blue'}
Dans cet exemple, extendedWaterBottle
est créé en étendant les propriétés de waterBottle
. De plus, la propriété color
est ajoutée et la propriété capacity
est remplacée.
Fusion d’objets
L’opérateur de propagation peut être utilisé pour fusionner les propriétés de plusieurs objets dans un nouvel objet unique. Ceci est particulièrement utile lorsque plusieurs sources de données doivent être combinées.
const apartmentFeatures = {
size: "1200 square feet",
bedrooms: 2,
bathrooms: 2,
};
const apartmentDetails = {
rent: 2000,
location: "Downtown City",
};
const apartment = { ...apartmentFeatures, ...apartmentDetails };
console.log(apartment); // Output: {size: '1200 square feet', bedrooms: 2, bathrooms: 2, rent: 2000, location: 'Downtown City'}
Dans cet exemple, apartment
est créé en fusionnant les propriétés de apartmentFeatures
et apartmentDetails
.
1. Quel est le but de l'opérateur de propagation (...
) ?
2. Quelle est la syntaxe pour utiliser l'opérateur de propagation afin de créer un nouvel objet en copiant les propriétés d'un objet existant ?
3. Dans l'exemple ci-dessous de fusion d'objets, que contient l'objet resultObj
après utilisation de l'opérateur de propagation ?
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
Can you explain how the spread operator works with arrays?
What happens if two objects have properties with the same name when merging?
Are there any limitations or caveats when using the spread operator with objects?
Awesome!
Completion rate improved to 2.27
Clonage et Fusion d'Objets avec l'Opérateur Spread
Glissez pour afficher le menu
L'opérateur de propagation, noté ...
, est un outil utile pour créer de nouveaux objets en fusionnant et en copiant les propriétés d'objets existants. Avec l'opérateur de propagation, il est possible d'effectuer les opérations suivantes :
- Clonage d'objets ;
- Ajout ou modification de propriétés ;
- Création de nouveaux objets.
Examinons comment utiliser l'opérateur de propagation avec les objets.
Opérateur de propagation
L'opérateur de propagation (...
) peut être utilisé dans divers contextes, mais l'un de ses usages les plus courants consiste à créer de nouveaux objets en étalant les propriétés d'objets existants.
Voici la syntaxe de base de l'opérateur de propagation utilisé pour la création d'objets :
const newObject = { ...sourceObject };
newObject
: Le nouvel objet à créer ;sourceObject
: L'objet source dont on souhaite copier les propriétés.
Clonage d’un objet
Examinons comment cloner un objet. Nous allons créer un nouvel objet avec les mêmes propriétés et valeurs que l’objet source. Toute modification apportée au nouvel objet n’affecte pas l’objet d’origine.
const originalObject = {
name: "Diamond Kite",
color: "purple",
};
// Create a cloned object by spreading the original object
const clonedObject = { ...originalObject }; // Cloning with the help of the spread operator
// Add a new property to the cloned object
clonedObject.size = "large"; // Adding a new property to the cloned object
console.log(originalObject); // Output: {name: 'Diamond Kite', color: 'purple'}
console.log(clonedObject); // Output: {name: 'Diamond Kite', color: 'purple', size: 'large'}
Dans cet exemple, clonedObject
est un nouvel objet qui est un clone de originalObject
. Toute modification apportée à clonedObject
n’affectera pas originalObject
. Ainsi, clonedObject
possède trois propriétés tandis que originalObject
n’en possède que deux.
Ajout ou modification de propriétés
L’opérateur de propagation est également utile pour ajouter ou modifier des propriétés dans un nouvel objet. Il est possible d’inclure des propriétés supplémentaires ou d’écraser celles existantes dans le nouvel objet.
const waterBottle = {
brand: "HydroFlask",
capacity: 32,
};
const extendedWaterBottle = {
...waterBottle,
color: "blue",
capacity: 24,
};
console.log(waterBottle); // Output: {brand: 'HydroFlask', capacity: 32}
console.log(extendedWaterBottle); // Output: {brand: 'HydroFlask', capacity: 24, color: 'blue'}
Dans cet exemple, extendedWaterBottle
est créé en étendant les propriétés de waterBottle
. De plus, la propriété color
est ajoutée et la propriété capacity
est remplacée.
Fusion d’objets
L’opérateur de propagation peut être utilisé pour fusionner les propriétés de plusieurs objets dans un nouvel objet unique. Ceci est particulièrement utile lorsque plusieurs sources de données doivent être combinées.
const apartmentFeatures = {
size: "1200 square feet",
bedrooms: 2,
bathrooms: 2,
};
const apartmentDetails = {
rent: 2000,
location: "Downtown City",
};
const apartment = { ...apartmentFeatures, ...apartmentDetails };
console.log(apartment); // Output: {size: '1200 square feet', bedrooms: 2, bathrooms: 2, rent: 2000, location: 'Downtown City'}
Dans cet exemple, apartment
est créé en fusionnant les propriétés de apartmentFeatures
et apartmentDetails
.
1. Quel est le but de l'opérateur de propagation (...
) ?
2. Quelle est la syntaxe pour utiliser l'opérateur de propagation afin de créer un nouvel objet en copiant les propriétés d'un objet existant ?
3. Dans l'exemple ci-dessous de fusion d'objets, que contient l'objet resultObj
après utilisation de l'opérateur de propagation ?
Merci pour vos commentaires !