当前位置:首页 > 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 方法应包含以下特性:

js 实现 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 参数支持。

标签: jsmap
分享给朋友:

相关文章

js如何实现继承

js如何实现继承

原型链继承 通过将子类的原型指向父类的实例实现继承。子类实例能够访问父类原型上的属性和方法。 function Parent() { this.name = 'parent'; } Parent…

js实现验证

js实现验证

验证表单输入 使用JavaScript验证表单输入是常见的需求。可以通过监听表单提交事件,检查输入字段是否符合要求。 document.getElementById('myForm').addEve…

js实现滑动

js实现滑动

实现滑动效果的方法 在JavaScript中实现滑动效果可以通过多种方式完成,以下是几种常见的实现方法: 使用CSS过渡和JavaScript触发 通过CSS定义过渡效果,JavaScript控制触…

js分页实现

js分页实现

分页的基本原理 分页的核心是通过计算当前页码和数据偏移量,从服务器或本地数据中截取对应范围的数据进行展示。通常需要以下参数:当前页码(currentPage)、每页条数(pageSize)、总数据量(…

js 实现图片轮播

js 实现图片轮播

基础实现方案 使用HTML、CSS和JavaScript创建一个简单的图片轮播。HTML部分定义轮播容器和图片,CSS负责样式布局,JavaScript处理轮播逻辑。 <div class="…

js 实现验证码

js 实现验证码

实现验证码的 JavaScript 方法 生成随机验证码 验证码通常由随机字符(数字、字母或混合)组成。以下代码生成一个 6 位随机验证码(数字和字母混合): function generateCa…