A JavaScript Spread Operator (...) lehetővé teszi egy tömb vagy objektum elemeinek, illetve függvények paramétereinek egyszerűbb kezelését. Használható tömbök összefűzésére, tömbhöz új elemek hozzáadására, másolásra, objektumok egyesítésére, függvények paraméterének megadásához stb.
Nézzünk néhány példát:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
const tomb_szamok = [1, 2, 3]; const uj_tomb = [5, 6, ...tomb_szamok]; console.log("Új tömb elemei:", uj_tomb); // [5, 6, 1, 2, 3] //Tömbök egyesítése (Combining Arrays) const tomb_1 = [1, 2, 3]; const tomb_2 = [4, 5, 6]; const tomb_kombinalva = [...tomb_1, ...tomb_2]; console.log("Egyesített tömb:", tomb_kombinalva); // [1, 2, 3, 4, 5, 6] //Paraméter átadás (Passing Arguments to Functions) function sum(a, b, c) { return a + b + c; } const tomb_szamok_II = [1, 2, 3]; const osszeg = sum(...tomb_szamok_II); console.log("Számok összege:", osszeg); // 6 //Tömb másoláda (Copying Arrays) Ebben az esetben új memória címre kerül! Ha csak simán masoat_tomb=eredeti_tomb akkor a kettő memóra címe megegyezik! const eredeti_tomb = [1, 2, 3]; const masolat_tomb = [...eredeti_tomb]; console.log("Másolat elemei:", masolat_tomb); // [1, 2, 3] //Maradék elemek kezelése (The Rest Operator) const [elso, ...maradek] = [1, 2, 3, 4, 5]; console.log("Tömb első eleme:", elso); // 1 console.log("Maradék elemek:", maradek); // [2, 3, 4, 5] //Változó hosszúságú függvény paraméter (Handling Variable-Length Function Arguments) function Osszegzes(...szamok) { return szamok.reduce((osszeg, szam) => osszeg +szam, 0); } console.log("Összeg:", Osszegzes(1, 2, 3, 4, 5)); // Összeg: 15 console.log("Összeg:", Osszegzes(10, 20)); // Összeg: 30 //Tömb kibontása (Array Destructuring) const [elsoElem, masodikElem, ...maradekElem] = [1, 2, 3, 4, 5]; console.log("Első elem:", elsoElem); // Első elem: 1 console.log("Második elem:", masodikElem); // Második elem: 2 console.log("Maradék elemek:", maradekElem); // Maradék elemek: [3, 4, 5] //Objektumok egyesítése const obj1 = { nev: "Péter" }; const obj2 = { kor: 42 }; const obj3 = { ...obj1, ...obj2 }; console.log(obj3); // { név: 'Péter', kor: 42 } //Objektum másolása és módosítása const felh = { nev: "Imre", kor: 30 }; const felhMod = { ...felh, kor: 31 }; console.log(felhMod); // { név: 'Imre', kor: 31 } console.log(felh === felhMod); // false //objektum értékének módosítása const alapTema = { tema: "light", oldalSav: true }; const felhTema = { tema: "dark" }; const beallitas = { ...alapTema, ...felhTema }; console.log(beallitas); // { tema 'dark', oldalsáv: true } |