当前位置：首页 > JavaScript

js 实现map

2026-02-01 14:17:43JavaScript

实现 JavaScript 的 `map` 方法

JavaScript 的 map 方法是数组原型上的一个高阶函数，用于对数组的每个元素执行给定的回调函数，并返回一个新数组。以下是几种实现方式：

使用原生 `Array.prototype.map`

原生 map 方法可以直接调用：

js 实现map

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

在数组原型上扩展 `map` 方法

可以通过扩展 Array.prototype 来实现自定义的 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 arr = [1, 2, 3];
const newArr = arr.myMap(item => item * 2);
console.log(newArr); // [2, 4, 6]

使用 `reduce` 实现 `map`

map 方法也可以通过 reduce 实现：

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

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