ES6函数

参数默认值

使用

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

function sum(a, b = 1, c = 2) {
  return a + b + c;
}
​
console.log(sum(10));
console.log(sum(10, undefined, undefined));
console.log(sum(12, 23, undefined));
​

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

[扩展]对arguments的影响

function test(a, b) {
  console.log("arugments", arguments[0], arguments[1]);
  console.log("a:", a, "b:", b);
​
  a = 3;
  console.log("arugments", arguments[0], arguments[1]);
  console.log("a:", a, "b:", b);
}
​
test(1, 2);

输出结果：arugments 1 2  a: 1 b: 2

                  arugments 3 2  a: 3 b: 2

在严格模式下("use strict")输出结果：arugments 1 2 a: 1 b: 2

                                                           arugments 1 2 a: 3 b: 2

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

function test(a, b = 2) {
  console.log("arugments", arguments[0], arguments[1]);
  console.log("a:", a, "b:", b);
​
  a = 3;
  console.log("arugments", arguments[0], arguments[1]);
  console.log("a:", a, "b:", b);
}
​
test(1, 2);

不加严格模式输出结果：arugments 1 2  a: 1 b: 2

                                       arugments 1 2  a: 3 b: 2

[扩展]留意暂时性死区

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

function test(a=b, b){
    console.log(a, b);
}
​
test(undefined, 3);
a=b运行时，b还没有声明,存在暂时性死区。

剩余参数

arguments的缺陷：

1. 如果和形参配合使用，容易导致混乱

2. 从语义上，使用arguments获取参数，由于形参缺失，无法从函数定义上理解函数的真实意图

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

使用：

function (...形参名){
​
}

细节：

1. 一个函数，仅能出现一个剩余参数

2. 一个函数，如果有剩余参数，剩余参数必须是最后一个参数

function test(a,b,...args){
​
}
test(1,2,3,4,5)

展开运算符

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

对数组展开 ES6

const arr1 = [3, 4, 5, 6];
//克隆arr1数组到arr2中
const arr2 = [...arr1];

​

对对象展开 ES7

const obj = {
  name: "小李",
  age: 18,
  love: "唱歌",
};
​
//克隆到obj2
const obj2 = {
  ...obj,//展开obj1
  name: "小王",//覆盖obj1中原有的属性
  sex: "女"，//添加新属性
};

​

明确函数的双重用途

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

new.target

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

function Person(firstName, lastName) {
  if (new.target === undefined) {
    throw new Error("该函数没有使用new来调用");
  }
  this.firstName = firstName;
  this.lastName = lastName;
  this.fullName = `${firstName} ${lastName}`;
}
​
const p1 = new Person("小", "李");
console.log(p1);
​
const p2 = Person("小", "李");
console.log(p2);
​
const p3 = Person.call(p1, "小", "李");
console.log(p3);
​
//该方法可以完美的解决构造函数问题，p2,p3会抛出错误

箭头函数

this指向：

1. 通过对象调用函数，this指向对象

2. 直接调用函数，this指向全局对象

3. 如果通过new调用函数，this指向新创建的对象

4. 如果通过apply、call、bind调用函数，this指向指定的数据

5. 如果是DOM事件函数，this指向事件源

使用语法

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

完整语法：

(参数1, 参数2, ...)=>{
    //函数体
}
const numbers = [1, 2, 3, 5, 7];
​
const result = numbers.filter((num) => num % 2 !== 0).map((num) => num * 2);
console.log(result);
​
//最后输出 [2, 6, 10, 14]

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

参数 => {
​
}

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

参数 => 返回值

注意细节

• 箭头函数中，不存在this、arguments、new.target，如果使用了，则使用的是函数外层的对应的this、arguments、new.target

• 箭头函数没有原型

• 箭头函数不能作用构造函数使用

应用场景

1. 临时性使用的函数，并不会可以调用它，比如：

   1. 事件处理函数

   2. 异步处理函数

   3. 其他临时性的函数

2. 为了绑定外层this的函数

3. 在不影响其他代码的情况下，保持代码的简洁，最常见的，数组方法中的回调函数