js中map()的使用详解

Posted 2023-01-15 尔嵘

引入：

  有网友有如下困惑：

        map是数组的方法，有一个参数，参数是一个函数，函数中有3个参数

        参数1：item必须。当前元素的值

        参数2：index，可选。当前元素在数组中的索引值

        参数3：arr可选。当前元素属于的数组对象

        那这个作为map参数的函数是怎么被调用的呢

一、map()定义

在javascript的Array中，它返回一个新的数组，数组中的元素为原始数组调用函数处理后的值。
请注意：
        map()不会对空数组进行检测
        map()不会改变原数组
二、语法：

array.map(function(currentValue, index, arr), thisIndex)

参数详情：

function(currentValue, index, arr)：必须。为一个函数，数组中的每个元素都会执行这个函数。其中函数参数：
    currentValue：必须。当前元素的的值。
    index：可选。当前元素的索引。
    arr：可选。当前元素属于的数组对象。
 
thisIndex：可选。对象作为该执行回调时使用，传递给函数，用作"this"的值。

三、本案例中，按照感知理解：

返回一个由原数组每个元素乘以2后返回的新数组。

四、学习map()源码:

var arr = [1, 2, 3, 4, 5]
Array.prototype.myMap = function(fn)
    var len = this.length;
    var arr = [];
    for(var i = 0; i < len; i ++)
        arr.push(fn(this[i],i))
    
    return arr;

var resultArrey = arr.myMap(function(item, index)
    return item * 2;
)
console.log(resultArrey); //[2,4,6,8,10]