剩餘運算子與展開運算子的區別

本文介紹一下ES2015新增剩餘運算子與展開運算子之間的區別。

通常運算子之間的區別是非常明顯的，從"長相"就可以很容易區分。

首先看一段程式碼例項：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let a=5,b=2;
console.log(a-b);
console.log(a+b);

誰要問一聲加號運算子和減號運算子的區別，可以想象聽者的心態是爆炸的。

JavaScript中的幾乎所有運算子的區別都是如此明顯。

但是剩餘運算子與展開運算子之間的區別是一個例外，兩者十分相像。

原因如下：

（1）.剩餘運算子與展開運算子完全一樣，都是三個點（...）。

（2）.剩餘運算子與展開運算子應用場景類似。

程式碼例項如下：

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

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

上面是展開運算子的應用。

它可以將陣列展開，將其中的陣列元素新增到目標陣列中。

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

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

上面是剩餘運算子的應用。

可以看到運算子並沒有將rest展開，而是將剩餘的陣列元素集中起來存放在rest，形成一個新陣列。

區別總結如下：

首先強調一點，兩者長相確實一模一樣。

但是功能區別還是很大的，展開運算子是將一個資料結構展開，將其內部的元素通過某種形式羅列出來，但是剩餘運算子則是將剩餘的資料壓縮集合起來生成一個資料結構，是展開運算子的反向操作。上面的程式碼中，展開運算子將陣列arr展開，而剩餘運算子則是生成一個陣列rest。

兩個運算子的用法可以參閱如下兩篇文章：

（1）.剩餘運算子可以參閱JavaScript 剩餘運算子一章節。

（2）.展開運算子可以參閱JavaScript 展開運算子一章節。