iT邦幫忙

2021 iThome 鐵人賽

DAY 29
0
Modern Web

每日挑戰,從Javascript面試題目了解一些你可能忽略的概念系列 第 29

每日挑戰,從Javascript面試題目了解一些你可能忽略的概念 - Day29

tags: ItIron2021 Javascript

前言

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

本日題目與解釋

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

Array.prototype.map2 = function () {

}

可愛的防雷圖來囉~!

thinking-day29

這類型的題目並不算少見,除了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

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


上一篇
每日挑戰,從Javascript面試題目了解一些你可能忽略的概念 - Day28
下一篇
每日挑戰,從Javascript面試題目了解一些你可能忽略的概念 - Day30
系列文
每日挑戰,從Javascript面試題目了解一些你可能忽略的概念30

尚未有邦友留言

立即登入留言