函数参数的默认值

  • A+
所属分类:ES 6 JavaScript Web

ES6 允许为函数的参数设置默认值,直接将默认值写在参数定义的后面。

一.函数参数默认值

1.基本使用

  • ES6 可以为函数的参数设置默认值。
    //普通函数
    function log(x, y = 'World') {
      console.log(x, y);
    }
    
    log('Hello') // Hello World
    log('Hello', 'China') // Hello China
    log('Hello', '') // Hello
    
    //构造函数
    function Point(x = 0, y = 0) {
      this.x = x;
      this.y = y;
    }
    
    const p = new Point();
    p // { x: 0, y: 0 }
    

①.特点 - ES6新特性,与ES5相比

  • 在ES5中参数是不可以赋默认值,若想实现相同效果,如下
    function log(x, y) {
      y = y || 'World';
      console.log(x, y);
    }
    
    log('Hello') // Hello World
    log('Hello', 'China') // Hello China
    log('Hello', '') // Hello World
    
  • 上述范例存在,''也会被判定为false错误,所以还需要判断一下类型
    if (typeof y === 'undefined') {
      y = 'World';
    }
    

②.特点 - 参数不可重新使用letconst重复声明

  • 参数变量是默认声明的,所以不能用let或const再次声明。
    // 不报错
    function foo(x, x, y) {
      // ...
    }
    
    // 报错
    function foo(x, x, y = 1) {
      // ...
    }
    // SyntaxError: Duplicate parameter name not allowed in this context
    

③.特点 - 与解构赋值默认值结合使用

  • 参数默认值可以与解构赋值的默认值,结合起来使用。
    //一. 未使用参数默认值只使用解构默认值
    function foo({x, y = 5}) {
      console.log(x, y);
    }
    
    foo({}) // undefined 5
    foo({x: 1}) // 1 5
    foo({x: 1, y: 2}) // 1 2
    foo() // TypeError: Cannot read property 'x' of undefined
    
    //二. 使用参数默认值和解构默认值
    //如果不提供参数,函数foo的参数默认为一个空对象。
    function foo({x, y = 5} = {}) {
      console.log(x, y);
    }
    
    foo() // undefined 5
    
  • 更多范例一
    //一. 只使用对象解构,会出现解构时无默认值报错
    function fetch(url, { body = '', method = 'GET', headers = {} }) {
      console.log(method);
    }
    
    fetch('http://example.com', {})
    // "GET"
    
    fetch('http://example.com')
    // 报错
    
    //二. 对象解构和参数默认值一起使用
    function fetch(url, { body = '', method = 'GET', headers = {} } = {}) {
      console.log(method);
    }
    
    fetch('http://example.com')
    // "GET"
    
  • 更多范例二
    // 写法一
    function m1({x = 0, y = 0} = {}) {
      return [x, y];
    }
    
    // 写法二
    function m2({x, y} = { x: 0, y: 0 }) {
      return [x, y];
    }
    
    //区别比较
    // 函数没有参数的情况
    m1() // [0, 0]
    m2() // [0, 0]
    
    // x 和 y 都有值的情况
    m1({x: 3, y: 8}) // [3, 8]
    m2({x: 3, y: 8}) // [3, 8]
    
    // x 有值,y 无值的情况
    m1({x: 3}) // [3, 0]
    m2({x: 3}) // [3, undefined]
    
    // x 和 y 都无值的情况
    m1({}) // [0, 0];
    m2({}) // [undefined, undefined]
    
    m1({z: 3}) // [0, 0]
    m2({z: 3}) // [undefined, undefined]
    

④.特点 - 参数的默认值位置

  • 非尾部的参数设置默认值,此参数是无法省略的。所以参数的默认值一般放置为尾参数。
    // 例一
    function f(x = 1, y) {
      return [x, y];
    }
    
    f() // [1, undefined]
    f(2) // [2, undefined])
    f(, 1) // 报错
    f(undefined, 1) // [1, 1]
    
    // 例二
    function f(x, y = 5, z) {
      return [x, y, z];
    }
    
    f() // [undefined, 5, undefined]
    f(1) // [1, 5, undefined]
    f(1, ,2) // 报错
    f(1, undefined, 2) // [1, 5, 2]
    
  • undefined会触发默认参数, null不会触发。
    function foo(x = 5, y = 6) {
      console.log(x, y);
    }
    
    foo(undefined, null)
    // 5 null
    

⑤.特点 - 参数默认值对函数length属性的影响

  • length属性的含义,计算此函数预期传入的参数个数。
  • 指定了默认值以后,函数的length属性,将返回没有指定默认值的参数个数。
    (function (a) {}).length // 1
    (function (a = 5) {}).length // 0
    (function (a, b, c = 5) {}).length // 2
    
  • rest 参数也不会计入length属性。
    (function(...args) {}).length // 0
    
  • length属性计算方式,遇到第一个参数默认值就返回计数。
    (function (a = 0, b, c) {}).length // 0
    (function (a, b = 1, c) {}).length // 1
    

⑥.特点 - 参数默认值的作用域

  • 原始函数的参数调用时不会产生作用域。
     var x = 1;
      let y ='hi'
      function f(x,y) {
        console.log(x,y);//undefined undefined
      }
    
  • 函数参数设置了默认值,调用函数的时候会函数参数会有一个初始化作用域,初始化结束,作用域消失。
  • 函数参数默认值赋值流程,①首先是获取调用者传递过来的值,其次获取本身值;②若本身为一个变量或者其余的值,尝试获取参数范围内值;③若没找到,到上级范围内寻找
    //1.优先获取传递值
    var x = 1;
    
    function f(x, y = x) {
      console.log(y);
    }
    
    f(2) // 2
    
    //2.获取上级域中的值
    let x = 1;
    function f(y = x) {
      let x = 2;
      console.log(y);
    }
    
    f() // 1
    
    //3.变量值未定义会抛出异常
    function f(y = x) {
      let x = 2;
      console.log(y);
    }
    
    f() // ReferenceError: x is not defined
    
    //4.参数x = x形成一个单独作用域。实际执行的是let x = x,由于暂时性死区的原因,这行代码会报错”x 未定义“
    var x = 1;
    
    function foo(x = x) {
      // ...
    }
    
    foo() // ReferenceError: x is not defined
    
    //5.参数的默认值是一个函数,该函数的作用域也遵守如上规则。 
    let foo = 'outer';
    
    function bar(func = () => foo) {
      let foo = 'inner';
      console.log(func());
    }
    
    bar(); // outer
    

⑦.应用范例

  • 利用参数默认值,可以指定某一个参数不得省略,如果省略就抛出一个错误。
    function throwIfMissing() {
      throw new Error('Missing parameter');
    }
    
    function foo(mustBeProvided = throwIfMissing()) {
      return mustBeProvided;
    }
    
    foo()
    // Error: Missing parameter
    
  • 将参数默认值设为undefined,表明这个参数是可以省略的。
    function foo(optional = undefined) { ··· }
    
zhangfeng

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: