js是弱類型語言,不能像C#那樣使用param關鍵字來聲明形參是一個可變參數(shù)。那么js中,如何實現(xiàn)這種可變參數(shù)呢?下面本篇文章就來聊聊JavaScript函數(shù)可變參數(shù)的實現(xiàn)方法,希望對大家有所幫助!
JS可變參數(shù)的實現(xiàn)一:arguments
什么是arguments?怎么實現(xiàn)可變參數(shù)?
arguments 是一個對應于傳遞給函數(shù)的參數(shù)的類數(shù)組對象。
在ES5中可以使用arguments對象實現(xiàn)可變參數(shù)。
arguments對象的長度是由實參個數(shù)而不是形參個數(shù)決定的。形參是函數(shù)內部重新開辟內存空間存儲的變量,但是其與arguments對象內存空間并不重疊。對于arguments和值都存在的情況下,兩者值是同步的,但是針對其中一個無值的情況下,對于此無值的情形值不會得以同步。
<script> function dynamicArgs() { var info = "今日簽到的學生有:"; for (let i = 0; i < arguments.length ; i ++) { if (i > 0) { info += ","; } info += arguments[i]; } console.log(info); } dynamicArgs("張三", "李四"); dynamicArgs("張三", "李四", "王五", "馬六"); dynamicArgs(["張三", "李四", "王五", "馬六", "jack", "rose"]); </script>
-
參數(shù)不確定,那干脆不寫了。
-
調用時可以寫N多個參數(shù),也可以直接傳個數(shù)組。
執(zhí)行效果:
總結:
1、從函數(shù)定義上可以看出,函數(shù)中如果使用可變參數(shù) arguments ,則不需要寫形參
2、在調用函數(shù)時,可以直接向函數(shù)中傳遞多個實參
arguments 對象是所有(非箭頭)函數(shù)中都可用的局部變量。你可以使用arguments 對象在函數(shù)中引用函數(shù)的參數(shù)。此對象包含傳遞給函數(shù)的每個參數(shù),第一個參數(shù)在索引0處。例如,如果一個函數(shù)傳遞了三個參數(shù),你可以以如下方式引用他們:
arguments[0] arguments[1] arguments[2]
參數(shù)也可以被設置:
arguments[0] = 'value';
arguments
是一個對象,
不是一個 Array
。它類似于Array
,但除了length屬性和索引元素之外沒有任何Array
屬性。例如,它沒有 pop 方法。但是它可以被轉換為一個真正的Array
:
所以經常能看到這樣的代碼:
// 由于arguments不是 Array,所以無法使用 Array 的方法,所以通過這種方法轉換為數(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:指向當前執(zhí)行的函數(shù)(在 嚴格模式 下,第5版 ECMAScript (ES5) 禁止使用
arguments.callee()
) - argunments.length:指向傳遞給當前函數(shù)的參數(shù)數(shù)量
- arguments.caller:已移除
arguments與剩余參數(shù)、默認參數(shù)和解構賦值參數(shù)的結合使用
1)在嚴格模式下,剩余參數(shù)、默認參數(shù)和解構賦值參數(shù)的存在不會改變 arguments
對象的行為,但是在非嚴格模式下就有所不同了
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)當非嚴格模式中的函數(shù)沒有包含剩余參數(shù)、默認參數(shù)和解構賦值,那么arguments
對象中的值會跟蹤參數(shù)的值(反之亦然)??聪旅娴拇a:
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ù)的實現(xiàn)二:rest 參數(shù)(…)
在ES6標準中引入了 rest 參數(shù)(形式為…變量名
),用于獲取函數(shù)的多余參數(shù)。rest 參數(shù)搭配的變量是一個數(shù)組,該變量將多余的參數(shù)放入數(shù)組中。非常適合處理變長參數(shù)的情況。
Rest就是為解決傳入的參數(shù)數(shù)量不一定,它表示將多余的參數(shù)接受并放到一個數(shù)組里; Rest參數(shù) 本身就是數(shù)組,數(shù)組的相關的方法都可以用。
可變參數(shù)的實現(xiàn)語法:
function f(a, b, ...theArgs) { // ... }
-
theArgs以“…”開頭,它是一個數(shù)組,它的值來自于實際調用者傳入[0,theArgs.length) (索引的范圍:0到theArgs.length-1)
注意:rest 參數(shù)之后不能再有其他參數(shù)(即只能是最后一個參數(shù)),否則會報錯。
function f(arg1, ...rest, arg2) { // arg2 after ...rest ?! // error }
區(qū)分rest參數(shù)和 參數(shù)(arguments)對象
-
rest參數(shù)不會為每個變量給一個單獨的名稱,參數(shù)對象包含所有參數(shù)傳遞給函數(shù)
-
參數(shù)對象不是真正的數(shù)組,rest參數(shù)是真實的數(shù)組實例。例如數(shù)組sort、map、forEach、pop的方法都可以直接使用
-
參數(shù)對象有他自己額外的特性(例如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ù)可以被解構(通俗一點,將rest參數(shù)的數(shù)據(jù)解析后一一對應)不要忘記參數(shù)用[] 括起來,因為它數(shù)組嘛
function f(...[a, b, c]) { return a + b + c; } f(1) //NaN 因為只傳遞一個值,其實需要三個值 f(1, 2, 3) // 6 f(1, 2, 3, 4) // 6 (第四值沒有與之對應的變量名)
示例
1、計算參數(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、每個參數(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; } //好像一位和兩位混合不能進行排序,這需要看一下為甚?主要第一個為主 console.log(sortRestArgs(5, 3, 7, 1)); // shows 1, 3, 5, 7
對比:參數(shù)對象arguments不能排序
function sortArguments() { //arguments是參數(shù)對象不能直接使用sort()方法,因為不是數(shù)組實例,需要轉換 var sortedArgs = arguments.sort(); return sortedArgs; // this will never happen } // 會拋出類型異常,arguments.sort不是函數(shù) console.log(sortArguments(5, 3, 7, 1));
【