主要讲解:
1. 参数默认值
2. 参数默认值位置
3. 函数的length属性
4. "参数"作用域
1.参数默认值
function log(x,y='babe'){
console.log(x,y);
}
log(1,'')
//1 ""
log(1,[])
//1 []
log(1,0)
//1 0
log(1,false)
//1 false
log(1,null)
//1 null
-----------------------------
log(1)
//1 "babe"
log(1,undefined)
//1 "babe"
上面的代码完全等价于:
function log(x,y){
if(y === undefined){
y = 'babe';
}
console.log(x,y);
}
而es5中常用的默认值赋值方式
function log(x,y){
y = y || 'babe';
// 此时y会进行隐式转换 0/''/[]/false 的情况都会被赋值为'babe',不过如果需求就是如此,那还是用此种方式书写
console.log(x,y);
}
**可以发现一个问题ES6之后很多值比较都是完全等于undefined的情况,
不像es5,''/[]/0 隐式转换为 false , null == undefined //true
----一些美丽的瑕疵都被遮掉了,以后代码就显得一览无遗了
注意:es6中进行过内部包装转换的代码参数定义是采用let,故同一层级的作用域内不要出现多次声明,会报错
用途:解构赋值 关键就是看变量个数 ,{...} 括起来的其实是一个参数,在后面进行解构了而已
function log({user,pwd='123456'}={}){
console.log(`user: ${user},password: ${pwd}`);
}
log4()
//user: undefined,password: 123456
log4({user:'babe'})
//user: babe,password: 123456
阮老师书中说的练习可以这么理解:
function m1({x = 0, y = 0} = {}) {
return [x, y];
}
function m2({x, y} = { x: 0, y: 0 }) {
return [x, y];
}
//m1中不仅对函数参数给了默认值{},而且对待解构的x,y分别赋予了默认值0
//m2中仅仅对函数参数给了默认值{x: 0, y: 0 } ,那这就仅在函数调用时未传参或者传undefined进去的时候,使用了默认值
2.参数默认值位置
通常写法是置于函数参数的最后,可以放中间,这样一来意义就不大了,还是要手动传进来(想使用默认值就得传undefined)
function log(user='babe',pwd){
console.log(`user: ${user},password: ${pwd}`);
}
log(undefined,123)
//user: babe,password: 123
//可以发现这种写法就毫无意义了,方法扩展性为0。当然也不会有人这样写代码了
3.函数的length属性
指代函数语气传入的参数个数 -- 不包括指定了默认值的参数(由于正常写法默认参数置于最后,length属性也仅遍历到默认参前一个为止)
function log(user='babe',pwd){
console.log(`user: ${user},password: ${pwd}`);
}
log.length //0
function log(pwd,user='babe'){
console.log(`user: ${user},password: ${pwd}`);
}
log.length //1
4."参数"作用域
es5中函数参数的作用域与函数体作用域处于同一层级,es6中设置了默认值之后,会另外创建一层作用域,位于函数体上面,参数作用域中不存在的变量会往上一层找寻,直至找到window下
如果bug请指正,Thanks♪(・ω・)ノ!
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。