JavaScript中Map方法的详解

Map方法是常用到的对数组元素进行修改的重要函数

map定义和方法

map()方法返回一个新数组，数组中的元素为原始数组元素调用函数处理的后值。
map()方法按照原始数组元素顺序依次处理元素。

注意：

map不会对空数组进行检测
map不会改变原始数组

语法：

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

参数说明：

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

示例1：

将数组里的int类型的数据换成字符串类型

var arr = [1,2,3,4,5,6,7,8,9,10];
var arr2 = arr.map(String);
console.log(arr);//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
console.log(arr2);//['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']

示例2：

对原数组元素进行平方后再赋值给新的数组

var arr = [1,2,3,4,5,6,7,8,9,10];
var arr2 = arr.map(function(currentValue){
     return currentValue*currentValue;
});
console.log(arr2);//[1, 4, 9, 16, 25, 36, 49, 64, 81, 100]

注意事项：

当map函数内部使用箭头函数的时候，无论是否带有thisValue，函数内部的this都指向全局window

var arr = [1,2,3,4,5,6,7,8,9,10];
var arr1 = [2,2,2,2,2,2,2,2,2,2];
var arr2 = arr.map((currentValue, index, arr) => {
        console.log(this);//window
},arr1);

当map函数内部使用function形式的时候，如果带有thisValue，函数内部的this指向thisValue

var arr = [1,2,3,4,5,6,7,8,9,10];
var arr1 = [2,2,2,2,2,2,2,2,2,2];
var arr2 = arr.map(function(currentValue, index, arr){
        console.log(this);//arr1
},arr1);

map 底层封装

​ 1. 准备一个新的数组

​ 2. 遍历原始数组, 分别执行函数

​ 3. 把每依次函数执行候得返回值放在新数组里面

​ 4. 把新数组当作 map 得返回值给出来

var arr = [10, 100, 1000]
    // 我自己写的一个函数
    // 我要想用, 必须是 myMap(a, b, c)
    // 我为了可以想数组常用方法一样
    // 我需要把这个方法放在 Array.prototype 上
    function myMap(fn) {
      // fn 就是你调用 myMap 得时候传递得函数
      // this 就是调用 myMap 得那个数组
      // 只要我写 fn()
      // 如果我写 fn(1, 10, 100)
      // 都是在调用你书写 myMap 得时候传递得那个函数
      var newArr = []
      // this 是调用 myMap 得数组
      // 遍历调用 myMap 得数组
      for (var i = 0; i < this.length; i++) {
        // 这里得代码会根据数组得长度来执行
        // 在 for 循环里面, this[i] 就是数组得每一项
        // 在 for 循环里面, i 就是数组得每一项得索引
        var res = fn(this[i], i, this)
        newArr.push(res)
      }
      // 当循环结束, newArr 就是里面有三个数据, 分别是对原始数组每一个数据得操作
      return newArr
    }
 
    Array.prototype.myMap = myMap
    var res = arr.myMap(function (item, index, arr) {
      // console.log(item, index, arr)
      return item * 1.3
    })
 
    console.log(res) // [13, 130, 1300]