tags: ItIron2021 Javascript

前言

倒數第二天~昨天突然來一記Big(O)有沒有讓你措手不及呢? 我們今天就再回歸輕鬆一點的題目吧!

本日題目與解釋

請手刻一個與Array.map有著一樣功用的函數，以下為起手式

Array.prototype.map2 = function () {

}

可愛的防雷圖來囉~!

這類型的題目並不算少見，除了map之外也不乏要你手刻filter、reduce之類的題目，不過核心概念都是相同的! 不會太困難，我們一起來吧!

首先，你要山寨就必須要先了解你要山寨的對象，Array.map有著以下的特點

• 需要傳入一個callback
• 此callback可傳入三個參數，分別是目前迭代的元素、index以及陣列本身
• 最終會回傳一個新的陣列

為了簡化問題，就不要求你處理一些錯誤情況了，了解這些候我們就可以開始動手了，.map其實就是迴圈的概念，會一個一個迭代元素，並套入傳入的callback產生一個新的值，所以我們可以輕易地用for迴圈去起手。

Array.prototype.map2 = function (callback) {
  // 宣告一個結果陣列
  const result = []
  
  // 利用for迴圈迭代
  for (let i = 0; i < ???; i++) {
    // callback依序傳入item,index以及陣列本身
    result.push(callback(???, i, ???))
  }
  
  return result
}

okay，基本雛型完成了，現在問題是???的部份要怎麼填入了，這邊我們就要請之前學過的好幫手this出來囉! 再次複習一下，this在函數中使用時會指向呼叫它的物件，因此在這裡this便會指向呼叫map2的陣列囉! 這麼一來我們需要的東西不就全都有了嗎?

Array.prototype.map2 = function (callback) {
  // 宣告一個結果陣列
  const result = []
  
  // 利用for迴圈迭代
  for (let i = 0; i < this.length; i++) {
    // callback依序傳入item,index以及陣列本身
    result.push(callback(this[i], i, this))
  }
  
  return result
}

const arr = [1, 2, 3]
const arr2 = arr.map2((item) => item * 2)
console.log(arr2) // [2, 4, 6]

完美搞定! 是不是沒有想像得困難呢? 比較難重現的會是reduce，有興趣的朋友可以自己試試看唷!

本日核心觀念與總結

核心觀念

Array.map、this

總結

• 了解如何手刻基本的Array.map

本文章同步發布於個人部落格，有興趣的朋友也可以來逛逛~!