展開語法用"..."進行表示,展開語法將可迭代的對象拆分成獨立的值(語法層面展開)。擴展語法通常用于將可迭代的對象的值傳遞到函數(shù)的參數(shù)中。今天小編將從以下方面進行介紹:
創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務,包含不限于網(wǎng)站設計制作、網(wǎng)站設計、靖宇網(wǎng)絡推廣、微信小程序、靖宇網(wǎng)絡營銷、靖宇企業(yè)策劃、靖宇品牌公關、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等,從售前售中售后,我們都將竭誠為您服務,您的肯定,是我們最大的嘉獎;創(chuàng)新互聯(lián)為所有大學生創(chuàng)業(yè)者提供靖宇建站搭建服務,24小時服務熱線:13518219792,官方網(wǎng)址:muchs.cn
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ù)進行調用。
ES6的展開語法能讓我們以更簡潔的方式進行調用,如下段代碼所示:
function myFunction(a, b) { return a + b; } let data = [1, 4]; let result = myFunction(...data); console.log(result); //Output "5”
代碼運行期間,JavaScript解釋器調用myFunction之前,將會用1,4表達式替換...運算符:
let result = myFunction(...data);
上述代碼將會進行如下轉換:
let result = myFunction(1,4);
替換后,函數(shù)中的代碼將會繼續(xù)執(zhí)行。
數(shù)組的相關應用
數(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”
代碼運行期間,如下代碼:
let array2 = [1, ...array1, 5, 6, 7];
上述代碼將會替換成如下代碼:
let array2 = [1, 2, 3, 4, 5, 6, 7];
在push方法中的運用
有時候,我們需要將一個數(shù)組的內容追加到另一個數(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”
代碼運行期間,如下代碼:
array2.push(...array1);
上述代碼將會替換成如下代碼:
array2.push(2, 3, 4);
傳遞多個數(shù)組參數(shù)
我們可以使用展開語法傳遞多個數(shù)組進行參數(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ù)的應用
我們知道JS函數(shù)內部有個arguments對象,可以拿到全部實參?,F(xiàn)在ES6給我們帶來了一個新的對象,可以拿到除開始參數(shù)外的參數(shù),即剩余參數(shù),我們可以使用展開語法...進行獲取。
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é)
今天的內容就到這里,展開語法是不是特別的酷啊,在日后的開發(fā)中,我們盡量使用新的語法糖替代舊的寫法。讓我們代碼看起來更加干凈、整潔、易懂。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
本文題目:ES6基礎之展開語法(Spreadsyntax)
文章出自:http://muchs.cn/article16/pisgdg.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供靜態(tài)網(wǎng)站、小程序開發(fā)、建站公司、服務器托管、網(wǎng)站維護、搜索引擎優(yōu)化
聲明:本網(wǎng)站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經(jīng)允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)