[原创] 码路工人
大家好，这里是码路工人有力量，我是码路工人，你们是力量。
今天总结一下 ES6 中跟参数相关的内容。
欢迎补充斧正、留言交流。
让我们互相学习一起进步。
-
1. ES6 参数默认值（非必需参数/可选参数）
在 ES6 之前，函数的参数是无法设默认值的，聪明的人们当然有变通的方式，通过判断来参在函数刚开始给它赋上预想的初始值。具体在这篇里有介绍。
扩展阅读： [ES5 中参数默认值的手动实现][ES5Parameter]
到了 ES6，就可以愉快地设定参数默认值了。在下面的
defaultParamInEnd函数中，用age = 18来设了默认值。/* eg.0
* set default value for parameters
*/
//------------------------------------------------- const defaultParamInEnd = function(name, age = 18) {
console.log(`name: ${name} -- age: ${age}`)
} defaultParamInEnd("Coder Power")
// name: Coder Power -- age: 18 defaultParamInEnd("Coder Power", 32)
// name: Coder Power -- age: 32 //-------------------------------------------------上面的例子中，设默认值放在了末尾，也是我们 CSharper 惯用的方式，当多个参数有默认值时也是连续地放在尾部。
C#中不允许设默认值的参数出现在中间或者不连续，所有可选参数必须放在必需参数的后面。那
js中可不可以，带默认值的参数（也就是非必须参数），不在最后的位置呢？下面例子中我们来试一下。
```javascript
/* eg.1
* default value of parameters
*/
//-------------------------------------------------
const defaultParamInCenter = function(name, age = 18, gender) {
console.log(` name: ${name} -- age: ${age} -- gender: ${gender}`)
}
defaultParamInCenter("Coder Power", undefined, "male")
// name: Coder Power -- age: 18 -- gender: male
defaultParamInCenter("Coder Power", null, "male")
// name: Coder Power -- age: null -- gender: male
//-------------------------------------------------
```
结果显示，非必需参数可以出现在中间位置（后面再跟有必需参数）。
注意在传值上还有以下区别：
- 当我们给带默认值的形参`age`传一个`undefined`的时候，函数里得到了默认值`18`;
- 而当我们传`null`的时候，函数里就没有得到默认值，而是`null`了。
建议在定义函数时还是将非必需参数写在最后，设默认值本身就是为了调用时方便，这样就不必为了凑数去传一个`undefined`，直接不传才是非必须参数设计的初衷。
-
2. 剩余操作符语法获取剩余参数(Rest operator syntax)
...(
...既是剩余操作符语法又是展开操作符语法Spread operator syntax，这个另做介绍)/* eg.2
* rest parameters
*/
//------------------------------------------------- function restParams(name, ...other) {
console.log(`name: ${name}`)
console.log(`other: ${other}`)
} restParams("Coder Power", 18, "male")
// name: Coder Power
// other: 18,male //-------------------------------------------------从上面的打印信息中
other: 18,male能够看出，other里放了两个值，也就是剩下的两个参数的值都被它自己接收了。而如果没有剩余参数操作符语法，它肯定还是只能接收一个值（也就是第二个参数的值）。这里码路工人认为可以这么理解：
...首先会把它后面传来的参数收集起来，相当于放进[ ]数组，再充当展开操作符语法，相当于做了个拷贝塞到形参other里。
或者直接理解为把传过来的剩余参数用展开操作符语法塞到形参other里。- 脑洞一下：展开操作符语法可以不用在参数末尾吗？
/* eg.3
* rest parameter operator not in end
*/
//------------------------------------------------- function restParamsNotInEnd(...someParams, gender) {
console.log(`other: ${other}`)
console.log(`someParams: ${someParams}`)
} restParamsNotInEnd("Coder Power", 18, "male")
// SyntaxError: Rest parameter must be last formal parameter //-------------------------------------------------结果报错了，异常信息显示
剩余参数必须置于最后位置。
- 脑洞一下：展开操作符语法可以不用在参数末尾吗？
-
3. 参数的解构赋值（Destructuring Assignment）
如果一个方法处理内容简单仅仅用到了一个对象的个别属性，而接收的参数是一个完整的对象时，可以只解构获取想要的内容（也可以是全部属性）。
/* eg.4
* Destructuring Assignment of parameters
*/
//------------------------------------------------- const person = {
name: "Coder Power",
age: 18,
gender: "male",
mail: "test@abc.com",
sister: [
{
name: 'Emily',
age: 22,
gender: "female"
},
{
name: 'Lucy',
age: 15,
gender: "female"
}
],
address: "avenue city province country"
} function sayHello ({ name, age, birthday = 20101219 }) {
console.log(`Hello! I'am ${ name }, ${ age } years old.`)
} sayHello(person)
// Hello! I'am Coder Power, 18 years old. //-------------------------------------------------实际上
{ }解构不仅仅可以用在参数上，写在函数内也是一样的效果。
这同样还体现在后面要讲到的模块化导入 import的使用上。
注意：参数里的解构赋值不支持取别名，其它解构支持别名
-
但是可以赋默认值
/* eg.4
* default value for Destructuring Assignment of parameters
*/
//------------------------------------------------- function sayHelloAgain ({ name, age, birthday = 19860101 }) {
console.log(`Hello! I'am ${ name }, ${ age } years old.`)
console.log(`Birthday: ${ birthday}`)
} sayHelloAgain(person)
// Hello! I'am Coder Power, 18 years old.
// Birthday: 19860101 //-------------------------------------------------上面的示例中打印出了
birthday的默认值。
关于 ES6 中参数相关的内容就介绍到这里，其中用到的还没有讲到的特性，会在后续的文章中一一介绍。
欢迎谬误斧正和转发分享。还可以评论区留个言再走啊~
希望对你能有帮助，下篇再见。