学JS的心路历程-函式（六）其余参数及预设参数

今天我们要来介绍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”

但老实说，这程序的可读性实在不怎么好，所以要斟酌使用喔！

来源：（http://www.pamaj-appareL.com）