Javascript Spread - Operator

Zwei oder mehr Objekte / Arrays vereinen oder kombinieren

Der spread-Operator kombiniert zwei Objekte zu einem neuen Objekt oder auch Arrays mit den Eigenschaften beider Objekte bzw. Arrays.

18-12-15 SITEMAP

spread Objects

const image = {
   filename: "paris.jpg",
   width: 4000, 
   height: 3000,
   path: "/assets/cities/"
};

const keywords = {
   title : "Paris am Morgen",
   tags : "Straßenfotografie, Frühling, Brücke"
};

const imageWithBag = {
 ...image,
 ...keywords
};

document.querySelector(".result").innerHTML = JSON.stringify(imageWithBag, null, 2);
	


			JSON.stringify () wandelt das resultierende Object in einen String für die Ausgabe um. Der dritte (optionale) Parameter sorgt für ein lesefreundliches Einrücken.

Nur ausgewählte Eigenschaften mit spread übernehmen

Der spread-Operator muss nicht immer alle Elemente der Objekte übernehmen.

const littleBag = {
   title: keywords.title,
   ...image
};


			

Haben die beiden Objekte allerding gemeinsame Eigenschaften, überschreibt die zuletzt aufgeführte Eigenschaft die erste. Das wiederum kann man ausnutzen, um Eigenschaften zu überschreiben.


const update = {
   title: "Frühling in Paris"
};

const imageUpdate = {
   ...update,
   ...image
}
document.querySelector(".update").innerHTML = JSON.stringify (imageUpdate, "", 4);

spread-Operator und Arrays

array.push() setzt ein neues Element in ein Array. push ist destruktiv – verändert das Original-Array – und das ist meist nicht erwünscht.

const nums = [118, 744, 599, 200];
const newNums = [
   ...nums,
   1024
];

	
		

Das neue Array enthält alle Elemente des alten Arrays und zusätzlich das neue Element. Tauschen wir ...nums und das neue Element 1024, wird das neue Element am Anfang des Arrays eingesetzt.

Genauso wie push verändert splice das Original-Array beim Einfügen eines neuen Elements. Ein spread hingegen legt ein neues Array mit dem eingefügten Element an.

const insert = (arr, index, newItem) => [
   ...arr.slice (0, index),
   newItem,
   ...arr.slice (index)
]

const result = insert (newNums, 4, 10);
console.log (insert);
(arr, index, newItem) => [
   ...arr.slice (0, index),
   newItem,
   ...arr.slice (index)
]