函数扩展
函数参数的默认值
基本用法
function log(x,y){
y = y || 'cc';
console.log(x,y)
}
log('aa',false); // 'aa' 'cc'
log('aa',''); // 'aa' 'cc'
log('aa','bb'); // 'aa' 'bb'
当
y的值为false或者‘’时，其实还是应该输出fasle和’'，正确的判断方式应该如下
function log(x,y){
// 判断y的值是否被定义，
if(typeof y == 'undefined'){
y = 'cc'
}
console.log(x,y)
}
log('aa'); // 'aa' 'cc'
log('aa',false); // 'aa' false
log('aa',''); // 'aa' ''
log('aa','bb'); // 'aa' 'bb'
更为简单的
es6写法
function log(x,y = 'cc'){
console.log(x,y)
}
log('aa'); // 'aa' 'cc'
log('aa',false); // 'aa' false
log('aa',''); // 'aa' ''
log('aa','bb'); // 'aa' 'bb'
function Point(x=0,y=0){
this.x = x;
this.y = y;
}
注意点：
-
变量是默认声明的，不可以用
let或者const再次声明function aaaa(x = 5){ let x = 1; const x = 1; } // Identifier 'x' has already been declared x变量已经被声明过了 -
使用参数默认值时，不允许有同名的参数，否则报错。如果不使用参数默认值，不会报错，但我不会这么做
function bbbb(x,x,y=5){ } // Duplicate parameter name not allowed in this context 相同的参数名字不允许出现 -
参数默认值是惰性的，也就是说参数的默认值每次都会重新计算，如下
a的默认值依赖于xlet x = 99; function cccc(a = x + 1){ console.log(a); } cccc(); // 100 x = 100; cccc(); // 101
与解构赋值默认值结合使用
function dddd({x,y=5}){
console.log(x,y);
}
dddd({}); // undefined 5
dddd({x:1}); // 1 5
dddd({x:1,y:2}); // 1 2
dddd({y:3}); // undefined 3
dddd({z:3}); // undefined 5
dddd(); // Cannot destructure property 'x' of 'undefined'
以下写法会报错，因为第二个参数并未设置默认值，所以调用传参必须有两个参数，缺少一个就会报错。
function fetch(url,{body='',method="GET",headers={}}){
console.log(method)
}
fetch('www.baidu.com',{}) // get
fetch('www.baidu.com') // 报错
为第二个参数设置了默认值就不会报错，且设置默认值
function fetch(url,{body='',method="GET",headers={}} = {}){
console.log(method)
}
fetch('www.baidu.com',{}) // GET
fetch('www.baidu.com') // GET
fetch('www.baidu.com',{method:'POST'}) // POST
默认值的写法
区别：写法一中的函数参数的默认值是空对象，但是设置了对象解构赋值的默认值
写法二中的函数参数的默认值是一个有具体属性的对象，没有设置对象解构赋值的默认值
// 写法一
function eeee({x=0,y=0} = {}){
return [x,y]
}
// 写法二
function ffff({x,y} = {x:0,y:0}){
return [x,y]
}
// 都没有参数的情况
eeee(); // [0,0]
ffff(); // [0,0]
// x,y都有值
eeee({x:1,y:1}) // [1,1]
ffff({x:1,y:1}) // [1,1]
// x有值，y无值
eeee({x:3}) // [3,0]
ffff({x:3}) // [3,undefined]
// x，y都无值
eeee({}); // [0,0]
ffff({}); // [undefined,undefined]
// 参数键不一样
eeee({z:3}); // [0,0]
ffff({z:3}); // [undefined,undefined]
参数默认值的位置
如果尾部参数设置了默认值，那么可以省略，如果不是尾部参数设置了默认值，参数值省略就是undefined，也就是说参数是一一对应的。
// 第一个参数设置默认值
function gggg(x=1,y){
console.log(x,y);
}
gggg(); // 1 undefined
gggg(2); // 2 undefined
gggg(,1); // 报错
gggg(undefined, 3); // 1 3
// 第二个参数设置默认值
function hhhh(x,y=1){
console.log(x,y)
}
hhhh(); // undefined 1
hhhh(3); // 3 1
hhhh(undefined,3); // undefined 3
// 多个参数的情况
function iiii(x,y=5,z){
console.log(x,y,z)
}
iiii(); // undefined 5 undefined
iiii(1); // 1 5 undefined
iiii(1,2); // 1 2 undefined
iiii(1, ,3); // 报错
iiii(1,undefined ,3); // 1 5 3
设置默认值，只有参数值为undefined才会采用默认值，否则还是原参数值
function jjjj(x=5,y=6){
console.log(x,y)
}
jjjj(undefined,null); // 5 null
函数的length属性
length属性会返回没有指定默认值的参数个数。1、预期传入函数的参数个数。
2、某个参数指定默认值之后，指定默认值的参数之后的所有参数不计入
length3、结构解耦的方式传参 不计入
length
( function a(x) { } ).length // 1
( function a(x = 1) { } ).length // 0
( function a(x, y, z = 1) { } ).length // 1
( function a(x = 1, y, z) { } ).length // 0
( function a(...args) { } ).length // 0
作用域
设置默认参数时，参数会形成一个单独的作用域，初始化结束之后，作用域消失。
var x = 1;
function kkkk(x, y = x){
console.log(x, y)
}
kkkk(2); // 2 2
// 参数 y 的默认值为变量 x ，调用函数时，参数会形成一个单独的作用域，默认值变量 x 指向第一个参数 x ，不是全局变量 x 。
let a = 1;
function llll(b = a){
let a = 2;
console.log(b);
}
llll(); // 1
// 函数参数 y = x 形成一个单独的作用域，如果当前 x 没有定义，则会向上查找，找到全局变量 x 。函数体内部的 x 不会影响到默认值变量 x
较为复杂的例子
var x = 1;
function foo ( x, y=function(){x = 2}){
var x = 3;
y();
console.log(x);
}
foo() // 3
console.log(x); // 1
// 函数的参数第一个是 x ，第二个是 y ，默认值是一个匿名函数，两个参数构成一个作用域，且匿名函数内部的 x 指向第一个参数 x ，
// foo 函数内部重新定义了 x ，函数内部的 x 和参数的 x 不在一个作用域内，所以不是一个变量，输出为 3 ，全局的 x 是不会被影响的。
// 如果把 var 去了
var x = 1;
function foo ( x, y=function(){x = 2}){
x = 3;
y();
console.log(x);
}
foo() // 2
console.log(x); // 1
// 此时 foo 函数内部的 x 就指向了第一个参数 x 。
应用
-
利用参数默认值指定某个参数不得省略，否则抛出错误
function throwError(){ throw new Error('参数必须') } function mmmm(paramsMusted = throwError()){ return paramsMusted } mmmm(); // Error:参数必须 -
参数默认值设为undefined，表示参数可省略
function nnnn(x = undefined){ console.log(111) } nnnn(); // 111
