函数扩展

函数参数的默认值

基本用法

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的默认值依赖于x

  let 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、某个参数指定默认值之后，指定默认值的参数之后的所有参数不计入length

3、结构解耦的方式传参 不计入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