用JS手写map

最新推荐文章于 2025-05-13 17:53:31 发布

风高物燥

最新推荐文章于 2025-05-13 17:53:31 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏：笔记文章标签： javascript map

本文链接：https://blog.csdn.net/AshesO/article/details/115291326

笔记专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了如何使用JavaScript手写Array的map方法，包括检查传入参数是否为函数，创建新数组保存结果，以及利用call方法设置回调函数执行时的上下文this。文章还特别强调了thisArg参数在map方法中的作用，即当未指定时，默认为全局对象，如果指定了则作为回调函数执行时的上下文。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用JS手写map

let arr = [3, 4, 5, 6, 7];

Array.prototype.newMap = function (fn, thisArg) {
  // 首先判断传入的第一个参数是否为函数, 如果不是则抛出错误
  if (Object.prototype.toString.call(fn) !== "[object Function]") {
    throw ("The first argument must be a function")
  }

  // 定义一个空数组用作保存数据使用
  let result = [];
  // currentArr指向this, this也就是调用该map方法的数组本身
  let currentArr = this;

  for (let i = 0; i < currentArr.length; i++) {
    // 循环遍历, 调用传入的函数, 并将返回值保存在result中
    result[i] = fn.call(thisArg, currentArr[i], i, currentArr)
  }

  // 返回result
  return result
}

console.log(arr.newMap((item, index, arr) => {
  return item++
}));

注意代码中的thisArg的作用
map本身可以传入两个参数, 第一个参数是一个函数, 第二个参数是传入执行 callback 函数时被用作this的值. 如果第二个参数没有传入就是undefined, 而代码中所用的call方法如果第一个参数如果传入的是undefined的话就会默认是全局对象, 这样逻辑就打通了, 也就是说如果map的第二个参数传入的话就会以传入的参数用作this调用函数, 如果没有传入的话就会使用默认的全局对象调用函数