它是 ES6 標準裡其中非常受歡迎的新語法,允許使用 =>
(箭頭) 來定義函數,比起一般函數可以用更簡短的語法來表示,可以讓程式碼的可閱讀性提高。
函數的參數 => 返回值的內容
// 一般函數寫法,輸入半徑求圓面積
let circleArea = function(r) {
return r * r * 3.14;
}
// 箭頭函數寫法
let circleArea = r => r * r * 3.14;
circleArea(10); // 314
()
// 無參數
let greeting = () => 'Hello';
// 多個參數
let add = (n1, n2) => n1 + n2;
console.log(greeting()); // 'Hello'
console.log(add(10, 20)); // 30
{}
,像是物件內容,需要在外圍加上括號()
let foo = () => ({x: 10, y: 20});
let foo2 = ({x, y}) => x + y;
console.log(foo()); // {x: 10, y: 20}
console.log(foo2({x: 1, y: 2})); // 3
{}
let getDate = () => {
let date = new Date();
return date.toISOString().substr(0, 10);
}
console.log(getDate()); // 2018-01-03
let arr = [1, 2, 3];
arr.map(num => num * 10);
console.log(arr); // [10, 20, 30]
arguments
物件,需要使用 rest 參數代替// 使用 addEventListener 監聽事件
var button = document.querySelector('button');
var fn_arrow = () => {
// 建立 function 時 this 指向 Window
console.log(this.constructor.name); // 執行 function 時 this 指向 Window
};
var fn = function(){
// 建立 function 時 this 指向 Window
console.log(this.constructor.name); // 執行 function 時 this 指向 HTMLButtonElement
};
button.addEventListener('click', fn_arrow);
button.addEventListener('click', fn);
上面程式範例參考來自: https://pjchender.blogspot.tw/2017/01/es6-arrow-function.html
function Timer() {
this.s1 = 0;
this.s2 = 0;
// 箭頭函數,會綁定外層定義的 this
setInterval(() => this.s1++, 100);
// 一般函數,指向正在運作自己的函數
setInterval(function () {
this.s2++;
}, 100);
}
const timer = new Timer();
// 過 0.3 秒後觀察 timer.s1 與 timer.s2 的變化
setTimeout(() => console.log('s1: ', timer.s1), 350);
setTimeout(() => console.log('s2: ', timer.s2), 350);
// s1: 3
// s2: 0
call()
、apply()
、bind()
這些方法去改變 this 的指向let people = {
name: 'Bob'
}
const fn_arrow = () => {
console.log(this);
}
const fn = function () {
console.log(this);
}
fn_arrow.call(people); // 箭頭函數,this 依然還是 window 物件
fn.call(people); // 一般函數,this 則改變成 people 物件
var self = this
此步驟而直接使用了DOM 在處理監聽事件addEventListener()
時,放入的回調函數盡量不要使用箭頭函數
定義物件屬性中的方法,或者定義建構函數的 prototype
方法,不能使用箭頭函數來定義
定義建構函數,一樣不能使用箭頭函數來定義
new
產生此建構的物件就會報錯這段有幫到我,謝謝。
若返回值或參數有包含{},像是物件內容,需要在外圍加上括號()
let foo = () => ({x: 10, y: 20});
let foo2 = ({x, y}) => x + y;
console.log(foo()); // {x: 10, y: 20}
console.log(foo2({x: 1, y: 2})); // 3
其中一個例子
let arr = [1, 2, 3];
arr.map(num => num * 10);
console.log(arr); // [10, 20, 30]
console.log(arr) 並不會顯示10,20,30
因為map並不會改變原始陣列的資料
所以需要將map完的array另存變數才會變成[10, 20, 30]
雖然舉例的重點不是這個,但教學文還是僅慎一點好