1. 形参默认值:

• 说明: 就是在声明函数时, 给形参设置默认值, 当函数调用时, 如果没有传入实参值, 就会使用默认值;

• 示例:

  let demo = function (x = 4, y = 5) {
      return x + y;
  }
  demo();  // => 9 当设置了形参默认值, 调用时 如果没有传入实参值, 则会使用形参默认值
  demo(10, 15);  // => 25 当调用时 传入了实参值, 就使用传入的实参值
  

2. 解构赋值和形参默认值的结合使用:

• 说明:

  • 在定义函数的时候, 将形参设置为对象的形式;
  • 然后在函数调用时, 实参的 key 必须要和 形参的参数名一致即可;

• 注意: 请详细查看示例中的 不同点

• 示例1: 解构赋值默认值与形参默认值结合使用:

  function add({x = 0, y = 0} = {x: 4, y: 5}) {
      console.log(x + y);
  }
  /** 参数部分解读: 可这样理解
    *    1. {x = 0, y = 0} 这部分使用了对象的结构赋值(解构接收 - 参数: {x: 3, y: 4}), 并设置了 解构默认值;
    *    2. {x: 3, y: 4} 这部分是函数的形参, 并设置了默认值
    */ 
  add({x: 10});  // => 10;  调用时, 实参值为{x: 10}, 解构时, 右边形参部分 y为 undefind, 此时 x = 10, y 使用解构默认值 0
  add({x: 10, y: 20});  // => 30;  x, y 都传入了实参值, 形参接收{x: 10, y: 20} 然后解构, x = 10, y = 20 
  add({});  // => 0;  调用传入空对象, 解构 传入的 {}, 此时 形参{}中的 x, y 严格等于 undefined, 所以 使用解构默认值: x = 0, y = 0
  add();  // => 9;  没传参, 此时解构 形参默认值: {x: 4, y: 5}, 因此 x = 4, y = 5
  

• 示例2: 只设置解构赋值默认值, 不设置形参默认值时:

  function add({x = 4, y = 5}) {
      console.log(x + y);
  }
  /** 
     * 只设置了解构赋值默认值, 如果调用时, 不传参, 那么 无法解构生成变量 x, y(因为是对象解构赋值, 你需要有能解构的对象才行); 
     * 此时只有传入一个空对象, 解构空对象, 空对象中 x, y 严格为undefined, 会使用解构默认值: x = 4, y = 5;
  */
  add();  // => 报错;  Cannot read property 'x' of undefined
  add({});  // => 9;  解构空对象, x, y 为 undefined, 此时使用解构默认值
  add({x: 10});  // => 15;  解构{x: 10}, y 为 undefined, 所以y 使用解构默认值: 5
  add({x: 10, y: 20});  // => 30;  解构{x: 10, y: 20}, x = 10, y = 20  
  

• 示例3: 只设置解构赋值, 且不设置解构默认值:

    function add1({x, y}) {
        console.log(x, y);
    }
    add1();  // => 报错;  同示例2
    add1({});  // undefined, undefined; =>  解构调用传入的实参: {}, x, y 都为undefind, 
    add1({x, 1})  // 1, undefined;  => 解构调用传入的实参: {x: 1}, x = 1, y为undefined
    add1({x: 1, y, 2})  // 1, 2;  => 解构调用传入的实参: {x: 1, y: 2}, x = 1, y = 2
  

  综上: 当只设置了解构赋值, 调用时要传入对象形式的参数

3. rest参数: (...args)可变参数, 相当于 arguments

• 说明: arguments是伪数组对象结构, 用于获取 函数在本次调用时 传入的全部实参值;

• 使用方法:

  • 实质: 是将所有的参数全部保存在 一个变量(args)当中了;
  • 相当于 用于接收本次传入的所有实参, 因此, 这个变量是一个数组结构;
  • 即使 没有传入实参, 或者传入了一个实参值, args也是一个数组结构;

• 例如:

  function rest(...args) {
      console.log(args);
      args.forEach((item, index) => {
          console.log(`第${index}个变量是${item}`);
      })
  }
  /** 
    依次打印: ['托儿索', '小学僧', '鱼尾雯']
    第0个变量是托儿索
    第1个变量是小学僧
    第2个变量是鱼尾雯
   */
  rest('托儿索', '小学僧', '鱼尾雯');  // => 会将本地调用的全部实参值 传给 ...args
  

4. 箭头函数:

• 定义方式说明:

  • 箭头函数的用法与普通函数的用法几乎一致;

  • 写法: 去掉 function 然后在 () 与 {} 之间增加 => ;

  • 例如:

    let getName = (name) => {
        console.log('名字是' + name);    
    }
    getName('菊花信');
    /** 箭头函数可以使用形参默认值 */
    let getName = (name = '菊花信') = {
        console.log(`名字是${name}`);
    }
    getName();  // 名字是菊花信; => 没传实参值, 使用形参默认值; 
    getName('橘右京');  // 名字是橘右京; => 使用传入的实参值
    

• 箭头函数特点:

  1. 箭头函数不能作为 构造函数使用

     • 即不能通过 new 关键字 创建实例对象

  2. 箭头函数没有 arguments, 但可使用 rest参数 的方式, 接收函数调用时 传入的全部实参值

     • 即形参位置为: ...args

  3. 箭头函数没有 this对象, 在箭头函数中的 this, 指向的是函数外层的对象

     btn.onclick = () => {
        console.log(this);
     } 
     // 箭头函数没有this, 因此事件的 回调函数中, this指向的是函数外层的对象
     

  4. 如果函数体只设置了一行代码, 且设置了返回值, 那么不需要设置 {} 和 return

     let noReturn = (x, y) => x + y;
     noReturn(10, 20); // => 30
     

  5. 如果函数中只有一个 参数, 那么可以不设置小括号: ()

     let test = x => x
     test(1);   // => 1
     

• 注意: 由于箭头函数的可读性太低, 不推荐过多使用箭头函数(依据个人实际能力参考)