ES6: 函数扩展

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
```
注意: 由于箭头函数的可读性太低, 不推荐过多使用箭头函数(依据个人实际能力参考)