JavaScrip 之手写 map

最新推荐文章于 2024-07-29 11:53:27 发布

喜欢敲代码的乔某人

最新推荐文章于 2024-07-29 11:53:27 发布

阅读量368

点赞数 8

分类专栏： JavaScript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_60409964/article/details/136654679

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文详细解释了JavaScript中Array.prototype._map方法的工作原理，以及如何使用自定义函数handleArr对数组进行处理。通过实例演示了如何将一个数组中的每个元素乘以2并保持对象上下文。

摘要由CSDN通过智能技术生成

const array = [1, 2, 3, 4, 5, 6, 7, 8];
// 第一个参数是 函数
// 第二个参数是 this 的指向 (可选)
Array.prototype._map = function(callback, thisArg = window){
    // 第一个参数不是一个函数的话, 抛出异常
    if (typeof callback !== 'function') {
        throw new TypeError(callback + ' is not a function');
    }
    let arr = [];
    const len = this.length;
    for (let i = 0; i < len; i++) {
        // 将处理后的数据 push 到新的数组中
        arr.push(callback.apply(thisArg, [this[i], i, this]));
    }
    return arr;
}

/**
 * @param item 当前正在处理的数组元素的值。
 * @param index 当前正在处理的数组元素的索引。（可选）
 * @param arr 正在遍历的数组本身。（可选）：
 * @returns {Object} 返回函数处理后的值
 */
function handleArr(item, index, arr) {
    console.log(this); // 这里的 this 指向的是 obj
    return item * 2; // 所有数据 乘 2
}

const obj = {name: '张三'};

const arr = array._map(handleArr, obj);
console.log(arr, 'arr///'); //  [2, 4, 6, 8, 10, 12, 14, 16]