多虧了ES6和像Babel這樣的轉換器，書寫JavaScript程式碼已經變得難以想象的有活力，從新的語法到可以自定義解析的JSX。我是展開運算子的一位鐵粉，三個點...將會改變你使用JS完成任務的方式。以下是我在JS中最喜歡的展開運算子的用法！

不使用Apply的函式呼叫

我們經常使用Function.prototype.apply，傳遞一個數組作為引數，使用陣列中存放的一組引數呼叫一個函式。

function doStuff (x, y, z) { }
var args = [0, 1, 2];

// 呼叫函式，傳遞args引數
doStuff.apply(null, args);
 

採用展開用算符我們能夠在避免使用apply的同時，輕易的呼叫函式。只需在陣列前加上展開運算子即可。

doStuff(...args);

這段程式碼變得更短，更清晰，並且不需要使用多餘的null!

合併陣列

已經有好多種合併陣列的方法，但是展開運算子帶來了一種全新的方式。

arr1.push(...arr2) // 將arr2 追加到陣列的末尾
arr1.unshift(...arr2) // 將arr2 追加到陣列的開頭

如果你想要整合兩個陣列，並且想把某個陣列放在另一個數組的任意特定位置上，你可以這麼做：

var arr1 = ['two', 'three'];
var arr2 = ['one', ...arr1, 'four', 'five'];

// ["one", "two", "three", "four", "five"]
 

這是一種比其他方式更短的語句！

拷貝陣列

得到一份陣列的拷貝是很常見的任務，過去我們使用Array.prototype.slice來做，但現在我們可以使用展開運算子：

var arr = [1,2,3];
var arr2 = [...arr]; // 和arr.slice()差不多
arr2.push(4)

記住：陣列中的物件依然是引用值，所以不是任何東西都“拷貝”過去了。

將arguments或者NodeList轉換為Array

像拷貝陣列一樣，我們常常使用Array.Prototype.slice來將NodeList和arguments這種類陣列物件轉換為真正的陣列。但是現在我們能夠用展開運算子輕易的實現這項任務：

[...document.querySelectorAll('div')]

使用此法，你甚至可以像陣列一樣獲取引數。

var myFn = function(...args) {
// ...
}

別忘了你也能用Array.from達成相同的目的！

使用Math函式

當然了，展開運算子將陣列“展開”成為不同的引數，所以任何可接收任意數量的引數的函式，都能夠使用展開運算子來傳參。

let numbers = [9, 4, 7, 1];
Math.min(...numbers); // 1

Math物件的一系列的方法，正是展開運算子作為唯一引數傳遞給函式的完美例子。

解構的樂趣

解構是一項很棒的實踐方法，我在自己的React專案中以及Node.js 程式中大量的使用到它。你能夠使用解構和展開運算子將資訊解壓到你想要的變數中去：

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }

剩餘的屬性被分配到了展開運算子之後的z變數中。

ES6不僅僅使JS變得更高效，也使其更有趣。現代瀏覽器都已支援ES6的新語句，所以如果你還沒有花時間好好把玩一番的話，那你一定要試一下。如果你不想考慮太多的環境問題實驗一下的話，確保你已查看了我的這篇文章 Getting Started with ES6。無論如何，展開運算子，是你應該知道的一種在JS中超有用的功能！