Javascript Spread – drei Punkte

spread Objects

Iterierbar ist alles, was einen Index hat bzw. sequentiell – Schritt für Schritt – durchlaufen werden kann. Dazu gehören neben Arrays, Sets, Maps und Strings auch NodeLists und HTML-Collections, wie sie von querySelectorAll und getElementsByName gesammelt werden. Objekte haben keinen sequentiellen Index wie Arrays, aber sie können durchlaufen werden (z.B. mit for in).

Ein Array kann einer Javascript-Funktion nicht anstelle von einzelnen Argumenten übergeben werden.

let args = [17,4];
function sum (a, b) {
	return a + b;
}
sum (args); // undefined

console.log (sum (...args)); // 17

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);

Was kann spread?

• Arrays kopieren und Arrays aneinander hängen (wie array.concat).
• Ein Element zu einer Liste hinzufügen
• Objekte miteinander kombinieren
• NodeLists in Arrays umwandeln

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)
]