JavaScript 核心觀念(68) - ES6 章節:箭頭函式 - 章節作業

前言

終於到了「ES6 章節:箭頭函式」結尾章節了,所以這邊就來看看這章節預計會出什麼作業吧。

章節作業

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
var person = {
// 提款記錄
withdrawalRecord: [12, 45, 560, 120],
// 計算扣除的金額
calculate: () => {
var total = this.total
var sum = this.withdrawalRecord.reduce(function(acc, val) {
return acc + val
}, 0);
total = total - sum;
this.total = total;
},
// 剩餘的金額
total: 1000
}
person.calculate();
console.log(person.total);
// 問題:
// 1. 哪邊出錯了,請嘗試說明
// 2. 修正錯誤,並嘗試縮寫以上程式碼


Array.prototype.sumData = () => {
return this.reduce(function (acc, val) {
return acc + val
}, 0);
}
var arr = [1, 23, 5, 8, 52, 53, 63];
console.log(arr.sumData());
// 問題:
// 1. 哪邊出錯了,請嘗試說明
// 2. 修正錯誤,並嘗試縮寫以上程式碼

第一題

首先先來看第一道題目

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var person = {
// 提款記錄
withdrawalRecord: [12, 45, 560, 120],
// 計算扣除的金額
calculate: () => {
var total = this.total
var sum = this.withdrawalRecord.reduce(function(acc, val) {
return acc + val
}, 0);
total = total - sum;
this.total = total;
},
// 剩餘的金額
total: 1000
}
person.calculate();
console.log(person.total);
// 問題:
// 1. 哪邊出錯了,請嘗試說明
// 2. 修正錯誤,並嘗試縮寫以上程式碼

首先先把握一個原則,箭頭函式沒有 this,所以 var total = this.total 必定會出現錯誤,因此會是一個 undefined,這樣子的話 this.withdrawalRecord 也是相同的原理,這樣子就會出現一種錯誤是 undefined 無法讀取的相關錯誤訊息,畢竟你可以試著思考一下 undefined 會有 reduce 方法嗎?

所以該段程式碼必須修改成以下,並且可以縮寫成以下

1
2
3
4
5
6
7
8
9
10
11
12
var person = {
// 提款記錄
withdrawalRecord: [12, 45, 560, 120],
// 計算扣除的金額
calculate() {
this.total -= this.withdrawalRecord.reduce((acc, val) => acc + val, 0);;
},
// 剩餘的金額
total: 1000
}
person.calculate();
console.log(person.total); // 263

第二題

第二題則是以下

1
2
3
4
5
6
7
Array.prototype.sumData = () => {
return this.reduce(function (acc, val) {
return acc + val
}, 0);
}
var arr = [1, 23, 5, 8, 52, 53, 63];
console.log(arr.sumData());

那麼重點一樣箭頭函式並沒有 this,因此寫在原型方法內必定會出現錯誤,所以要改寫成以下

1
2
3
4
5
Array.prototype.sumData = function () {
return this.reduce((acc, val) => acc + val, 0);
}
var arr = [1, 23, 5, 8, 52, 53, 63];
console.log(arr.sumData()); // 205

參考文獻

Liker 讚賞 (拍手)

如果這一篇筆記文章對你有幫助,希望可以求點支持或 牡蠣 鼓勵 (ノД`)・゜・。

Liker 是一個按讚(拍手)的讚賞機制,每一篇文章最多可以按五下(拍手),按讚過程你是完全不用付費的(除非你想要每個月贊助我 :D),你只需要登入帳號就可以開始按讚。
而 Liker 會依據按讚數量分配獎金給創作者,所以如果你願意按個讚我會非常感謝你唷。

Google AD

撰寫一篇文章其實真的很花時間,如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話,我會非常感謝你 ヽ(・∀・)ノ