Ebben az oktatóanyagban példák segítségével megismerheti a JavaScript terjedési operátorát.
A spread operátor új kiegészítés a JavaScript ES6 verzióban elérhető szolgáltatásokhoz .
Spread Operator
A spread operátor … egy iterálható vagy egy tömb kibővítésére vagy elterjesztésére szolgál. Például,
const arrValue = ('My', 'name', 'is', 'Jack'); console.log(arrValue); // ("My", "name", "is", "Jack") console.log(… arrValue); // My name is Jack
Ebben az esetben a kód:
console.log(… arrValue)
egyenértékű:
console.log('My', 'name', 'is', 'Jack');
Tömb másolása a Spread Operator használatával
Használhatja a terjedési szintaxist is, … hogy az elemeket egyetlen tömbbe másolja. Például,
const arr1 = ('one', 'two'); const arr2 = (… arr1, 'three', 'four', 'five'); console.log(arr2); // Output: // ("one", "two", "three", "four", "five")
Klón tömb a Spread Operator használatával
A JavaScript-ben az objektumokat hivatkozás, és nem értékek alapján rendeljük hozzá. Például,
let arr1 = ( 1, 2, 3); let arr2 = arr1; console.log(arr1); // (1, 2, 3) console.log(arr2); // (1, 2, 3) // append an item to the array arr1.push(4); console.log(arr1); // (1, 2, 3, 4) console.log(arr2); // (1, 2, 3, 4)
Itt az arr1 és az arr2 változó ugyanarra a tömbre utal. Ezért az egy változó változása mindkét változó változását eredményezi.
Ha azonban a tömböket úgy akarja lemásolni, hogy azok ne ugyanarra a tömbre utaljanak, használhatja a spread operátort. Így az egyik tömb változása nem tükröződik a másikban. Például,
let arr1 = ( 1, 2, 3); // copy using spread syntax let arr2 = (… arr1); console.log(arr1); // (1, 2, 3) console.log(arr2); // (1, 2, 3) // append an item to the array arr1.push(4); console.log(arr1); // (1, 2, 3, 4) console.log(arr2); // (1, 2, 3)
Terjessze az operátort objektummal
Objektum literálokkal is használhatja a spread operátort. Például,
const obj1 = ( x : 1, y : 2 ); const obj2 = ( z : 3 ); // add members obj1 and obj2 to obj3 const obj3 = (… obj1,… obj2); console.log(obj3); // (x: 1, y: 2, z: 3)
Ekkor a két obj1és obj2tulajdonságokat adunk obj3a spread operátor.
Pihenési paraméter
Ha a spread operátort paraméterként használják, akkor a többi paraméterként ismerik.
Több argumentumot is elfogadhat egy függvényhívásban a többi paraméter használatával. Például,
let func = function(… args) ( console.log(args); ) func(3); // (3) func(4, 5, 6); // (4, 5, 6)
Itt,
- Ha egyetlen argumentumot továbbítanak a
func()függvénynek, a többi paraméter csak egy paramétert vesz fel. - Három argumentum átadásakor a többi paraméter mindhárom paramétert felveszi.
Megjegyzés : A rest paraméter használata tömb elemként adja át az argumentumokat.
Több argumentumot is átadhat egy függvénynek a spread operátor segítségével. Például,
function sum(x, y ,z) ( console.log(x + y + z); ) const num1 = (1, 3, 4, 5); sum(… num1); // 8
Ha több argumentumot ad át a spread operátorral, a függvény elveszi a szükséges argumentumokat, a többit pedig figyelmen kívül hagyja.
Megjegyzés : A Spread operátort az ES6- ban vezették be . Egyes böngészők nem támogatják a terjedési szintaxis használatát. További információkért keresse fel a JavaScript Spread Operator támogatást.
