1. 程式人生 > >ES6系列_4之擴展運算符和rest運算符

ES6系列_4之擴展運算符和rest運算符

test 必須 con 是我 組合 簡單 img defined 知情

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

運算符有兩種:對象擴展運算符與rest運算符。

技術分享圖片

1.對象擴展( spread)運算符(...)

(1)解決參數個數問題

以前我們編程是傳遞的參數一般是確定,否則將會報錯或者異常,如下:

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)

參數固定,多余的參數會出錯。

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

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。這說明是可以傳入多個值,並且就算方法中引用多了也不會報錯。

(2)解決數組賦值問題

我們先用一個例子說明,我們聲明兩個數組arr1和arr2,然後我們把arr1賦值給arr2,然後我們改變arr2的值,你會發現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"]

這是我們不想看到的,可以利用對象擴展運算符簡單的解決這個問題,現在我們對代碼進行改造。

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

最終可以看到我們的arr1並沒有改變,簡單的擴展運算符就解決了這個問題。

2.rest運算符

(1)含義

rest參數作用: 將多余的逗號分隔的參數序列轉換為數組參數 註意: rest參數必須是最後一個參數,否則報錯。

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]

(2)如何循環輸出rest運算符

用for…of循環來進行打印出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運算符也是三個點號,不過其功能與擴展運算符恰好相反,把逗號隔開的值序列組合成一個數組
當三個點(...)在等號左邊,或者放在形參上。為 rest 運算符
當三個在等號右邊,或者放在實參上,是 spread運算符

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




ES6系列_4之擴展運算符和rest運算符