es6箭頭函數有什麼優點

es6箭頭函數的優點：1、簡明的語法，例「parameters => {statements;};」，應用起來更加的方便；2、能夠隱式返回；3、更直觀的作用域和this的繫結（不繫結this）。

本教學操作環境：windows7系統、ECMAScript 6版、Dell G3電腦。

我們都知道，在 JavaScript 裡定義函數有多種方式。最常見的是用function關鍵字：

// 函數宣告
function sayHi(someone) {
  return `Hello, ${someone}!`;
}
// 函數表示式
const sayHi = function(someone) {
  return `Hello, ${someone}`;
}

上面的函數宣告和函數表示式，我們姑且稱之為常規函數。

還有就是 ES6 新增的箭頭函數語法：

const sayHi = (someone) => {
  return `Hello, ${someone}!`;
}

相對於原先JS中的函數，ES6增長的箭頭函數更加簡潔，應用起來也更加的方便。

es6箭頭函數的優點：

1、簡明的語法

一個陣列，把它變為原來的二倍之後輸出。

刪掉一個關鍵字，加上一個胖箭頭；
沒有引數加括號，一個引數可選擇；
多個引數逗號分隔，

const numbers = [5,6,13,0,1,18,23];
//原函數
const double = numbers.map(function (number) {
    return number * 2;
})
console.log(double);
//輸出結果
//[ 10, 12, 26, 0, 2, 36, 46 ]
//箭頭函數     去掉function, 新增胖箭頭
const double2 = numbers.map((number) => {
    return number * 2;
})
console.log(double2);
//輸出結果
//[ 10, 12, 26, 0, 2, 36, 46 ]
//若只有一個引數，小括號能夠不寫（選擇）
const double3 = numbers.map(number => {
    return number * 2;
})
console.log(double3);
//如有多個引數，則括號必須寫；若沒有引數，（）須要保留
const double4 = numbers.map((number,index) => {
    return `${index}:${number * 2}`;  //模板字串
})
console.log(double4);

2、能夠隱式返回

顯示返回就是svg

const double3 = numbers.map(number => {
    return number * 2;  
    //return 返回內容;
})

箭頭函數的隱式返回就是函數

當你想簡單返回一些東西的時候，以下：去掉return和大括號，把返回內容移到一行，較為簡潔;
const double3 = numbers.map(number => number * 2);

補充：箭頭函數是匿名函數，若需呼叫，須賦值給一個變數，如上 double3。匿名函數在遞迴、解除函數繫結的時候頗有用。

3、更直觀的作用域和this的繫結（不繫結this）

一個物件，咱們原先在函數中是這麼寫的this

一個物件，咱們原先在函數中是這麼寫的

const Jelly = {
    name:'Jelly',
    hobbies:['Coding','Sleeping','Reading'],
    printHobbies:function () {
        this.hobbies.map(function (hobby) {
            console.log(`${this.name} loves ${hobby}`);
        })
    }
}
Jelly.printHobbies();
// undefined loves Coding
// undefined loves Sleeping
// undefined loves Reading

這說明 this.hobbies 的指向是正確的，this.name 的指向是不正確的；

當一個獨立函數執行時，this 是指向window的

若是要正確指向，原先咱們的作法會是設定變數替換spa

//中心程式碼
printHobbies:function () {
    var self = this; // 設定變數替換
    this.hobbies.map(function (hobby) {
        console.log(`${self.name} loves ${hobby}`);
    })
}
Jelly.printHobbies();
// Jelly loves Coding
// Jelly loves Sleeping
// Jelly loves Reading
在ES6箭頭函數中，咱們這樣寫code
//中心程式碼
printHobbies:function () {
   this.hobbies.map((hobby)=>{
       console.log(`${this.name} loves ${hobby}`);
   })
}
// Jelly loves Coding
// Jelly loves Sleeping
// Jelly loves Reading

這是由於箭頭函數中存取的this其實是繼承自其父級做用域中的this，箭頭函數自己的this是不存在的，這樣就至關於箭頭函數的this是在宣告的時候就肯定了（詞法做用域），this的指向並不會隨方法的呼叫而改變。

【相關推薦：、】

以上就是es6箭頭函數有什麼優點的詳細內容，更多請關注TW511.COM其它相關文章！