輕松學(xué)習(xí) JavaScript——第 2 部分:函數(shù)中的 Rest 參數(shù)

JavaScript函數(shù)可以使用任意數(shù)量的參數(shù)。與其他語言(如C#和Java)不同,你可以在調(diào)用JavaScript函數(shù)時(shí)傳遞任意數(shù)量的參數(shù)。JavaScript函數(shù)允許未知數(shù)量的函數(shù)參數(shù)。在ECMAScript 6之前,JavaScript有一個(gè)變量來訪問這些未知或可變數(shù)目的參數(shù),這是一個(gè)類似數(shù)組的對(duì)象,并非一個(gè)數(shù)組。細(xì)想以下代碼來理解arguments變量:

function add(){
    var result = 0; 
    for(let i=0;i<arguments.length;i++){
        result = result + arguments[i];
    }
    return result; 
}
var r = add(6,9,3,2);
console.log(r);
var t = add(7,56,9);
console.log(t);

如你所見,arguments對(duì)象用于訪問未知或可變的函數(shù)參數(shù)。即使arguments使用length屬性和方括號(hào),它也不是一個(gè)真正的JavaScript數(shù)組。你不能對(duì)arguments對(duì)象使用其他JavaScript數(shù)組方法,如pop,push,slice等。在使用arguments時(shí)存在的一些問題是:

  • JavaScript函數(shù)arguments對(duì)象不是一個(gè)真正的JavaScript數(shù)組;因此,你不能使用其他數(shù)組方法,如pop,push,slice等。
  • 在內(nèi)部函數(shù)中訪問外部函數(shù)的arguments對(duì)象是很困難的。要訪問的話,你需要在變量中分配外部函數(shù)的arguments函數(shù),然后在內(nèi)部函數(shù)中使用它。
  • 如果你想要使用arguments對(duì)象作為數(shù)組,那么你需要通過Aarry.prototype.slice手動(dòng)轉(zhuǎn)換。

ECMAScript 6引入了一個(gè)新功能,Rest參數(shù),它表示一個(gè)未知數(shù)量的參數(shù)作為函數(shù)中的一個(gè)數(shù)組。它不僅將額外的參數(shù)表示為數(shù)組,還解決了arguments對(duì)象的許多問題。使用rest參數(shù)重寫上面的add函數(shù)。

function add(...theArgs){
    var result = 0; 
    for(let i=0;i<theArgs.length;i++){
        result = result + theArgs[i];
    }
    return result; 
}
var r = add(6,9,3,2);
console.log(r);
var t = add(7,56,9);
console.log(t);

你可以將rest參數(shù)定義為…theArgs… args。如果最后命名的函數(shù)參數(shù)以…(三個(gè)點(diǎn))作為前綴,那么它將成為函數(shù)的rest參數(shù)。JavaScript函數(shù)的rest參數(shù)是純JavaScript數(shù)組。在上面的代碼中,…theArgs是函數(shù)add的rest參數(shù),因?yàn)樗俏ㄒ坏拿麉?shù),且也以(三個(gè)點(diǎn))作為前綴。由于rest參數(shù)是JavaScript數(shù)組,所以你可以對(duì)rest參數(shù)theArgs執(zhí)行諸如push,pop等操作,如下面的代碼所示:

function add(...theArgs){
    theArgs.push(10);
    var result = 0; 
    for(let i=0;i<theArgs.length;i++){
        result = result + theArgs[i];
    }
    var lastItem  = theArgs.pop();
    console.log(lastItem);
    return result; 
}

JavaScript函數(shù)的rest參數(shù)也可以與其他參數(shù)一起工作。如果你不想在rest參數(shù)數(shù)組中包含特定參數(shù)的話,那么你可能需要在函數(shù)中使用其他命名參數(shù)。細(xì)想以下代碼塊:

function add(num1, num2, ...theArgs){
    console.log(num1);
    console.log(num2);
    console.log(theArgs.length);
}
var r = add(6,9,3,2);
var t = add(7,56,9);

對(duì)于第一次函數(shù)調(diào)用,6和9將分別分配給num1和num2。對(duì)于第二個(gè)函數(shù)調(diào)用,7和56將被分配給num1和num2。啟動(dòng)第三個(gè)參數(shù)的參數(shù)將被分配給rest參數(shù)數(shù)組。請記住,前兩個(gè)參數(shù)不會(huì)成為rest參數(shù)數(shù)組的一部分。所以,如果你打算將所有的值都包含在rest參數(shù)中,那么你應(yīng)該一開始就將它們定義為用逗號(hào)分隔的命名參數(shù)。下面給出的代碼將會(huì)導(dǎo)致錯(cuò)誤:

function add(num1, ...theArgs,num2){
    console.log(num1);
    console.log(num2);
    console.log(theArgs.length);
}

在上面的代碼中,rest參數(shù)不是最后一個(gè)參數(shù),所以JavaScript會(huì)拋出錯(cuò)誤。rest參數(shù)必須是最后一個(gè)正式參數(shù)。

image

JavaScript允許你破壞rest參數(shù),這意味著你可以將rest變量數(shù)據(jù)解包為不同的變量名稱。請看下面的代碼:

function add(...[a,b,c]){
    return a+b+c; 
}
var r = add(6);
console.log(r);
var t = add(7,56,9);
console.log(t);

第一次函數(shù)調(diào)用,將分配a = 6,b = undefined,c = undefined,第二次函數(shù)調(diào)用,將分配a = 7,b = 56,c = 9。在此例子中,函數(shù)將忽略傳遞的任何額外的參數(shù)。

JavaScript函數(shù)的rest參數(shù)是對(duì)arguments對(duì)象使用函數(shù)未知參數(shù)的一個(gè)巨大改進(jìn)。它是一個(gè)純JavaScript數(shù)組;因此,你可以對(duì)它使用所有數(shù)組方法。你可以將rest變量數(shù)據(jù)解包到命名變量中。你可以給rest參數(shù)指定任何名稱,這又是一個(gè)使用arguments關(guān)鍵字的重大改進(jìn)。

歡迎加入學(xué)習(xí)交流群569772982,大家一起學(xué)習(xí)交流。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容