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

迷南。 2022-06-16 11:13 354阅读 0赞

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

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

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

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

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

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