[js高手之路] es6系列教程 - 函数的默认参数详解

在ES6之前，我们一般用短路表达式处理默认参数

1         function show( a, b ){
2             var a = a || 10;
3             var b = b || 20;
4             console.log( a, b );
5         }
6         show( 100, 200 ); //100, 200
7         show(); //10, 20
8         show( 0, 0 ); // 10, 20, 0会被当做false

短路表达式(就是上例中的 || )的运算规则是:

var res = a || 20;   如果a是true 就返回a, 如果a是false就返回20;

上述例子中， 第八行代码，本意是输出0, 0, 结果0被当做false,  在传递参数0的时候，输出了后面的默认值。为了严谨，我们可以用undefined判断，如下:

1         function show( a, b ){
2             var a = typeof a !== 'undefined' ? a : 10;
3             var b = typeof b !== 'undefined' ? b : 20;
4             console.log( a, b );
5         }
6         show( 100, 200 ); //100,200
7         show( 0, 0 ); //0,0

上述例子默认参数是以前的做法，而es6，提供了类似php的函数默认参数语法.

1        function show( name = 'ghostwu', age = 22, sex = 'man' ){
2            console.log( name, age, sex );
3        } 
4        show(); //ghostwu, 22, man 使用name, age, sex的默认参数
5        show( 'zhangsan' );//zhangsan, 22, man 使用age和sex的默认参数
6        show( 'zhangsan', 30 );//zhangsan, 30, man 使用sex的默认参数
7        show( 'zhangsan', 40, '男' ); //zhangsan, 40, 男  不使用默认参数

默认参数就是在形式参数后面给他赋一个默认的值.

 1     function show( name, age = 22, sex ){
 2         console.log( name, age, sex );
 3     }
 4     //函数在没有传值得时候，默认为undefined
 5     show();//undefined,22,undefined  使用name,age,sex的默认参数
 6 
 7     //函数显示的传递undefined,相当于没有传递参数，所以age用默认值22
 8     show( undefined, undefined, undefined ); //undefined,22,undefined
 9 
10     //函数传递null的时候,不会等于undefined,相当于传null值, 会把age的默认值覆盖
11     show( undefined, null, undefined ); //undefined, null, undefined

默认参数对arguments会用影响吗？

1         function show( name, age ){
2             console.log( name == arguments[0] ); //true
3             console.log( age == arguments[1] ); //true
4             name = 'zhangsan';
5             age = 30;
6             console.log( name == arguments[0] ); //true
7             console.log( age == arguments[1] ); //true
8         }
9         show( 'ghostwu', 22 );

在es5的非严格模式下，参数的值如果在函数中被修改了，同样会影响(同步)到arguments对象，所以上述结果都是true.

严格模式就是在js代码的最上方加上" use strict", 非严格模式自然就是没有这行代码

如果使用严格模式，参数的值修改之后，就不会影响(同步)到arguments对象

 1         "use strict";
 2         function show( name, age ){
 3             console.log( name == arguments[0] ); //true
 4             console.log( age == arguments[1] ); //true
 5             name = 'zhangsan';
 6             age = 30;
 7             console.log( name, age, arguments[0], arguments[1] ); //zhangsan, 30, ghostwu, 22
 8             console.log( name == arguments[0] ); //false
 9             console.log( age == arguments[1] ); //false
10         }
11         show( 'ghostwu', 22 );

而在采用了默认参数之后，在es6中，不管是否启用严格模式，arguments对象一直保存的是函数调用时候传递的参数

 1         function show( name, age = 22 ){
 2             console.log( arguments.length ); //1
 3             console.log( name === arguments[0] ); //true
 4             console.log( age, arguments[1] ); //22, undefined
 5             console.log( age === arguments[1] ); //false
 6 
 7             name = 'zhangsan';
 8             age = 30;
 9             console.log( name, age, arguments[0], arguments[1] );//zhangsan, 30, ghostwu, undefined
10             console.log( name == arguments[0] ); //false
11             console.log( age == arguments[1] ); //false
12         }
13         show( 'ghostwu' );

默认参数，还可以使用表达式； 允许把前面的参数值赋值给后面的参数，  但是不能把后面的参数赋值给前面的参数

 1         function getVal(){
 2             return 10;
 3         }
 4         function add( a, b = getVal() ){
 5             return a + b;
 6         }
 7 
 8         //相当于 a = 100, b = 200
 9         console.log( add( 100, 200 ) ); //300
10         //相当于 a = 100, b没有传值, 采用getVal()的返回值10
11         console.log( add( 100 ) ); //110

 1         let count = 10;
 2 
 3         function getVal(){
 4             return count++;
 5         }
 6 
 7         function add( a, b = getVal() ){
 8             return a + b;
 9         }
10 
11         console.log( add( 100, 200 ) ); //300
12         //count是全局变量,下面这行代码执行完后 count = 11
13         console.log( add( 100 ) ); //110
14         //相当于a = 100, b = 11
15         console.log( add( 100 ) ); //111

1         function add( a, b = a){
2             return a + b;
3         }
4         //a = 10 b = 10(a的值)
5         console.log( add( 10 ) ); //20
6         //a = 10 b = 10(传给b的值)
7         console.log( add( 10, 10 ) ); //20

 1         function getVal( val ){
 2             return val + 10;
 3         }
 4 
 5         function add( a, b = getVal( a ) ){
 6             return a + b;
 7         }
 8 
 9         //a = 10, b = 20 getVal()的返回值
10         console.log( add( 10 ) ); //30
11         //a = 10, b = 30
12         console.log( add( 10, 30 ) ); //40

1         function add( a = b, b ){
2             return a + b;
3         }
4         // a = 10 b = 20
5         console.log( add( 10, 20 ) ); //30
6         //不能把后面的参数赋给前面的参数
7         console.log( add( undefined, 20 ) ); //报错