擴展運算符與剩餘操作符都是以三點開頭的操作符，二者長的很像，只是在用法上有些差別。它們已經被 ES6 數組支持，能解決很多之前 arguments 解決起來很麻煩的問題。

擴展運算符

因為在React裡面經常碰到，自己就做了很簡單的幾個歸納。主要幾種在以下幾個方面。

1. 改變函數的調用

將數組作為函數的參數傳遞進去的時候，通常使用的方法是Function.prototype.apply，例如下面的例子

var students = ["Abby","Andy"];var otherStudents = ["Jane","Tom"];Array.prototype.push.apply(students,otherStudents);console.log(students); // Abby Andy Jane Tom

這樣寫起來就不太方便，現在有了延展操作符，它可以將數組，更確切的說是（可遍歷對象）進行展開然後作為函數入參進行調用。現在只需要像下面簡單地直接調用push方法就行了。

var students = ["Abby","Andy"];var otherStudents = ["Jane","Tom"];students.push(...otherStudents);console.log(students); // Abby Andy Jane Tom

2. 數組構造

在延展操作符之前，我們如果想讓一個數組成為另一個數組的一部分，不可避免地就要用到push, splice, concat等等。現在，延展操作符允許我們簡單地操作就能實現，如下面代碼

var parts = ["shoulders", "knees"];var lyrics = ["head", ...parts, "and", "toes"];console.log(lyrics)// ["head", "shoulders, "knees", "and", "toes"]

除此之外，我們還可以使用它來快速複製一個數組。

var arr = [1, 2, 3];var arr2 = [...arr]; // like arr.slice()arr2.push(4);// arr2 becomes [1, 2, 3, 4]// arr remains unaffected

3. 數組解構

除了可以快速構造數組之外，還可以用來實現數組的解構。可以用來提取數組中的部分值，並且提取的結果是一個數組對象。注意延展操作符總是應該位於解構賦值的最後一個位置。舉個栗子。

var students = ["Abby", "Andy", "Jane", "Tom"];var somestudents, otherStudents;[somestudents, ...otherStudents] = students ;console.log(somestudents); // Abbyconsole.log(otherStudents); // Andy Jane Tom

4. 將類數組對象轉換成數組

擴展運算符可以將一個類數組對象中索引範圍在[0,length)之間的所有屬性的值添加到一個數組中，這樣可以得到一個真正的數組：

var nodeList = document.querySelectorAll("div");var array = [...nodeList];

5. React裡面的延展屬性（Spread Attributes）

React裡面，延展操作符可以在JSX中，{…props}可以將ReactElement的props屬性展開。

var props = {};props.foo = x;props.bar = y;var component = <Component {...props} />;

傳入對象的屬性會被複制到組件內。

它能被多次使用，也可以和其它屬性一起用。注意順序很重要，後面的會覆蓋掉前面的。

var props = { foo: "default" };var component = <Component {...props} foo={"override"} />;console.log(component.props.foo); // "override"

剩餘操作符

剩餘參數（rest parameter）允許長度不確定的實參表示為一個數組。如果一個函數的最後一個形參是以 … 為前綴的，則在函數被調用時,該形參會成為一個數組,數組中的元素都是傳遞給該函數的多出來的實參的值。

1. 獲取參數

剩餘操作符可以用來方便地獲取傳進來的參數。

function fn(a, b, ...args) { return args.length;}fn(1, 2, 3, 4, 5 ); // 傳進來的參數的個數 3

其中第一個形參a對應的是1,第二個形參b對應的2,…args表示的就是[3, 4, 5]。

2. 與arguments的不同

上面args可以有length屬性，也說明了args是一個數組而不是像arguments一樣是一個偽數組，因此能在在它上面直接使用所有的數組方法，比如 sort，map，forEach，pop。

arguments想要變成數組，可以通過Array.prototype.slice.call方法，使用剩餘操作符可以避免將arguments轉為數組的麻煩。這種用法和上面擴展運算符的用法還有點異曲同工之妙。

// 下面的代碼模擬了剩餘數組function fn1(a, b){ var args = Array.prototype.slice.call(arguments, fn1.length); console.log(args.length);} // 現在代碼可以簡化為這樣了function fn2(a, b, ...args) { console.log(args.length);}fn1(1,2,3); // 1fn2(1,2,3); // 1

擴展運算符與剩餘操作符的區別

關於擴展運算符與剩餘操作符之間的區別，簡單地說，在某種程度上，剩餘操作符和擴展運算符相反，擴展運算符會「展開」數組變成多個元素，剩餘操作符會收集多個元素和「壓縮」成一個單一的元素。

以上就是自己總結的擴展運算符與剩餘操作符較為簡單常用的用法，如有不恰當之處歡迎指正。

參考資料

Spreadsyntax

擴展語句

剩餘參數

JSX的延展屬性 | React