今天我们要来介绍ES6新增的其余参数及预设参数!
其余参数rest parameter
…numbers可以让我们表示不确定数量的参数,并将其视为一个数组:
function getVal(…numbers){
console.log(numbers);
}
getVal(1,24,5,6,7);//[[1,24,5,6,7]]
function getVal(first,…numbers){
console.log(first,numbers);
}
getVal(1,24,5,6,7);//1 [24,5,6,7]
这边要注意到的是,只能在函式最后一个参数作使用,否则会报错误:
function getVal(…numbers,last){
console.log(numbers);
}
//SyntaxError: Rest parameter must be last formal parameter
可能会有人认为我用之前的arguments就好了,为什么要多学一个其余参数的用法?这边我们来列出两者的差异:
arguments是类数组,无法使用一般数组的方法像map、sort,
其余参数为数组则可以使用
arguments物件自身有额外的功能,例如callee属性(radiographersreporting)。
所以我们今天要写一个由大到小排列的函式,用其余参数就会轻松许多:
function mutilMax(…numbers){
var sorted = numbers.sort((a,b)=>b-a);
return sorted;
}
mutilMax(1,24,5,6,7);// [24,7,6,5,1]
如果用arguments需要先把它转成数组才能使用:
function mutilMax(){
var arr = Array.from(arguments);
var sorted = arr.sort((a,b)=>b-a);
return sorted;
}
mutilMax(1,24,5,6,7);
预设参数default parameter
有时候我们会希望函式传进来的参数是固定值,像是:
function personCheck(name,check){
return name+“”+check;
}
personCheck(“Ann”,“checked”);//“Ann checked”
personCheck(“Lia”,“checked”);//“Lia checked”
personCheck(“Una”,“checked”);//“Una checked”
这时候我们会作修改:
function personCheck(name,check){
check = typeof(check)===“undefined”?“checked“:check;
return name+“”+checked;
}
personCheck(“Ann”);//“Ann checked”
personCheck(“Una”);//“Una checked”
personCheck(“Jason”,“not here”);//“Jason not here”
这边看到的typeof(checked)===“undefined”?“checked“:checked代表如果今天没有传入参数checked会是undefined则预设为”checked“,否则回传传入参数。
但是这样还是很麻烦,能不能在精简写法呢?
幸好ES6提供了预设参数功能:
function personCheck(name,check =“checked”){
return name+“”+check;
}
personCheck(“Ann”);//“Ann checked”
personCheck(“Una”);//“Una checked”
personCheck(“Jason”,“not here”);//“Jason not here”
如果指定了一个值,预设值就会被覆盖。是不是方便很多了呢!
预设参数除了可以指派数字和字串,也能指派物件、数组设置函式:
function personCheck(name,check =“checked”,message = name+“”+check){
return message;
}
personCheck(“Una”);//“Una checked”
personCheck(“Jason”,“not here”);//“Jason not here”
但老实说,这程序的可读性实在不怎么好,所以要斟酌使用喔!