每日挑战，从Javascript面试题目了解一些你可能忽略的概念 - Day29

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

本文章同步发布於个人部落格，有兴趣的朋友也可以来逛逛~!