本文實例講述了ES6擴(kuò)展運算符和rest運算符用法。分享給大家供大家參考，具體如下：

運算符可以很好的為我們解決參數(shù)和對象數(shù)組未知情況下的編程，讓我們的代碼更健壯和簡潔。

運算符有兩種：對象擴(kuò)展運算符與rest運算符。

1.對象擴(kuò)展（ spread）運算符（...）

（1）解決參數(shù)個數(shù)問題

以前我們編程是傳遞的參數(shù)一般是確定，否則將會報錯或者異常，如下：

function test(a,b,c,d) {
 console.log(a)
 console.log(b)
 console.log(c)
 console.log(d)
 console.log(e)//e is not defined
}
test(1,2,3,4)

參數(shù)固定，多余的參數(shù)會出錯。

但我們又想傳遞多個參數(shù)，但是不確定參數(shù)的個數(shù)，這時候可以使用對象擴(kuò)展運算符來作參數(shù)。

function test1(...arg) {
 console.log(arg[0]);//1
 console.log(arg[1]);//2
 console.log(arg[2]);//3
 console.log(arg[3])//4
 console.log(arg[4])//5
 console.log(arg[5])//undefined
}
test1(1,2,3,4,5)

這時候程序是不會報錯的，多余取值返回的結(jié)果是undefined。這說明是可以傳入多個值，并且就算方法中引用多了也不會報錯。

（2）解決數(shù)組賦值問題

我們先用一個例子說明，我們聲明兩個數(shù)組arr1和arr2，然后我們把arr1賦值給arr2，然后我們改變arr2的值，你會發(fā)現(xiàn)arr1的值也改變了，因為我們這是對內(nèi)存堆棧的引用，而不是真正的賦值。

let arr1=['i','love','you'];
let arr2=arr1;
console.log("arr2====",arr2);
arr2.push('too');
console.log("arr1====>",arr1);

控制臺輸出的結(jié)果為：

["i", "love", "you"]

["i", "love", "you", "too"]

這是我們不想看到的，可以利用對象擴(kuò)展運算符簡單的解決這個問題，現(xiàn)在我們對代碼進(jìn)行改造。

let arr1=['i','love','you'];
let arr2=[...arr1];
console.log(arr2);
arr2.push('too');
console.log(arr1);

最終可以看到我們的arr1并沒有改變，簡單的擴(kuò)展運算符就解決了這個問題。

2.rest運算符

（1）含義

rest參數(shù)作用： 將多余的逗號分隔的參數(shù)序列轉(zhuǎn)換為數(shù)組參數(shù)

注意： rest參數(shù)必須是最后一個參數(shù)，否則報錯。

rest運算符與對象擴(kuò)展運算符有很多類似之處，它也用…（三個點）來表示，比如：

function test(first,...arg){
 console.log("first==>",first)//0
 console.log("arg=====>",arg)
}
test(0,1,2,3,4,5,6,7);

輸出結(jié)果為：

first==> 0
arg=====>[1, 2, 3, 4, 5, 6, 7]

（2）如何循環(huán)輸出rest運算符

用for…of循環(huán)來進(jìn)行打印出arg的值

function test(first,...arg){
 for(let val of arg){
  console.log(val)
 }
}
test(0,1,2,3,4,5,6,7);

結(jié)果為：

1,2,3,4,5,6,7

最后總結(jié)：

• 擴(kuò)展運算符用三個點號表示，功能是把數(shù)組或類數(shù)組對象展開成一系列用逗號隔開的值
• rest運算符也是三個點號，不過其功能與擴(kuò)展運算符恰好相反，把逗號隔開的值序列組合成一個數(shù)組
• 當(dāng)三個點(...)在等號左邊，或者放在形參上。為 rest 運算符
• 當(dāng)三個在等號右邊，或者放在實參上，是 spread運算符

或者說：放在被賦值一方是rest 運算符。放在賦值一方式 spread運算符。

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

最新評論