JavaScript 剩餘運算子

JavaScript剩餘運算子使用三個點（...）構成，很多教程稱之為剩餘引數，本站認為非常不妥。

引數是函式引數上下文中的一個名詞，但是剩餘運算子並非只用在函式引數上下文，在函式中通過剩餘運算子可以構成剩餘引數，但是不能說所有剩餘運算子構成的都是剩餘引數。

ES2015新增此運算子。

是不是很眼熟，沒錯它與展開運算子長相一模一樣。

關於展開運算子內容可以參閱JavaScript 展開運算子一章節。

下面將結合程式碼例項詳細介紹一下函式剩餘引數的作用。

首先看一段程式碼例項：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let arr = ["螞蟻部落", 6, "softwhy.com"];
console.log([1,2,...arr]);

程式碼執行效果截圖如下：

上面程式碼是展開運算子的應用，它可以將已經存在的陣列展開。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
function func(a,b,...arr) {
  console.log(a);
  console.log(b);
  console.log(arr);
}
func(1,2,3,4,5,6);

程式碼執行效果截圖如下：

上面就是剩餘運算子的應用，為什麼這是剩餘運算子而不是展開運算子呢。

很明顯...並不是將arr展開，而是將剩餘多個值壓縮收集起來生成一個陣列作為引數。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
function func(a,...arr,b) {
  console.log(a);
  console.log(b);
  console.log(arr);
}
func(1,2,3,4,5,6);

程式碼執行效果截圖如下：

上面的程式碼會報錯，由剩餘運算子構成的剩餘引數只能位於引數列表的最後一位。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let [one,two,...rest] = [1, 2, 3, 4,5];
console.log(one);
console.log(two);
console.log(rest);

程式碼執行效果截圖如下：

剩餘運算子在解構賦值中的應用。

可以看到通過剩餘運算子可以將剩餘的陣列元素集合壓縮到rest陣列中。

關於陣列解構賦值可以參閱JavaScript陣列解構賦值一章節。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let {web,...rest}={web:"螞蟻部落",age:6,address:"青島市南區"};
console.log(web);
console.log(rest);

程式碼執行效果截圖如下：

剩餘運算子應用於物件結構賦值中。

這是ES2018對剩餘運算子功能得擴充套件，在此之前只能壓縮生成陣列，不能生成物件。

物件解構賦值可以參閱JavaScript物件解構賦值一章節。