当前位置：首页 > JavaScript

实现map js

2026-03-02 08:12:35JavaScript

在JavaScript中，map是一个常用的数组方法，用于对数组中的每个元素执行指定的操作并返回一个新数组。以下是实现和使用map的详细方法：

使用原生`Array.prototype.map`

原生map方法接受一个回调函数作为参数，该函数会被依次应用到数组的每个元素上。回调函数可以接收三个参数：当前元素、当前索引和原数组。

const numbers = [1, 2, 3, 4];
const doubled = numbers.map((num) => num * 2);
console.log(doubled); // 输出: [2, 4, 6, 8]

回调函数也可以接收索引和原数组：

const numbers = [1, 2, 3];
const indexed = numbers.map((num, index, arr) => `${index}: ${num} (${arr})`);
console.log(indexed); // 输出: ["0: 1 (1,2,3)", "1: 2 (1,2,3)", "2: 3 (1,2,3)"]

自定义`map`函数实现

如果需要手动实现一个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 numbers = [1, 2, 3];
const squared = customMap(numbers, (num) => num * num);
console.log(squared); // 输出: [1, 4, 9]

处理稀疏数组

原生map会跳过稀疏数组中未初始化的元素（如空位）。自定义实现时可以通过hasOwnProperty检查：

function sparseMap(arr, callback) {
    const result = [];
    for (let i = 0; i < arr.length; i++) {
        if (arr.hasOwnProperty(i)) {
            result.push(callback(arr[i], i, arr));
        } else {
            result.length++; // 保持稀疏性
        }
    }
    return result;
}

const sparseArray = [1, , 3]; // 注意中间的空位
const mappedSparse = sparseMap(sparseArray, (num) => num * 2);
console.log(mappedSparse); // 输出: [2, , 6] (中间为空位)

`map`与`this`绑定

原生map可以接受第二个参数用于绑定回调函数中的this。自定义实现时可通过call或apply实现：

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

const obj = { multiplier: 10 };
const numbers = [1, 2, 3];
const multiplied = mapWithThis(numbers, function(num) {
    return num * this.multiplier;
}, obj);
console.log(multiplied); // 输出: [10, 20, 30]

注意事项

map不会修改原数组，而是返回一个新数组。
如果需要对类数组对象（如arguments或NodeList）使用map，可以先用Array.from或扩展运算符转换：
```
const nodeList = document.querySelectorAll('div');
const texts = Array.from(nodeList).map(node => node.textContent);
```

异步场景中，map不会等待异步操作完成。若需处理异步任务，需结合Promise.all：

const urls = ['url1', 'url2'];
const fetchData = urls.map(async url => {
    const response = await fetch(url);
    return response.json();
});
const results = await Promise.all(fetchData);

通过以上方法，可以灵活实现和使用map功能，满足不同场景的需求。

实现map js