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 steine = ["Bernstein", "Rubin", "Smaragd", "Saphir"];
const minerale = ["Diamant", "Malachit", "Korund"];

const schmuck = ["Perlen", "Perlmut", "Korallen", "Jade", steine, minerale];
console.log (schmuck);

Auf diese Weise herkömmlich eingesetzt würde das Array in der Console als Array mit Sub-Arrays angezeigt werden und die Anzahl der Elemente des Arrays schmuck ist 6.

[	"Perlen", 
	"Perlmut", 
	"Korallen", 
	"Jade", 
	["Bernstein", "Rubin", "Smaragd", "Saphir"], 
	["Diamant", "Malachit", "Korund"]
]

Mit den drei Spread-Punkten vor steine und minerale werden die Array-Elemente in zu Array-Elementen von schmuck übertragen und die Zahl der Array-Element ist jetzt 11.

["Perlen", "Perlmut", "Korallen", "Jade", "Bernstein", "Rubin", "Smaragd", "Saphir", "Diamant", "Malachit", "Korund"]
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)
]