当前位置:首页 > JavaScript

js 实现 map

2026-01-31 21:15:47JavaScript

实现自定义 map 方法

在 JavaScript 中实现类似原生 Array.prototype.map 的功能,可以通过以下方式完成:

function customMap(array, callback) {
  const result = [];
  for (let i = 0; i < array.length; i++) {
    result.push(callback(array[i], i, array));
  }
  return result;
}

作为 Array 原型方法实现

也可以将其添加到 Array 的原型上,使其可以像原生 map 方法一样调用:

Array.prototype.myMap = function(callback) {
  const result = [];
  for (let i = 0; i < this.length; i++) {
    result.push(callback(this[i], i, this));
  }
  return result;
};

使用方法示例

const numbers = [1, 2, 3, 4];

// 使用自定义 map 函数
const doubled = customMap(numbers, num => num * 2);
console.log(doubled); // [2, 4, 6, 8]

// 使用原型方法
const tripled = numbers.myMap(num => num * 3);
console.log(tripled); // [3, 6, 9, 12]

实现注意事项

自定义 map 方法应包含以下特性:

  • 接收一个回调函数作为参数
  • 回调函数接收当前元素、索引和原数组三个参数
  • 返回一个新数组,不修改原数组
  • 保持原数组的稀疏性(跳过未定义的元素)

更完整的实现

Array.prototype.myMap = function(callback, thisArg) {
  if (this == null) {
    throw new TypeError('Array.prototype.myMap called on null or undefined');
  }
  if (typeof callback !== 'function') {
    throw new TypeError(callback + ' is not a function');
  }

  const result = new Array(this.length);
  for (let i = 0; i < this.length; i++) {
    if (i in this) {
      result[i] = callback.call(thisArg, this[i], i, this);
    }
  }
  return result;
};

这个实现更接近原生 map 方法的行为,包括类型检查、稀疏数组处理和 thisArg 参数支持。

js 实现 map

标签: jsmap
分享给朋友:

相关文章

js实现复制功能

js实现复制功能

使用 document.execCommand 方法 这种方法适用于较旧的浏览器,但在现代浏览器中可能被逐步淘汰。通过创建一个临时的 textarea 元素,将文本内容放入其中,然后执行复制命令。…

js实现图片预览

js实现图片预览

使用FileReader API实现图片预览 通过FileReader对象读取用户选择的图片文件并显示预览: const input = document.getElementById('imag…

js实现复制到剪贴板

js实现复制到剪贴板

使用document.execCommand方法(传统方式,已废弃但部分浏览器仍支持) 该方法适用于旧版浏览器,但已被标记为废弃。执行前需确保文本已被选中: function copyToClip…

js实现列表

js实现列表

使用 JavaScript 实现列表 JavaScript 提供了多种方式来实现列表功能,包括数组操作、DOM 元素动态生成等。以下是几种常见的实现方法: 使用数组存储列表数据 数组是 JavaSc…

js实现拷贝

js实现拷贝

实现文本拷贝 使用 document.execCommand 方法(已废弃但兼容性较好): function copyText(text) { const textarea = documen…

js实现延迟

js实现延迟

实现延迟的方法 在JavaScript中,实现延迟操作有多种方式,以下是几种常见的方法: 使用setTimeout函数 setTimeout是JavaScript中最常用的延迟执行方法。它接受一个…