Wenzi

如何手写 Array 的 map 方法

蚊子前端博客
发布于 2024/11/03 00:36
手动实现map方法,了解其内部原理!

数组的 map() 方法会返回一个新的数组,这个新数组中的每个元素对应原数组中的对应位置元素调用一次提供的函数后的返回值。

用法:

const arr = [1, 2, 3, 4];
arr.map((x) => x * 2); // [2, 4, 6, 8]

实现前,我们先看一下 map 方法的参数都有哪些。

Array.map的参数

map 方法有两个参数,一个是操作数组元素的方法 callback,一个是 this 指向(可选),其中使用 callback 时可以获取三个参数。

/**
 * https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map
 */
Array.prototype.map2 = function (callback, thisArg) {
  const result = [];

  if (typeof callback !== "function") {
    throw new TypeError(`${callback} is not a function`);
  }

  for (let i = 0; i < this.length; i++) {
    result.push(callback.call(thisArg, this[i], i, this));
  }

  return result;
};

map2的调用方式,与原生的map方法一样。

[1, 2, 3, 4, 5].map2((item) => item * 2); // 2,4,6,8,10

从实现方式上看,map()方法中的 callback 的执行,每次都是独立执行的,在回调函数内部进行break并不会生效。

标签:array
阅读(237)
No data
No data