当前位置:首页 > 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

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

手动实现 map 方法

若需手动实现类似 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)链式调用:

js map实现

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实现选项卡

实现选项卡的基本思路 选项卡通常由一组标签和对应的内容面板组成。点击标签时,显示对应的内容面板,隐藏其他面板。实现这一效果需要结合HTML结构、CSS样式和JavaScript交互逻辑。 HTML结…

js 实现vue

js 实现vue

Vue.js 的基本实现 在 JavaScript 中实现 Vue.js 的核心功能,可以通过数据绑定、响应式系统和虚拟 DOM 来实现。以下是实现 Vue.js 核心功能的简化版本。 数据响应式系…

js实现瀑布流

js实现瀑布流

实现瀑布流布局 瀑布流布局是一种常见的网页布局方式,常用于图片展示、商品列表等场景。以下是使用 JavaScript 实现瀑布流布局的几种方法。 纯 JavaScript 实现 通过计算元素的位置和…

js实现驼峰

js实现驼峰

实现驼峰命名的几种方法 使用正则表达式和字符串替换 通过正则表达式匹配字符串中的特定模式(如下划线或短横线),并将其后的字母转换为大写,同时移除分隔符。 function toCamelCase(s…

js手势实现

js手势实现

手势识别实现方法 在JavaScript中实现手势识别通常涉及监听触摸事件(touchstart、touchmove、touchend)或鼠标事件(mousedown、mousemove、mouseu…

js实现菜单

js实现菜单

实现基本HTML结构 使用HTML创建菜单的基本框架,通常包含<ul>和<li>元素。示例结构如下: <ul id="menu"> <li><…