当前位置:首页 > JavaScript

js map实现

2026-04-06 07:06:34JavaScript

使用 Array.prototype.map 实现数组转换

map 是 JavaScript 数组的高阶函数,用于遍历数组并返回一个新数组,新数组的元素是原数组元素经过回调函数处理后的结果。基本语法如下:

const newArray = originalArray.map((currentValue, index, array) => {
  // 返回处理后的值
});
  • currentValue:当前处理的数组元素。
  • index(可选):当前元素的索引。
  • array(可选):原数组。

示例:将数字数组每个元素乘以 2

js map实现

const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2); // [2, 4, 6]

手动实现 map 方法

若需手动实现类似 map 的功能,可通过以下方式:

js map实现

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

// 使用示例
const squares = customMap([1, 2, 3], num => num * num); // [1, 4, 9]

处理稀疏数组

map 会跳过空位(稀疏数组的空槽),但保留空位。手动实现时需注意:

function sparseMap(arr, callback) {
  const result = new Array(arr.length);
  for (let i = 0; i < arr.length; i++) {
    if (i in arr) { // 检查是否存在当前索引
      result[i] = callback(arr[i], i, arr);
    }
  }
  return result;
}

// 使用示例
const sparseArr = [1, , 3]; // 第二个元素为空
const mapped = sparseMap(sparseArr, x => x * 2); // [2, empty, 6]

map 与链式调用

map 常与其他数组方法(如 filterreduce)链式调用:

const data = [1, 2, 3, 4];
const processed = data
  .filter(x => x % 2 === 0) // 筛选偶数 [2, 4]
  .map(x => x * 10); // 转换为 [20, 40]

注意事项

  1. 不修改原数组map 返回新数组,原数组不变。
  2. 回调函数返回值:必须有明确的返回值,否则新数组对应位置为 undefined
  3. 性能考虑:大数据量时,链式调用可能产生中间数组,可用 for 循环优化。

通过以上方法,可以灵活使用 map 或自定义实现类似功能。

标签: jsmap
分享给朋友:

相关文章

js实现预览

js实现预览

文件上传预览实现 使用JavaScript实现文件上传预览功能,可以通过FileReader对象读取文件内容并显示预览。以下代码支持图片、文本和PDF文件的预览: // HTML部分需要包含…

js实现抽奖

js实现抽奖

实现抽奖功能的基本思路 抽奖功能的核心是随机选择奖项并展示结果。可以通过数组存储奖项,利用随机数生成索引,最后通过动画增强用户体验。 准备奖项数据 定义一个数组存储奖项信息,每个奖项可以包含名称、图…

js实现点击显示和隐藏

js实现点击显示和隐藏

实现点击显示和隐藏的JavaScript方法 使用classList.toggle切换类名 通过添加/移除CSS类控制元素的显示与隐藏,需提前在CSS中定义隐藏样式(如display: none)。…

js钟表实现

js钟表实现

实现JavaScript钟表的基本方法 创建一个简单的JavaScript钟表可以通过以下步骤完成,涵盖数字和模拟两种形式。 数字钟表实现 HTML结构只需一个显示时间的容器: <div i…

vue实现js休眠

vue实现js休眠

实现 JavaScript 休眠的方法 在 Vue 中实现 JavaScript 休眠(延迟执行)可以通过以下方式实现。由于 JavaScript 本身没有内置的 sleep 函数,通常使用 Prom…

js实现密码

js实现密码

密码强度验证 使用正则表达式验证密码强度是一种常见方法。以下代码检查密码是否包含大小写字母、数字和特殊字符,且长度至少为8位: function checkPasswordStrength(pass…