ES6 函数模块(四)

参数默认值

使用

在书写形参时，直接给形参赋值，附的值即为默认值

这样一来，当调用函数时，如果没有给对应的参数赋值（给它的值是undefined），则会自动使用默认值。

[扩展]对arguments的影响

只要给函数加上参数默认值，该函数会自动变量严格模式下的规则：arguments和形参脱离

[扩展]留意暂时性死区

形参和ES6中的let或const声明一样，具有作用域，并且根据参数的声明顺序，存在暂时性死区。

剩余参数

arguments的缺陷：

1. 如果和形参配合使用，容易导致混乱
2. 从语义上，使用arguments获取参数，由于形参缺失，无法从函数定义上理解函数的真实意图

ES6的剩余参数专门用于手机末尾的所有参数，将其放置到一个形参数组中。

语法:

function (...形参名){

}

细节：

1. 一个函数，仅能出现一个剩余参数
2. 一个函数，如果有剩余参数，剩余参数必须是最后一个参数

展开运算符

使用方式：...要展开的东西

对数组展开 ES6

const arr1 = [1,2,3,1];
const arr2 = [...arr1]

对对象展开 ES7

      const obj2 = {
        ...obj1,
        address: {
          ...obj1.address,
        },
        loves: [...obj1.love, "yy5"],
      };
      console.log(obj2);
      console.log(obj1 === obj2);

      const arr1 = [3, 67, 8, 5]; 

明确函数的双重用途

ES6提供了一个特殊的API，可以使用该API在函数内部，判断该函数是否使用了new来调用

new.target 
//该表达式，得到的是：如果没有使用new来调用函数，则返回undefined
//如果使用new调用函数，则得到的是new关键字后面的函数本身

箭头函数

回顾：this指向

1. 通过对象调用函数，this指向对象
2. 直接调用函数，this指向全局对象
3. 如果通过new调用函数，this指向新创建的对象
4. 如果通过apply、call、bind调用函数，this指向指定的数据
5. 如果是DOM事件函数，this指向事件源

使用语法

箭头函数是一个函数表达式，理论上，任何使用函数表达式的场景都可以使用箭头函数

完整语法：

(参数1, 参数2, ...)=>{
    //函数体
}

如果参数只有一个，可以省略小括号

参数 => {

}

如果箭头函数只有一条返回语句，可以省略大括号，和return关键字

参数 => 返回值

注意细节

• 箭头函数中，不存在this、arguments、new.target，如果使用了，则使用的是函数外层的对应的this、arguments、new.target
• 箭头函数没有原型
• 箭头函数不能作用构造函数使用

应用场景

1. 临时性使用的函数，并不会可以调用它，比如：
   1. 事件处理函数
   2. 异步处理函数
   3. 其他临时性的函数
2. 为了绑定外层this的函数
3. 在不影响其他代码的情况下，保持代码的简洁，最常见的，数组方法中的回调函数