Tässä opetusohjelmassa opit JavaScript-levitysoperaattorista esimerkkien avulla.
Levitysoperaattori on uusi lisäys JavaScript ES6 -versiossa käytettävissä oleviin ominaisuuksiin .
Levitysoperaattori
Leviäminen operaattori … käytetään laajentaa tai levitä iterable tai jono. Esimerkiksi,
const arrValue = ('My', 'name', 'is', 'Jack'); console.log(arrValue); // ("My", "name", "is", "Jack") console.log(… arrValue); // My name is Jack
Tässä tapauksessa koodi:
console.log(… arrValue)
vastaa:
console.log('My', 'name', 'is', 'Jack');
Kopioi taulukko Spread Operatorilla
Voit myös levittää syntaksia … kopioidaksesi kohteet yhdeksi taulukoksi. Esimerkiksi,
const arr1 = ('one', 'two'); const arr2 = (… arr1, 'three', 'four', 'five'); console.log(arr2); // Output: // ("one", "two", "three", "four", "five")
Kloonaa matriisi Spread Operatorilla
JavaScriptissä objektit määritetään viitteiden eikä arvojen perusteella. Esimerkiksi,
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)
Tässä molemmat muuttujat arr1 ja arr2 viittaavat samaan ryhmään. Siksi yhden muuttujan muutos johtaa muutokseen molemmissa muuttujissa.
Jos kuitenkin haluat kopioida taulukot siten, että ne eivät viittaa samaan matriisiin, voit käyttää levitysoperaattoria. Näin yhden taulukon muutos ei heijastu toisessa. Esimerkiksi,
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)
Levitä operaattoria objektilla
Voit myös käyttää hajautusoperaattoria objekti-literaalien kanssa. Esimerkiksi,
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)
Tässä molemmat obj1ja obj2ominaisuudet lisätään obj3hajautusoperaattorin käyttöön.
Lepo-parametri
Kun hajautusoperaattoria käytetään parametrina, se tunnetaan loput parametrina.
Voit myös hyväksyä useita argumentteja funktiokutsussa käyttämällä loput-parametria. Esimerkiksi,
let func = function(… args) ( console.log(args); ) func(3); // (3) func(4, 5, 6); // (4, 5, 6)
Tässä,
- Kun
func()funktiolle välitetään yksi argumentti , loput parametri vie vain yhden parametrin. - Kun kolme argumenttia välitetään, loput parametri vie kaikki kolme parametria.
Huomautus : Rest-parametrin käyttäminen siirtää argumentit taulukkoelementteinä.
Voit myös välittää useita argumentteja funktiolle hajautusoperaattorin avulla. Esimerkiksi,
function sum(x, y ,z) ( console.log(x + y + z); ) const num1 = (1, 3, 4, 5); sum(… num1); // 8
Jos välität useita argumentteja hajautusoperaattorilla, funktio ottaa tarvittavat argumentit ja ohittaa loput.
Huomaa : Spread-operaattori otettiin käyttöön ES6: ssa . Jotkin selaimet eivät ehkä tue hajasyntaksin käyttöä. Lisätietoja on JavaScript-levitysoperaattorin tuessa.
