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]

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐