ES6之函數優化(預設參數、剩餘參數、 箭頭函數)

文章目錄

• ​​預設參數​​
• ​​剩餘參數​​
• ​​箭頭函數​​
• ​​對象的函數屬性的簡寫​​

預設參數

在ES6之前，我們無法給一個參數設定預設值，我們隻能采取變通的寫法：

function add(a ,) {
    // 判斷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 ,) {
    return a + b;
}
// es6簡寫為：
var sum2 = (a,b) => a+b;      

沒有參數： ​

​()​

​不可省略

// es5寫法：
var sayHello  =  function () {
    console.log("hello!");
}
//  沒有參數時，需要通過()進行占位，代表參數部分
var sayHello = () => console.log("hello!");      

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);
    }
}