展開語法用"..."進(jìn)行表示，展開語法將可迭代的對(duì)象拆分成獨(dú)立的值（語法層面展開）。擴(kuò)展語法通常用于將可迭代的對(duì)象的值傳遞到函數(shù)的參數(shù)中。今天小編將從以下方面進(jìn)行介紹：

創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站設(shè)計(jì)制作、網(wǎng)站設(shè)計(jì)、靖宇網(wǎng)絡(luò)推廣、微信小程序、靖宇網(wǎng)絡(luò)營銷、靖宇企業(yè)策劃、靖宇品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供靖宇建站搭建服務(wù)，24小時(shí)服務(wù)熱線：13518219792，官方網(wǎng)址：www.chinadenli.net

• 函數(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方法接受一個(gè)數(shù)組，將它們分拆成單獨(dú)參數(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之前，將會(huì)用1,4表達(dá)式替換...運(yùn)算符:

let result = myFunction(...data);

上述代碼將會(huì)進(jìn)行如下轉(zhuǎn)換：

let result = myFunction(1,4);

替換后，函數(shù)中的代碼將會(huì)繼續(xù)執(zhí)行。

數(shù)組的相關(guān)應(yīng)用

數(shù)組的合并

展開語法可將數(shù)組添加到另外一個(gè)數(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];

上述代碼將會(huì)替換成如下代碼：

let array2 = [1, 2, 3, 4, 5, 6, 7];

在push方法中的運(yùn)用

有時(shí)候，我們需要將一個(gè)數(shù)組的內(nèi)容追加到另一個(gè)數(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的展開語法能以更簡潔的形式實(shí)現(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);

上述代碼將會(huì)替換成如下代碼:

array2.push(2, 3, 4);

傳遞多個(gè)數(shù)組參數(shù)

我們可以使用展開語法傳遞多個(gè)數(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)部有個(gè)arguments對(duì)象，可以拿到全部實(shí)參。現(xiàn)在ES6給我們帶來了一個(gè)新的對(duì)象，可以拿到除開始參數(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);

是不是很簡單，有個(gè)我們需要注意的事，一旦函數(shù)中的參數(shù)第一個(gè)參數(shù)使用剩余參數(shù)，就不能聲明第二個(gè)非剩余參數(shù)，否則將會(huì)拋出錯(cuò)誤。例如下段代碼所示:

function fn(...rest,foo) {} 
//Output "SyntaxError: Rest parameter must be last formal parameter"

小節(jié)

今天的內(nèi)容就到這里，展開語法是不是特別的酷啊，在日后的開發(fā)中，我們盡量使用新的語法糖替代舊的寫法。讓我們代碼看起來更加干凈、整潔、易懂。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

本文題目：ES6基礎(chǔ)之展開語法(Spreadsyntax)
文章出自：http://www.chinadenli.net/article16/pisgdg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、小程序開發(fā)、建站公司、服務(wù)器托管、網(wǎng)站維護(hù)、搜索引擎優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)