得益于ES6和Babel等工具，從新語(yǔ)言語(yǔ)法到自定義解析（如JSX），JavaScript的編寫(xiě)已變得異常動(dòng)態(tài)。我已經(jīng)成為傳播運(yùn)算符的忠實(shí)擁護(hù)者，三個(gè)點(diǎn)可能會(huì)改變您在JavaScript中完成任務(wù)的方式。以下是我在JavaScript中最喜歡使用傳播運(yùn)算符的列表！

調(diào)用函數(shù)而不應(yīng)用

至此，我們已經(jīng)調(diào)用 Function.prototype.apply，傳遞了一個(gè)參數(shù)數(shù)組，以調(diào)用具有數(shù)組持有的一組給定參數(shù)的函數(shù)：

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

// Call the function, passing args
doStuff.apply(null, args);

使用散布運(yùn)算符，我們可以避免apply 全部合并，只需在數(shù)組之前使用散布運(yùn)算符調(diào)用函數(shù)即可：

doStuff(...args);

代碼更短，更干凈，并且不需要使用無(wú)用的代碼null！

合并陣列

一直有各種各樣的方法來(lái)組合數(shù)組，但是散布運(yùn)算符為組合數(shù)組提供了一種新方法：

arr1.push(...arr2) // Adds arr2 items to end of array
arr1.unshift(...arr2) //Adds arr2 items to beginning of array

如果要合并兩個(gè)數(shù)組并將元素放置在數(shù)組中的任何位置，可以執(zhí)行以下操作：

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

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

添加位置控制時(shí)，語(yǔ)法比其他方法短！

復(fù)制陣列

獲取數(shù)組的副本是一項(xiàng)常見(jiàn)的任務(wù)，我們過(guò)去曾使用Array.prototype.slice來(lái)做，但現(xiàn)在我們可以使用spread運(yùn)算符獲取數(shù)組的副本：

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

請(qǐng)記?。簲?shù)組中的對(duì)象仍然是引用，因此并不是所有內(nèi)容都被“復(fù)制”。

將參數(shù)或NodeList轉(zhuǎn)換為數(shù)組

與復(fù)制數(shù)組非常相似，我們?cè)?jīng)使用Array.Prototype.slice過(guò)將轉(zhuǎn)換NodeList和arguments 對(duì)象以及真正的數(shù)組轉(zhuǎn)換為數(shù)組的方法，但是現(xiàn)在我們可以使用spread運(yùn)算符完成該任務(wù)：

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

您甚至可以從簽名中以數(shù)組形式獲取參數(shù)：

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

別忘了，您也可以使用Array.from！

使用Math 功能

當(dāng)然，散布運(yùn)算符會(huì)將數(shù)組“散布”為不同的參數(shù)，因此可以將接受任何數(shù)量的參數(shù)的函數(shù)使用以散布作為參數(shù)的任何函數(shù)。

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

該Math 對(duì)象的一組功能是傳播運(yùn)營(yíng)商作為唯一的參數(shù)傳遞給函數(shù)的一個(gè)很好的例子。

銷(xiāo)毀樂(lè)趣

銷(xiāo)毀是一個(gè)有趣的實(shí)踐，我在React項(xiàng)目以及其他Node.js應(yīng)用程序中使用了大量的資源。您可以根據(jù)需要使用解構(gòu)和rest運(yùn)算符將信息提取到變量中：

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 }

其余屬性將在擴(kuò)展運(yùn)算符之后分配給變量！

ES6不僅使JavaScript更加有效，而且更加有趣。現(xiàn)代瀏覽器都支持新的ES6語(yǔ)法，因此，如果您沒(méi)有花時(shí)間玩，肯定可以。如果您無(wú)論環(huán)境如何都愿意嘗試，請(qǐng)務(wù)必查看我的文章ES6入門(mén)。無(wú)論如何，spread運(yùn)算符是JavaScript中有用的功能，您應(yīng)該意識(shí)到！