這篇文章主要為大家展示了如何使用ES6擴展運算符和rest運算符,內容簡而易懂,希望大家可以學習一下,學習完之后肯定會有收獲的,下面讓小編帶大家一起來看看吧。
創(chuàng)新互聯(lián)公司成立十多年來,這條路我們正越走越好,積累了技術與客戶資源,形成了良好的口碑。為客戶提供網站制作、成都網站建設、網站策劃、網頁設計、申請域名、網絡營銷、VI設計、網站改版、漏洞修補等服務。網站是否美觀、功能強大、用戶體驗好、性價比高、打開快等等,這些對于網站建設都非常重要,創(chuàng)新互聯(lián)公司通過對建站技術性的掌握、對創(chuàng)意設計的研究為客戶提供一站式互聯(lián)網解決方案,攜手廣大客戶,共同發(fā)展進步。
本文實例講述了ES6擴展運算符和rest運算符用法。分享給大家供大家參考,具體如下:
運算符可以很好的為我們解決參數(shù)和對象數(shù)組未知情況下的編程,讓我們的代碼更健壯和簡潔。
運算符有兩種:對象擴展運算符與rest運算符。
以前我們編程是傳遞的參數(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ù),這時候可以使用對象擴展運算符來作參數(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)
這時候程序是不會報錯的,多余取值返回的結果是undefined。這說明是可以傳入多個值,并且就算方法中引用多了也不會報錯。
我們先用一個例子說明,我們聲明兩個數(shù)組arr1和arr2,然后我們把arr1賦值給arr2,然后我們改變arr2的值,你會發(fā)現(xiàn)arr1的值也改變了,因為我們這是對內存堆棧的引用,而不是真正的賦值。
let arr1=['i','love','you']; let arr2=arr1; console.log("arr2====",arr2); arr2.push('too'); console.log("arr1====>",arr1);
控制臺輸出的結果為:
["i", "love", "you"]
["i", "love", "you", "too"]
這是我們不想看到的,可以利用對象擴展運算符簡單的解決這個問題,現(xiàn)在我們對代碼進行改造。
let arr1=['i','love','you']; let arr2=[...arr1]; console.log(arr2); arr2.push('too'); console.log(arr1);
最終可以看到我們的arr1并沒有改變,簡單的擴展運算符就解決了這個問題。
rest參數(shù)作用: 將多余的逗號分隔的參數(shù)序列轉換為數(shù)組參數(shù)
注意: rest參數(shù)必須是最后一個參數(shù),否則報錯。
rest運算符與對象擴展運算符有很多類似之處,它也用…(三個點)來表示,比如:
function test(first,...arg){ console.log("first==>",first)//0 console.log("arg=====>",arg) } test(0,1,2,3,4,5,6,7);
輸出結果為:
first==> 0
arg=====>[1, 2, 3, 4, 5, 6, 7]
用for…of循環(huán)來進行打印出arg的值
function test(first,...arg){ for(let val of arg){ console.log(val) } } test(0,1,2,3,4,5,6,7);
結果為:
1,2,3,4,5,6,7
最后總結:
或者說:放在被賦值一方是rest 運算符。放在賦值一方式 spread運算符。
以上就是關于如何使用ES6擴展運算符和rest運算符的內容,如果你們有學習到知識或者技能,可以把它分享出去讓更多的人看到。