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

發表於 2021-10-24 分類於 JavaScript

Google AD

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

Liker 讚賞

這篇筆記文章如果對你有幫助，
你可以考慮花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

｜

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

前言

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

章節作業

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. 修正錯誤，並嘗試縮寫以上程式碼

第一題

首先先來看第一道題目

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 方法嗎？

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

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

第二題

第二題則是以下

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，因此寫在原型方法內必定會出現錯誤，所以要改寫成以下

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

參考文獻

JavaScript 核心篇