Spread i rest
Spread syntax
Spread syntax, to nowy zapis, który umożliwia rozbijanie iterowanej wartości na składowe.
Może nią być string (bo składa się z poszczególnych liter),
może to być tablica (bo składa się z elementów), mogą to być kolekcje (po których bardzo często robiliśmy pętle for) czy nawet obiekty (po których robiliśmy pętle for in), a nawet pojedyncze obiekty.
Poniżej kilka przykładów użycia tego zapisu:
//rozbijanie tablicy na poszczególne liczby
const tab = [1, 2, 3, 4];
console.log(...tab); //1, 2, 3, 4
//kopiowanie tablicy
const tab2 = [...tab];
//łączenie tablic
const tabPart = [3, 4]
const tabFull = [1, 2, ...tabPart, 5, 6]; //[1, 2, 3, 4, 5, 6]
//rozdzielanie tekstu na poszczególne litery
const str = "Ala ma kota";
const tab = [...str]; //["A", "l", "a", " ", "m", "a", " ", "k", "o", "t", "a"]
//Math.max wymaga parametrów po przecinku (nie jako tablica), więc mogę tutaj zastosować spread:
const tab = [1, 2, 3, 5, 4];
Math.max(...tab); //5
Spread mogę też wykorzystać do zamiany kolekcji elementów na tablicę, dzięki czemu mogę używać dla nich metod tablicowych:
const divs = document.querySelectorAll("div");
//nowa tablica z samymi tekstami z divów
const texts = [...divs].map(el => el.innerText);
W nowej wersji JavaScript spread możemy też zastosować dla obiektów:
const ob1 = {
a : 10,
b : 20
}
const ob2 = {
a : 15,
c : 30
}
const obBig = {
...ob1,
...ob2,
d: 40
};
console.log(obBig); //{ a : 15, b : 20, c : 30, d : 40 }
Rest parameter
Identycznie jak spread syntax wygląda rest parameter, różnicą jest miejsce użycia - w tym przypadku jako parametr funkcji.
Zapis ten umożliwia zbieranie w jedną zmienną (będącą tablicą) wielu parametrów
przekazywanych do funkcji:
function myF(...param) {
console.log(param); //[1, 2, 3, 4, 5]
}
myF(1,2,3,4,5);
function myF(...param) {
const newTab = [...param];
newTab.push("Ala");
console.log(param, newTab); //[1,2,3], [1,2,3,"Ala"]
}
myF(1,2,3);
Rest operator możemy też wykorzystywać do pobierania w formie tablicy "pozostałych" wartości:
function printAbout(name = "Ala", ...other) {
console.log("To jest " + name);
if (other.length) {
console.log(`${name} ma zwierzaki: ${other.join()}`);
}
}
printAbout("Marcin", "pies", "kot"); //To jest Marcin. Marcin ma zwierzaki: pies,kot
printAbout(); //To jest Ala
Pamiętaj, że rest musi występować jako ostatni w parametrach:
function myF(a, b, ...numbers) {
}
function myF(a, ...numbers, b) { //błąd : Rest parameter must be last formal parameter
}
Trening czyni mistrza
Jeżeli chcesz sobie potrenować zdobytą wiedzę, zadania znajdują się w repozytorium pod adresem: https://github.com/kartofelek007/zadania