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的指向並不會隨方法的呼叫而改變。
【相關推薦：javascript影片教學、web前端】
以上是es6箭頭函數有什麼優點的詳細內容。更多資訊請關注PHP中文網其他相關文章！
