当前位置:首页 > JavaScript

js实现 map

2026-03-15 02:06:04JavaScript

实现 map 方法

在 JavaScript 中,map 是一个高阶函数,用于对数组中的每个元素执行指定的操作,并返回一个新数组。以下是几种实现 map 的方法。

使用原生 Array.prototype.map

原生 map 方法是最直接的实现方式:

js实现 map

const array = [1, 2, 3];
const mappedArray = array.map((item) => item * 2);
console.log(mappedArray); // [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 array = [1, 2, 3];
const mappedArray = customMap(array, (item) => item * 2);
console.log(mappedArray); // [2, 4, 6]

使用 reduce 实现 map

reduce 方法也可以用来实现 map

function mapWithReduce(arr, callback) {
  return arr.reduce((acc, current, index, array) => {
    acc.push(callback(current, index, array));
    return acc;
  }, []);
}

const array = [1, 2, 3];
const mappedArray = mapWithReduce(array, (item) => item * 2);
console.log(mappedArray); // [2, 4, 6]

支持链式调用

如果需要支持链式调用,可以扩展 Array 原型:

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

const array = [1, 2, 3];
const mappedArray = array.customMap((item) => item * 2);
console.log(mappedArray); // [2, 4, 6]

注意事项

  • map 方法不会改变原数组,而是返回一个新数组。
  • 回调函数接收三个参数:当前元素、当前索引和原数组。
  • 如果需要在稀疏数组上使用 map,空位会被跳过。

标签: jsmap
分享给朋友:

相关文章

js实现倒计时

js实现倒计时

使用 setInterval 实现倒计时 通过 setInterval 定时器每秒更新剩余时间,适用于简单倒计时场景。 function countdown(seconds, callback) {…

js如何实现继承

js如何实现继承

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

js防抖和节流实现

js防抖和节流实现

防抖(Debounce)的实现 防抖的核心思想是在事件被触发后,延迟执行回调函数。如果在延迟时间内再次触发事件,则重新计时。适用于输入框搜索、窗口大小调整等场景。 function debounce…

js实现论坛

js实现论坛

实现论坛的基本功能 使用JavaScript实现一个论坛需要结合前端和后端技术。前端可以使用React、Vue或Angular等框架,后端可以选择Node.js配合Express或Koa框架。数据库可…

js实现交换

js实现交换

交换变量的方法 在JavaScript中,交换两个变量的值有多种方法。以下是常见的几种实现方式: 使用临时变量 通过引入一个临时变量来存储其中一个变量的值,实现交换: let a = 1; le…

js实现文字滚动

js实现文字滚动

实现文字滚动的几种方法 使用CSS动画实现滚动 通过CSS的@keyframes和transform属性可以实现平滑的文字滚动效果。 <style> .scroll-text { w…