[js高手之路] es6系列教程 - 函数的默认参数详解
2017-08-06 20:21
806 查看
在ES6之前,我们一般用短路表达式处理默认参数
短路表达式(就是上例中的 || )的运算规则是:
var res = a || 20; 如果a是true 就返回a, 如果a是false就返回20;
上述例子中, 第八行代码,本意是输出0, 0, 结果0被当做false, 在传递参数0的时候,输出了后面的默认值。为了严谨,我们可以用undefined判断,如下:
上述例子默认参数是以前的做法,而es6,提供了类似php的函数默认参数语法.
默认参数就是在形式参数后面给他赋一个默认的值.
默认参数对arguments会用影响吗?
在es5的非严格模式下,参数的值如果在函数中被修改了,同样会影响(同步)到arguments对象,所以上述结果都是true.
严格模式就是在js代码的最上方加上" use strict", 非严格模式自然就是没有这行代码
如果使用严格模式,参数的值修改之后,就不会影响(同步)到arguments对象
而在采用了默认参数之后,在es6中,不管是否启用严格模式,arguments对象一直保存的是函数调用时候传递的参数
默认参数,还可以使用表达式; 允许把前面的参数值赋值给后面的参数, 但是不能把后面的参数赋值给前面的参数
function show( a, b ){ var a = a || 10; var b = b || 20; console.log( a, b ); } show( 100, 200 ); //100, 200 show(); //10, 20 show( 0, 0 ); // 10, 20, 0会被当做false
短路表达式(就是上例中的 || )的运算规则是:
var res = a || 20; 如果a是true 就返回a, 如果a是false就返回20;
上述例子中, 第八行代码,本意是输出0, 0, 结果0被当做false, 在传递参数0的时候,输出了后面的默认值。为了严谨,我们可以用undefined判断,如下:
function show( a, b ){ var a = typeof a !== 'undefined' ? a : 10; var b = typeof b !== 'undefined' ? b : 20; console.log( a, b ); } show( 100, 200 ); //100,200 show( 0, 0 ); //0,0
上述例子默认参数是以前的做法,而es6,提供了类似php的函数默认参数语法.
function show( name = 'ghostwu', age = 22, sex = 'man' ){ console.log( name, age, sex ); } show(); //ghostwu, 22, man 使用name, age, sex的默认参数 show( 'zhangsan' );//zhangsan, 22, man 使用age和sex的默认参数 show( 'zhangsan', 30 );//zhangsan, 30, man 使用sex的默认参数 show( 'zhangsan', 40, '男' ); //zhangsan, 40, 男 不使用默认参数
默认参数就是在形式参数后面给他赋一个默认的值.
function show( name, age = 22, sex ){ console.log( name, age, sex ); } //函数在没有传值得时候,默认为undefined show();//undefined,22,undefined 使用name,age,sex的默认参数 //函数显示的传递undefined,相当于没有传递参数,所以age用默认值22 show( undefined, undefined, undefined ); //undefined,22,undefined //函数传递null的时候,不会等于undefined,相当于传null值, 会把age的默认值覆盖 show( undefined, null, undefined ); //undefined, null, undefined
默认参数对arguments会用影响吗?
function show( name, age ){ console.log( name == arguments[0] ); //true console.log( age == arguments[1] ); //true name = 'zhangsan'; age = 30; console.log( name == arguments[0] ); //true console.log( age == arguments[1] ); //true } show( 'ghostwu', 22 );
在es5的非严格模式下,参数的值如果在函数中被修改了,同样会影响(同步)到arguments对象,所以上述结果都是true.
严格模式就是在js代码的最上方加上" use strict", 非严格模式自然就是没有这行代码
如果使用严格模式,参数的值修改之后,就不会影响(同步)到arguments对象
"use strict"; function show( name, age ){ console.log( name == arguments[0] ); //true console.log( age == arguments[1] ); //true name = 'zhangsan'; age = 30; console.log( name, age, arguments[0], arguments[1] ); //zhangsan, 30, ghostwu, 22 console.log( name == arguments[0] ); //false console.log( age == arguments[1] ); //false } show( 'ghostwu', 22 );
而在采用了默认参数之后,在es6中,不管是否启用严格模式,arguments对象一直保存的是函数调用时候传递的参数
function show( name, age = 22 ){ console.log( arguments.length ); //1 console.log( name === arguments[0] ); //true console.log( age, arguments[1] ); //22, undefined console.log( age === arguments[1] ); //false name = 'zhangsan'; age = 30; console.log( name, age, arguments[0], arguments[1] );//zhangsan, 30, ghostwu, undefined console.log( name == arguments[0] ); //false console.log( age == arguments[1] ); //false } show( 'ghostwu' );
默认参数,还可以使用表达式; 允许把前面的参数值赋值给后面的参数, 但是不能把后面的参数赋值给前面的参数
function getVal(){ return 10; } function add( a, b = getVal() ){ return a + b; } //相当于 a = 100, b = 200 console.log( add( 100, 200 ) ); //300 //相当于 a = 100, b没有传值, 采用getVal()的返回值10 console.log( add( 100 ) ); //110
let count = 10; function getVal(){ return count++; } function add( a, b = getVal() ){ return a + b; } console.log( add( 100, 200 ) ); //300 //count是全局变量,下面这行代码执行完后 count = 11 console.log( add( 100 ) ); //110 //相当于a = 100, b = 11 console.log( add( 100 ) ); //111
function add( a, b = a){ return a + b; } //a = 10 b = 10(a的值) console.log( add( 10 ) ); //20 //a = 10 b = 10(传给b的值) console.log( add( 10, 10 ) ); //20
function getVal( val ){ return val + 10; } function add( a, b = getVal( a ) ){ return a + b; } //a = 10, b = 20 getVal()的返回值 console.log( add( 10 ) ); //30 //a = 10, b = 30 console.log( add( 10, 30 ) ); //40
function add( a = b, b ){ return a + b; } // a = 10 b = 20 console.log( add( 10, 20 ) ); //30 //不能把后面的参数赋给前面的参数 console.log( add( undefined, 20 ) ); //报错
相关文章推荐
- [js高手之路] es6系列教程 - 函数的默认参数详解
- [js高手之路] es6系列教程 - 箭头函数详解
- [js高手之路] es6系列教程 - 箭头函数详解
- [js高手之路] es6系列教程 - 迭代器与生成器详解
- [js高手之路] es6系列教程 - 解构详解
- [js高手之路] es6系列教程 - 不定参数与展开运算符(...)
- [js高手之路] es6系列教程 - promise常见用法详解(resolve,reject,catch,then,all,race)
- [js高手之路] es6系列教程 - 迭代器,生成器,for...of,entries,values,keys等详解
- [js高手之路] es6系列教程 - Set详解与抽奖程序应用实战
- [js高手之路] es6系列教程 - var, let, const详解
- [js高手之路] es6系列教程 - 解构详解
- [js高手之路] es6系列教程 - 对象功能扩展详解
- [js高手之路] es6系列教程 - 对象功能扩展详解
- [js高手之路] es6系列教程 - Map详解以及常用api
- [js高手之路] es6系列教程 - 不定参数与展开运算符(...)
- [js高手之路] es6系列教程 - 新的类语法实战选项卡
- [js高手之路] es6系列教程
- [js高手之路] es6系列教程 - new.target属性与es5改造es6的类语法
- [js高手之路] es6系列教程 - var, let, const详解
- [js高手之路] html5 canvas系列教程 - 状态详解(save与restore)