ES6中函数的默认参数与剩余参数

函数的默认参数

在ES6之前，我们编写的函数参数是没有默认值的，所以我们在编写函数时，如果有下面的需求

• 传入了参数，那么使用传入的参数
• 没有传入参数，那么使用一个默认值

ES5及之前

之前我们是这么做的。

function foo(m,n){
    m = m || 'aaa'
    n = n || 'bbb'
    console.log(m,n);
}

foo(0) //aaa bbb

这种写起来很麻烦，而且代码阅读性比较差，更糟糕的是它有bug。关于bug:比如传0进去，它会默认当初false，指向或后面的表达式，这里就还是aaa。

ES6的方式

function foo2(m="aaa",n="bbb"){
    console.log(m,n);
}

foo2() //aaa bbb

给对象传默认值

function printInfo({name,age} = {name:'hgx',age:21}){
    console.log(name,age);
}

printInfo({name:'kobe',age:40}) //kobe 40

//另外一种写法
function printInfo1({name = 'hgx',age = 21}={}){
    console.log(name,age);
}
printInfo1() //hgx 21

注意点1：有默认值的形参最好放最后

//注意点：有默认值的形参最好放到最后
function bar(x,y,z = 20){
    console.log(x,y,z);
}
bar(10,20)

注意点2：有默认值的length属性

function baz(x,y,z=30,m,n){
    console.log(x,y,z,m,n);
}

//有默认值开始，一直往后，都不会计算入length
console.log(baz.length); //2

函数的剩余参数

ES6中引用了rest parameter，可以将不定数量的参数放入到一个数组中。如果最后一个参数是 … 为前缀的，那么它会将剩余的参数放到该参数中，并且作为一个数组。

剩余参数与arguments的区别

剩余参数只包含那些没有对应形参的实参，而arguments 对象包含了传给函数的所有实参。arguments对象不是一个真正的数组（它是一个维数组），而rest参数是一个真正的数组，可以进行数组的所有操作。arguments是早期的ECMAScript中为了方便去获取所有的参数提供的一个数据结构，而rest参数是ES6中提供 并且希望以此来替代arguments的。

• 注意：剩余参数必须放到形参的最后。

//函数的剩余参数，剩余参数是用来替换arguments的。
//这...和展开运算符没关系
function foo(m,n,...args){ //剩余参数必须放最后
    console.log(m,n);
    console.log(args); //[40,50,60]

}
foo(20,30,40,50,60)

来自本人掘金文章：https://juejin.cn/post/7112814156360712200/