ES6之函数优化(默认参数、剩余参数、 箭头函数)

文章目录

• 默认参数
• 剩余参数
• 箭头函数
• 对象的函数属性的简写

默认参数

在ES6之前，我们无法给一个参数设置默认值，我们只能采取变通的写法：

 function add(a , b) {
    // 判断b是否为空，为空就给默认值1
    b = b || 1;
    return a + b;
 }
  // 传一个参数
  console.log(add(10));

现在es6可以这么写：

function add(a , b = 1) {
  return a + b;
}
// 传一个参数
console.log(add(10));

---

剩余参数

ES6中，当参数个数无法确定时，可以使用剩余参数（rest parameter）来表示，剩余参数就相当于一个容器，调用函数时传入几个参数值，这个容器就装载几个参数值。剩余参数能够将多个独立的参数合并到一个数组中去，剩余参数表示为...keys,有三个点加上一个具名参数标识符组成。

function fn(...keys){
	console.log(keys)
}
fn(11,22,'aa'); // [11, 22, "aa"]

---

箭头函数

箭头函数相当于匿名函数，并且简化了函数定义。

一个参数时： ()可以省略

// es5写法：
var print = function (obj) {
  console.log(obj);
}
// es6简写为：
var print = obj => console.log(obj);

多个参数： ()不可省略

//  es5两个参数的情况：
var sum = function (a , b) {
    return a + b;
}
// es6简写为：
var sum2 = (a,b) => a+b;

没有参数： ()不可省略

// es5写法：
var sayHello  =  function () {
    console.log("hello!");
}
//  没有参数时，需要通过()进行占位，代表参数部分
var sayHello = () => console.log("hello!");

this指向：

箭头函数看上去是匿名函数的一种简写，但实际上，箭头函数和匿名函数有个明显的区别：
箭头函数内部的this是词法作用域，由上下文确定

var age = 18;
var obj = {
    name: '张三',
    age: 20,
    getAge1() {
        var fn = function () {
            return this.age // 匿名函数的this指向window
        }
        return fn()
    },
    getAge2() {
        var fn = () => this.age; // 箭头函数的this总是指向词法作用域，也就是外层调用者obj
        return fn()
    }
}
alert(obj.getAge1()); // 18
alert(obj.getAge2()); // 20

---

对象的函数属性的简写

let person = {
    name: "jack",
    // es5写法：
    eat: function (food) {
        console.log(this.name + "在吃" + food);
    },
    // es6箭头函数版：
    eat2: food => console.log(person.name + "在吃" + food), // 这里拿不到this
    // es6简写版：
    eat3(food) {
        console.log(this.name + "在吃" + food);
    }
}