ES5和ES6中对函数设置默认参数的方法总结

ES5中设置默认参数的方法：
第一种方法：

function example(a,b){ 
  var a = arguments[0] ? arguments[0] : 1;//设置参数a的默认值为1 
  var b = arguments[1] ? arguments[1] : 2;//设置参数b的默认值为2 
  return a+b; 
  }

注意以上函数也可写作如下：

function example(){ 
  var a = arguments[0] ? arguments[0] : 1;//设置第一个参数的默认值为1 
  var b = arguments[1] ? arguments[1] : 2;//设置第二个参数的默认值为2 
  return a+b; 
} 

调用示例：

alert( example() ); //输出3 
alert( example(10) ); //输出12 
alert( example(10,20) ); //输出30 
alert( example(null,20) ); //输出20 

第二种方法：

function example(name,age){ 
  name=name||'貂蝉'; 
  age=age||21; 
  alert('你好！我是'+name+'，今年'+age+'岁。'); 
} 

该函数也可以写作如下：

function example(name,age){ 
  if(!name){name='貂蝉';} 
  if(!age){age=21;} 
  alert('你好！我是'+name+'，今年'+age+'岁。'); 
} 

调用示例：

example('王五');//输出：你好！我是王五，今年21岁。  
example('王五',30);//输出：你好！我是王五，今年30岁。  
example(null,30);//输出：你好！我是貂蝉，今年30岁。 

注意：前两种函数设置默认参数的方法有一个缺点，就是当参数赋值了，但赋值后，其对应的布尔值为false，则赋值不起作用。
如：

function fn(){
    // var a=arguments[0]||1;
    // var b=arguments[1]||2;
    var a=arguments[0]?arguments[0]:1;
    var b=arguments[1]?arguments[1]:2;
    console.log(a+b);
}
fn(0,0);//3
fn(null,3);//4
fn(undefined,3);//4
fn(undefined,null);//3
fn(false,3);//4
fn('',3);//4

针对该缺点，对函数进行改进：

function fn(a,b){
    // if(a===undefined){
    //     a=1;
    // }
    // if(b===undefined){
    //     b=2;
    // }
    a=arguments[0]===undefined?1:arguments[0];
    b=arguments[1]===undefined?2:arguments[1];

    console.log(a+b);
}
fn(0,0);//0
fn(null,5);//5
fn(undefined,5);//6
fn(undefined,null);//1
fn(false,5);//5
fn('',5);//5

ES6设置默认参数的方法：
ES6允许为函数的参数设置默认值，即直接写在参数定义的后边：

function log(x,y=1){
    console.log(x,y);
}
log(2,2);//2 2
log(2,null);//2 null
log(2,undefined);//2 1
log(2,false);// 2,false
log(2,0);//2 0
log(2,'');//2 ''

可以看到在ES6中设置默认参数和改进后的ES5的参数赋值效果是一样的。即只有在参数全等于undefined时，才取默认值。
ES6中设置默认参数的好处：
1、简洁
2、阅读代码的人可以立即知道哪些参数是可以省略的，不用查看函数体或文档；
3、有利于将来到的优化，即使未来的版本彻底拿掉了这个参数，也不会导致以前的代码无法运行。
在ES6设置默认参数的注意点：
1、参数变量是默认声明的，所以不能用let或const再次声明；

function foo(x=5){
    let x=4;//Error
    const x=3;//Error
}

2、使用默认参数时，函数不能再有同名参数

function fn(x=2,x,y){
    console.log(x);
}

SyntaxError: Duplicate parameter name not allowed in this context

3、参数默认值不是传值的，而是每次都重新计算默认值表达式的值。也就是说，参数默认值是惰性求值的

let x=99;
function fn(y=x+1){
    console.log(y);
}
fn();//100
x=100;
fn();//101

参数y的默认值为x+1，每次调用函数fn，都会重新计算x+1

参数默认值可以和解构赋值结合起来使用：

function fn({x,y=5}){
    console.log(x,y);
}
//fn();//Cannot match against 'undefined' or 'null'.
fn({});//undefined 5
fn({x:1,y:0});//1,0
fn({x:1,y:undefined});//1,5
fn({x:1,y:null});//1,null

注意，只有参数的变量是一个对象时，解构赋值才能成功。

注意：设置了默认参数后，函数的length为没有设置默认参数的参数的个数。