ES6基礎(chǔ)之展開語法(Spread syntax)
展開語法用"..."進(jìn)行表示，展開語法將可迭代的對象拆分成獨立的值（語法層面展開）。擴(kuò)展語法通常用于將可迭代的對象的值傳遞到函數(shù)的參數(shù)中。今天小編將從以下方面進(jìn)行介紹：
- 函數(shù)傳參中的應(yīng)用
- 數(shù)組的相關(guān)應(yīng)用
- 剩余參數(shù)的應(yīng)用
- 函數(shù)傳參中的應(yīng)用
ES6之前，如果我們希望將數(shù)組作為參數(shù)分別傳遞給函數(shù)中的參數(shù)，我們可以使用Function的apply()方法。如下段代碼所示：
function myFunction(a, b) {
return a + b;
}
var data = [1, 4];
var result = myFunction.apply(null, data);
console.log(result); //Output "5”
從上述代碼，apply方法接受一個數(shù)組，將它們分拆成單獨參數(shù)傳遞函數(shù)進(jìn)行調(diào)用。
ES6的展開語法能讓我們以更簡潔的方式進(jìn)行調(diào)用，如下段代碼所示：
function myFunction(a, b) {
return a + b;
}
let data = [1, 4];
let result = myFunction(...data);
console.log(result); //Output "5”
代碼運(yùn)行期間，JavaScript解釋器調(diào)用myFunction之前，將會用1,4表達(dá)式替換...運(yùn)算符:
let result = myFunction(...data);
上述代碼將會進(jìn)行如下轉(zhuǎn)換：
let result = myFunction(1,4);
替換后，函數(shù)中的代碼將會繼續(xù)執(zhí)行。
數(shù)組的相關(guān)應(yīng)用
數(shù)組的合并
展開語法可將數(shù)組添加到另外一個數(shù)組中，成為其中的一部分。
let array1 = [2,3,4]; let array2 = [1, ...array1, 5, 6, 7]; console.log(array2); //Output "1, 2, 3, 4, 5, 6, 7”
代碼運(yùn)行期間，如下代碼：
let array2 = [1, ...array1, 5, 6, 7];
上述代碼將會替換成如下代碼：
let array2 = [1, 2, 3, 4, 5, 6, 7];
在push方法中的運(yùn)用
有時候，我們需要將一個數(shù)組的內(nèi)容追加到另一個數(shù)組中，ES6之前我們可以這么做，如下段代碼所示：
var array1 = [2,3,4]; var array2 = [1]; Array.prototype.push.apply(array2, array1); console.log(array2); //Output "1, 2, 3, 4”
ES6的展開語法能以更簡潔的形式實現(xiàn)，如下段代碼所示：
let array1 = [2,3,4]; let array2=[1]; array2.push(...array1); console.log(array2); //Output "1, 2, 3, 4”
代碼運(yùn)行期間，如下代碼：
array2.push(...array1);
上述代碼將會替換成如下代碼:
array2.push(2, 3, 4);
傳遞多個數(shù)組參數(shù)
我們可以使用展開語法傳遞多個數(shù)組進(jìn)行參數(shù)傳遞，如下段代碼所示：
let array1 = [1];
let array2 = [2];
let array3 = [...array1, ...array2, ...[3, 4]];//multi arrayspread
let array4 = [5];
function myFunction(a, b, c, d, e) {
return a+b+c+d+e;
}
let result = myFunction(...array3, ...array4); //multi array spread
console.log(result); //Output "15”
剩余參數(shù)的應(yīng)用
我們知道JS函數(shù)內(nèi)部有個arguments對象，可以拿到全部實參。現(xiàn)在ES6給我們帶來了一個新的對象，可以拿到除開始參數(shù)外的參數(shù)，即剩余參數(shù)，我們可以使用展開語法...進(jìn)行獲取。
ES6之前，我們可以這樣獲取剩余參數(shù)，如下段代碼所示：
function myFunction(a, b) {
const args = Array.prototype.slice.call(arguments, myFunction.length);
console.log(args);
}
myFunction(1, 2, 3, 4, 5); //Output "3, 4, 5”
ES6中，上述代碼我們可以這樣改下，如下段代碼所示：
function myFunction(a, b, ...args) {
console.log(args); //Output "3, 4, 5"
}
myFunction(1, 2, 3, 4, 5);
是不是很簡單，有個我們需要注意的事，一旦函數(shù)中的參數(shù)第一個參數(shù)使用剩余參數(shù)，就不能聲明第二個非剩余參數(shù)，否則將會拋出錯誤。例如下段代碼所示:
function fn(...rest,foo) {}
//Output "SyntaxError: Rest parameter must be last formal parameter"
小節(jié)
今天的內(nèi)容就到這里，展開語法是不是特別的酷啊，在日后的開發(fā)中，我們盡量使用新的語法糖替代舊的寫法。讓我們代碼看起來更加干凈、整潔、易懂。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì) 介紹了JS實現(xiàn)帶動畫的回到頂部效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-12-12
JavaScript的public、private和privileged模式
公共/私有變量和方法通過一個簡單的的例子，來展示如何使用JavaScript在類里面創(chuàng)建私有變量和方法2009-12-12
詳解JS事件循環(huán)及宏任務(wù)微任務(wù)的原理
在js中，我們一般將所有的任務(wù)都分成兩類，一種是同步任務(wù)，另外一種是異步任務(wù)。而在異步任務(wù)中，又有著更加細(xì)致的分類，那就是微任務(wù)和宏任務(wù)。本文將詳細(xì)講解這二者的原理與使用，需要的可以參考一下2022-05-05
今天小編就為大家分享一篇layui table 多行刪除(id獲取)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
在學(xué)習(xí)Rx編程的過程中，理解Observable這個概念至關(guān)重要，常規(guī)學(xué)習(xí)過程中，通常需要進(jìn)行多次碰壁才能逐漸開悟。這個有點像小時候?qū)W騎自行車，必須摔幾次才能掌握一樣。當(dāng)然如果有辦法能言傳，則可以少走一些彎路，盡快領(lǐng)悟Rx的精妙2021-06-06
這篇文章主要介紹了JS document內(nèi)容及樣式操作,結(jié)合完整實例形式分析了JavaScript document內(nèi)容及樣式的獲取、修改、添加等相關(guān)操作技巧,需要的朋友可以參考下2020-01-01
這篇文章主要給大家總結(jié)介紹了關(guān)于JavaScript中八個常見的陷阱，這些陷阱雖然針對Javascript初學(xué)者，但是磚家們你們也可以看一看，避免入了這些坑，感興趣的朋友們下面來一起看看吧。2017-06-06
這篇文章主要介紹了序列化模塊json代碼實例詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-03-03
因此，如果讓服務(wù)器端也可以主動發(fā)送信息到客戶端，就可以很大程度改進(jìn)這些不足。WebSocket就是一個實現(xiàn)這種雙向通信的新協(xié)議。下面小編來簡單介紹下它2019-05-05
這篇文章主要介紹了利用JS動態(tài)生成隔行換色HTML表格的兩種方法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-10-10