本文小編為大家詳細(xì)介紹“JavaScript函數(shù)怎么實(shí)現(xiàn)可變參數(shù)”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“JavaScript函數(shù)怎么實(shí)現(xiàn)可變參數(shù)”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識(shí)吧。

“專業(yè)、務(wù)實(shí)、高效、創(chuàng)新、把客戶的事當(dāng)成自己的事”是我們每一個(gè)人一直以來堅(jiān)持追求的企業(yè)文化。 創(chuàng)新互聯(lián)是您可以信賴的網(wǎng)站建設(shè)服務(wù)商、專業(yè)的互聯(lián)網(wǎng)服務(wù)提供商! 專注于成都做網(wǎng)站、網(wǎng)站建設(shè)、軟件開發(fā)、設(shè)計(jì)服務(wù)業(yè)務(wù)。我們始終堅(jiān)持以客戶需求為導(dǎo)向，結(jié)合用戶體驗(yàn)與視覺傳達(dá)，提供有針對(duì)性的項(xiàng)目解決方案，提供專業(yè)性的建議，創(chuàng)新互聯(lián)建站將不斷地超越自我，追逐市場(chǎng)，引領(lǐng)市場(chǎng)！

JS可變參數(shù)的實(shí)現(xiàn)一：arguments

什么是arguments？怎么實(shí)現(xiàn)可變參數(shù)？

arguments 是一個(gè)對(duì)應(yīng)于傳遞給函數(shù)的參數(shù)的類數(shù)組對(duì)象。

在ES5中可以使用arguments對(duì)象實(shí)現(xiàn)可變參數(shù)。

arguments對(duì)象的長度是由實(shí)參個(gè)數(shù)而不是形參個(gè)數(shù)決定的。形參是函數(shù)內(nèi)部重新開辟內(nèi)存空間存儲(chǔ)的變量，但是其與arguments對(duì)象內(nèi)存空間并不重疊。對(duì)于arguments和值都存在的情況下，兩者值是同步的，但是針對(duì)其中一個(gè)無值的情況下，對(duì)于此無值的情形值不會(huì)得以同步。

• 參數(shù)不確定，那干脆不寫了。

• 調(diào)用時(shí)可以寫N多個(gè)參數(shù)，也可以直接傳個(gè)數(shù)組。

執(zhí)行效果：

總結(jié)：

1、從函數(shù)定義上可以看出，函數(shù)中如果使用可變參數(shù) arguments ，則不需要寫形參

2、在調(diào)用函數(shù)時(shí)，可以直接向函數(shù)中傳遞多個(gè)實(shí)參

arguments 對(duì)象是所有（非箭頭）函數(shù)中都可用的局部變量。你可以使用arguments 對(duì)象在函數(shù)中引用函數(shù)的參數(shù)。此對(duì)象包含傳遞給函數(shù)的每個(gè)參數(shù)，第一個(gè)參數(shù)在索引0處。例如，如果一個(gè)函數(shù)傳遞了三個(gè)參數(shù)，你可以以如下方式引用他們：

arguments[0]
arguments[1]
arguments[2]

參數(shù)也可以被設(shè)置：

arguments[0] = 'value';

arguments是一個(gè)對(duì)象，不是一個(gè) Array 。它類似于Array ，但除了length屬性和索引元素之外沒有任何Array 屬性。例如，它沒有 pop 方法。但是它可以被轉(zhuǎn)換為一個(gè)真正的Array ：

所以經(jīng)常能看到這樣的代碼：

// 由于arguments不是 Array，所以無法使用 Array 的方法，所以通過這種方法轉(zhuǎn)換為數(shù)組
 
var args = [].slice.call(arguments);  // 方式一
var args = Array.prototype.slice.call(arguments); // 方式二
 
// 下面是 es6 提供的語法
let args = Array.from(arguments)   // 方式一
let args = [...arguments]; // 方式二

arguments上的屬性

• arguments.callee：指向當(dāng)前執(zhí)行的函數(shù)（在 嚴(yán)格模式 下，第5版 ECMAScript (ES5) 禁止使用 arguments.callee()）

• argunments.length：指向傳遞給當(dāng)前函數(shù)的參數(shù)數(shù)量

• arguments.caller：已移除

arguments與剩余參數(shù)、默認(rèn)參數(shù)和解構(gòu)賦值參數(shù)的結(jié)合使用

1）在嚴(yán)格模式下，剩余參數(shù)、默認(rèn)參數(shù)和解構(gòu)賦值參數(shù)的存在不會(huì)改變 arguments對(duì)象的行為，但是在非嚴(yán)格模式下就有所不同了

function func(a) { 
  arguments[0] = 99;   // 更新了arguments[0] 同樣更新了a
  console.log(a);
}
func(10); // 99

// 并且

function func(a) { 
  a = 99;              // 更新了a 同樣更新了arguments[0] 
  console.log(arguments[0]);
}
func(10); // 99

2）當(dāng)非嚴(yán)格模式中的函數(shù)沒有包含剩余參數(shù)、默認(rèn)參數(shù)和解構(gòu)賦值，那么arguments對(duì)象中的值會(huì)跟蹤參數(shù)的值（反之亦然）。看下面的代碼：

function func(a = 55) { 
  arguments[0] = 99; // updating arguments[0] does not also update a
  console.log(a);
}
func(10); // 10

//

function func(a = 55) { 
  a = 99; // updating a does not also update arguments[0]
  console.log(arguments[0]);
}
func(10); // 10


function func(a = 55) { 
  console.log(arguments[0]);
}
func(); // undefined

JS可變參數(shù)的實(shí)現(xiàn)二：rest 參數(shù)（...）

在ES6標(biāo)準(zhǔn)中引入了 rest 參數(shù)（形式為…變量名），用于獲取函數(shù)的多余參數(shù)。rest 參數(shù)搭配的變量是一個(gè)數(shù)組，該變量將多余的參數(shù)放入數(shù)組中。非常適合處理變長參數(shù)的情況。

Rest就是為解決傳入的參數(shù)數(shù)量不一定，它表示將多余的參數(shù)接受并放到一個(gè)數(shù)組里； Rest參數(shù) 本身就是數(shù)組，數(shù)組的相關(guān)的方法都可以用。

可變參數(shù)的實(shí)現(xiàn)語法：

function f(a, b, ...theArgs) {
  // ...
}

• theArgs以“...”開頭，它是一個(gè)數(shù)組，它的值來自于實(shí)際調(diào)用者傳入[0,theArgs.length)  (索引的范圍：0到theArgs.length-1)

注意：rest 參數(shù)之后不能再有其他參數(shù)（即只能是最后一個(gè)參數(shù)），否則會(huì)報(bào)錯(cuò)。

function f(arg1, ...rest, arg2) { // arg2 after ...rest ?!
  // error
}

區(qū)分rest參數(shù)和 參數(shù)（arguments）對(duì)象

• rest參數(shù)不會(huì)為每個(gè)變量給一個(gè)單獨(dú)的名稱，參數(shù)對(duì)象包含所有參數(shù)傳遞給函數(shù)

• 參數(shù)對(duì)象不是真正的數(shù)組，rest參數(shù)是真實(shí)的數(shù)組實(shí)例。例如數(shù)組sort、map、forEach、pop的方法都可以直接使用

• 參數(shù)對(duì)象有他自己額外的特性（例如callee 屬性）

Rest參數(shù)的引入減少樣式代碼

//以前函數(shù)
function f(a, b) {
  var args = Array.prototype.slice.call(arguments, f.length);
 
  // …
}
 
// 等效于現(xiàn)在
 
function f(a, b, ...args) {
  
}

Rest參數(shù)可以被解構(gòu)（通俗一點(diǎn)，將rest參數(shù)的數(shù)據(jù)解析后一一對(duì)應(yīng)）不要忘記參數(shù)用[] 括起來，因?yàn)樗鼣?shù)組嘛

function f(...[a, b, c]) {
  return a + b + c;
}
 
f(1)          //NaN 因?yàn)橹粋鬟f一個(gè)值，其實(shí)需要三個(gè)值
f(1, 2, 3)    // 6
f(1, 2, 3, 4) // 6 (第四值沒有與之對(duì)應(yīng)的變量名)

示例

1、計(jì)算參數(shù)和

function sumAll(...args) { // args 是數(shù)組的名稱
  let sum = 0;
 
  for (let arg of args) sum += arg;
 
  return sum;
}
 
console.log( sumAll(1) ); // 1
console.log( sumAll(1, 2) ); // 3
console.log( sumAll(1, 2, 3) ); // 6

2、每個(gè)參數(shù)乘以2

function multiply(multiplier, ...theArgs) {
  return theArgs.map(function(element) {
    return multiplier * element;
  });
}
 
var arr = multiply(2, 1, 2, 3); 
console.log(arr); // [2, 4, 6]

3、排序

function sortRestArgs(...theArgs) {
  var sortedArgs = theArgs.sort();
  return sortedArgs;
}
//好像一位和兩位混合不能進(jìn)行排序，這需要看一下為甚？主要第一個(gè)為主
console.log(sortRestArgs(5, 3, 7, 1)); // shows 1, 3, 5, 7

對(duì)比：參數(shù)對(duì)象arguments不能排序

function sortArguments() {
  //arguments是參數(shù)對(duì)象不能直接使用sort()方法，因?yàn)椴皇菙?shù)組實(shí)例，需要轉(zhuǎn)換
  var sortedArgs = arguments.sort(); 
  return sortedArgs; // this will never happen
}
 
// 會(huì)拋出類型異常，arguments.sort不是函數(shù)
console.log(sortArguments(5, 3, 7, 1));

讀到這里，這篇“JavaScript函數(shù)怎么實(shí)現(xiàn)可變參數(shù)”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。