ES6系列 4之擴充套件運算子和rest運算子

2022-05-01 20:03:11 字數 1861 閱讀 3081

運算子可以很好的為我們解決引數和物件陣列未知情況下的程式設計,讓我們的**更健壯和簡潔。

運算子有兩種:物件擴充套件運算子與rest運算子。

(1)解決引數個數問題

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

function test(a,b,c,d) 

test(1,2,3,4)

引數固定,多餘的引數會出錯。

但我們又想傳遞多個引數,但是不確定引數的個數,這時候可以使用物件擴充套件運算子來作引數。

function test1(...arg) 

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並沒有改變,簡單的擴充套件運算子就解決了這個問題。

(1)含義

rest引數作用: 將多餘的逗號分隔的引數序列轉換為陣列引數

注意: rest引數必須是最後乙個引數,否則報錯。

rest運算子與物件擴充套件運算子有很多類似之處,它也用…(三個點)來表示,比如:

function test(first,...arg)

test(0,1,2,3,4,5,6,7);

輸出結果為:

first==> 0arg*****>[1, 2, 3, 4, 5, 6, 7]
(2)如何迴圈輸出rest運算子用for…of迴圈來進行列印出arg的值

function test(first,...arg)

}test(0,1,2,3,4,5,6,7);

結果為:1,2,3,4,5,6,7

最後總結:

擴充套件運算子用三個點號表示,功能是把陣列或類陣列物件展開成一系列用逗號隔開的值

rest運算子也是三個點號,不過其功能與擴充套件運算子恰好相反,把逗號隔開的值序列組合成乙個陣列

當三個點(...)在等號左邊,或者放在形參上。為 rest 運算子

當三個在等號右邊,或者放在實參上,是 spread運算子

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

ES6之擴充套件運算子 「 」

es6中的擴充套件運算子就是三個點 可以用來將乙個陣列分割為由陣列內容組成的引數序列。1 可以將陣列轉換為分隔開的字串 2 擴充套件運算子可以用於函式呼叫 1 將引數集成為陣列 function show a show 1,2,3,4,5 1,2,3,4,5 2 將陣列展開為相對應的引數 funct...

es6之擴充套件運算子

在es6以前,如果我們要把兩個陣列拼接到一起,通常是使用陣列的concat方法,比如 const a jelly bob helen const b james adrew john const c a.concat b console.log c jelly bob helen james adr...

ES6 擴充套件運算子

擴充套件運算子用3個點表示,功能是把陣列或者類陣列物件展開成一系列用逗號隔開的值 1,陣列 let arr red green blue console.log arr red,green,blue拷貝陣列 和object.assign一樣都是淺拷貝 let arr red green blue l...