I denna handledning lär du dig om JavaScript-spridningsoperatören med hjälp av exempel.
Spread-operatören är ett nytt tillskott till funktionerna som finns i JavaScript ES6- versionen.
Sprid operatör
Spridningsoperatören … används för att expandera eller sprida en iterabel eller en array. Till exempel,
const arrValue = ('My', 'name', 'is', 'Jack'); console.log(arrValue); // ("My", "name", "is", "Jack") console.log(… arrValue); // My name is Jack
I det här fallet är koden:
console.log(… arrValue)
är ekvivalent med:
console.log('My', 'name', 'is', 'Jack');
Kopiera matris med Spread Operator
Du kan också använda spridningssyntaxen för … att kopiera objekten till en enda matris. Till exempel,
const arr1 = ('one', 'two'); const arr2 = (… arr1, 'three', 'four', 'five'); console.log(arr2); // Output: // ("one", "two", "three", "four", "five")
Klonarray med Spread Operator
I JavaScript tilldelas objekt med referens och inte med värden. Till exempel,
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)
Här hänvisar båda variablerna arr1 och arr2 till samma array. Följaktligen resulterar förändringen i en variabel i förändringen i båda variablerna.
Men om du vill kopiera matriser så att de inte hänvisar till samma matris kan du använda spridningsoperatören. På detta sätt återspeglas inte förändringen i en matris i den andra. Till exempel,
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)
Sprid operatör med objekt
Du kan också använda spridningsoperatören med objektbokstäver. Till exempel,
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)
Här läggs både obj1och obj2egenskaper till för att obj3använda spridningsoperatören.
Viloparameter
När spridningsoperatören används som parameter kallas den för viloparametern.
Du kan också acceptera flera argument i ett funktionsanrop med hjälp av restparametern. Till exempel,
let func = function(… args) ( console.log(args); ) func(3); // (3) func(4, 5, 6); // (4, 5, 6)
Här,
- När ett enda argument skickas till
func()funktionen tar resten-parametern bara en parameter. - När tre argument skickas tar resten-parametern alla tre parametrar.
Obs! Med hjälp av resten-parametern skickas argumenten som arrayelement.
Du kan också skicka flera argument till en funktion med hjälp av spridningsoperatören. Till exempel,
function sum(x, y ,z) ( console.log(x + y + z); ) const num1 = (1, 3, 4, 5); sum(… num1); // 8
Om du skickar flera argument med hjälp av spridningsoperatorn tar funktionen nödvändiga argument och ignorerar resten.
Obs! Spreadoperatören introducerades i ES6 . Vissa webbläsare stöder kanske inte användningen av spridningssyntax. Besök JavaScript Spread Operator support för att lära dig mer.
