Levitelyöntioperaattori, jota merkitään ..., on hyödyllinen työkalu uusien olioiden luomiseen yhdistämällä ja kopioimalla ominaisuuksia olemassa olevista olioista. Levitelyöntioperaattorin avulla voidaan suorittaa seuraavat tehtävät:

• Kloonata olioita;
• Lisätä tai muokata ominaisuuksia;
• Luoda uusia olioita.

Tarkastellaan, miten levitelyöntioperaattoria käytetään olioiden kanssa.

Levitelyöntioperaattori

Kun levitelyöntioperaattoria käytetään olioiden kanssa, se kopioi kaikki enumeroitavat ominaisuudet lähdeoliosta uuteen olioon.

Perussyntaksi:

const newObject = { ...sourceObject }; 

• newObject: uusi olio, jonka haluamme luoda;
• sourceObject: lähdeolio, jonka ominaisuudet haluamme kopioida.

Olion kloonaaminen

Levitelyöntioperaattorin avulla voidaan luoda olion matala klooni. Tämä on hyödyllistä, kun halutaan säilyttää alkuperäinen olio ja työskennellä muokatun kopion kanssa.

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'}

Tässä esimerkissä clonedObject on uusi objekti, joka on kopio originalObject:sta. Kaikki muutokset, jotka tehdään clonedObject:iin, eivät vaikuta originalObject:iin. Siksi clonedObject:lla on kolme ominaisuutta ja originalObject:lla vain kaksi.

Ominaisuuksien lisääminen tai muokkaaminen

Voit myös käyttää spread-operaattoria luodaksesi uuden objektin, jossa on lisättyjä tai muokattuja ominaisuuksia.

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'}

Tässä esimerkissä extendedWaterBottle luodaan levittämällä waterBottle:n ominaisuudet. Lisäksi color-ominaisuus lisätään ja capacity-ominaisuus korvataan.

Objektien yhdistäminen

Spread-operaattorilla voidaan yhdistää kaksi tai useampia objekteja yhdeksi. Tämä on hyödyllistä, kun halutaan yhdistää ominaisuuksia, asetuksia, konfiguraatioita tai tietoja eri lähteistä.

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'}

Tässä esimerkissä apartment luodaan yhdistämällä apartmentFeatures- ja apartmentDetails-objektien ominaisuudet.