Clonagem e Mesclagem de Objetos com o Operador Spread
O operador spread, representado por ..., é uma ferramenta útil para criar novos objetos ao mesclar e copiar propriedades de objetos existentes. Com o operador spread, é possível realizar as seguintes tarefas:
- Clonagem de objetos;
- Adição ou modificação de propriedades;
- Criação de novos objetos.
A seguir, será abordado como utilizar o operador spread com objetos.
Operador Spread
Quando utilizado com objetos, o operador spread copia todas as propriedades enumeráveis do objeto de origem para um novo objeto.
Sintaxe básica:
const newObject = { ...sourceObject };
newObject: novo objeto a ser criado;sourceObject: objeto de origem cujas propriedades serão copiadas.
Clonagem de um Objeto
O operador spread permite criar uma cópia superficial (shallow clone) de um objeto. Isso é útil quando se deseja preservar o objeto original e trabalhar com uma cópia modificada.
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'}
Neste exemplo, clonedObject é um novo objeto que é um clone de originalObject. Quaisquer alterações feitas em clonedObject não afetarão originalObject. Por isso, clonedObject possui três propriedades e originalObject possui apenas duas.
Adicionando ou Modificando Propriedades
Também é possível utilizar o operador spread para criar um novo objeto com propriedades adicionais ou modificadas.
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'}
Neste exemplo, extendedWaterBottle é criado espalhando as propriedades de waterBottle. Além disso, a propriedade color é adicionada e a propriedade capacity é sobrescrita.
Mesclando Objetos
O operador spread pode mesclar dois ou mais objetos em um só. Isso é útil ao combinar funcionalidades, configurações, parâmetros ou dados de diferentes fontes.
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'}
Neste exemplo, apartment é criado ao mesclar as propriedades de apartmentFeatures e apartmentDetails.
1. Qual é o propósito do operador spread (...)?
2. Qual é a sintaxe para utilizar o operador spread e criar um novo objeto copiando as propriedades de um objeto existente?
3. No exemplo fornecido abaixo sobre mesclagem de objetos, qual é o conteúdo do objeto resultObj após utilizar o operador spread?
Obrigado pelo seu feedback!
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
Incrível!
Completion taxa melhorada para 2.27
Clonagem e Mesclagem de Objetos com o Operador Spread
Deslize para mostrar o menu
O operador spread, representado por ..., é uma ferramenta útil para criar novos objetos ao mesclar e copiar propriedades de objetos existentes. Com o operador spread, é possível realizar as seguintes tarefas:
- Clonagem de objetos;
- Adição ou modificação de propriedades;
- Criação de novos objetos.
A seguir, será abordado como utilizar o operador spread com objetos.
Operador Spread
Quando utilizado com objetos, o operador spread copia todas as propriedades enumeráveis do objeto de origem para um novo objeto.
Sintaxe básica:
const newObject = { ...sourceObject };
newObject: novo objeto a ser criado;sourceObject: objeto de origem cujas propriedades serão copiadas.
Clonagem de um Objeto
O operador spread permite criar uma cópia superficial (shallow clone) de um objeto. Isso é útil quando se deseja preservar o objeto original e trabalhar com uma cópia modificada.
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'}
Neste exemplo, clonedObject é um novo objeto que é um clone de originalObject. Quaisquer alterações feitas em clonedObject não afetarão originalObject. Por isso, clonedObject possui três propriedades e originalObject possui apenas duas.
Adicionando ou Modificando Propriedades
Também é possível utilizar o operador spread para criar um novo objeto com propriedades adicionais ou modificadas.
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'}
Neste exemplo, extendedWaterBottle é criado espalhando as propriedades de waterBottle. Além disso, a propriedade color é adicionada e a propriedade capacity é sobrescrita.
Mesclando Objetos
O operador spread pode mesclar dois ou mais objetos em um só. Isso é útil ao combinar funcionalidades, configurações, parâmetros ou dados de diferentes fontes.
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'}
Neste exemplo, apartment é criado ao mesclar as propriedades de apartmentFeatures e apartmentDetails.
1. Qual é o propósito do operador spread (...)?
2. Qual é a sintaxe para utilizar o operador spread e criar um novo objeto copiando as propriedades de um objeto existente?
3. No exemplo fornecido abaixo sobre mesclagem de objetos, qual é o conteúdo do objeto resultObj após utilizar o operador spread?
Obrigado pelo seu feedback!