阅读 95

map函数原理解析

map() 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

  • map不改变原数组

  • map返回数组元素操作后的值,就是一定有返回值

  • map遍历一次产生一个返回值

var arr = [1,4,9,16];
const map1 = arr.map(x => x *2);
console.log(map1); // [2,8,18,32]复制代码

而如下写时:

var arr = [1, 4, 9, 16];
const map1 = arr.map(x => {
    if (x == 4) {
        return x * 2;
    }
});
console.log(map1); // [undefined, 8, undefined, undefined]复制代码

为什么会出现undefined呢?这就要分析map的底层原理了。

var arr = [10,100,1000];

// 自定义map函数
function myMap(fn) {
    var newArr = [];
    // fn就是调用myMap时传递的函数
    // this就是调用myMap的那个数组
    for(let i = 0; i < this.length; i++) {
        // 在for循环中,this[i]就是数组每一项,i就是每一项的索引,this就是原始数组
        var res = fn(this[i], i, this);
        newArr.push(res); // 将每次循环数据,push进newArr中
    }
    return newArr;
}

// 向Array对象添加新的方法;将myMap方法放在Array.prototype上
Array.prototype.myMap = myMap;

var res = arr.myMap(function(item, index, arr) {
    console.log(item, index, arr);
})

console.log(res); // [13, 130, 1300]


作者:南风i
链接:https://juejin.cn/post/7019583051336253454


文章分类
后端
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐