js中数组map方法的使用和实现

js中数组map方法的使用和实现

MDN中定义

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

语法

var new_array = arr.map(function callback(currentValue[, index[, selfArray]]) {
// Return element for new_array
}[, thisArg])

参数

callback
生成新数组元素的函数，使用三个参数：

（1）currentValue
callback 数组中正在遍历的当前元素。
（2）index 可选
callback 数组中正在遍历的当前元素的索引。
（3）selfArray 可选
map 方法调用的数组本身。

thisArg可选
执行 callback 函数时值被用作this。

返回值

一个由原数组每个元素执行回调函数的结果组成的新数组。（原来数组遍历时调用传入的callback函数的返回值组成的数组）

详细描述

map 方法会给原数组中的每个元素都按顺序调用一次传入的callback 函数。callback 函数每次执行后的返回值（包括 undefined和null）组合起来形成一个新数组。（注意：callback 函数只会在有值的索引上被调用；那些从来没被赋过值或者使用 delete 删除的索引则不会被调用。）

callback 函数会被自动传入三个参数：数组元素，元素索引，原数组本身。

如果 thisArg 参数提供给map，则会被用作回调函数的this值。否则undefined会被用作回调函数的this值。（这里和forEach中thisArg参数的作用是一致的，用于改变传入callback函数的this指向callback为箭头函数时thisArg参数无效）

map 方法不修改调用它的原数组本身（可以在 callback 执行时改变原数组）
map 方法处理数组元素的范围是在 callback 方法第一次调用之前就已经确定了。调用map方法之后追加的数组元素不会被callback访问。如果存在的数组元素改变了，那么传给callback的值是map访问该元素时的值。

使用示例

    let arr = [1,3, ,7]
    let newArray = arr.map((currentValue, index, selfArray) => {
      console.log(this)
      return { currentValue: currentValue * 2, index}
    }, {a: 9})
    console.log(newArray)
    // Window
    // Window
    // Window
    // [{currentValue: 2, index: 0},{currentValue: 6, index: 1}, empty, {currentValue: 14, index: 2}]

上述代码arr数组调用了map方法，传入callback回调函数（箭头函数）和thisArg参数，打印回调函数内部的this并返回一个对象，对象里面是数组循环的当前元素乘2和当前元素索引值。根据打印值可以看出回调函数的this没有改变，新数组里面的值是处理后的对象。下面我们看下无返回值和传入普通函数的使用：

    let arr = [1,3, ,7]
    let newArray = arr.map(function(currentValue, index, selfArray) {
      if (currentValue < 5) {
        console.log(this)
        return { currentValue: currentValue * 2, index}
      }
    }, {a: 9})
    console.log(newArray)
    // {a: 9}
    // {a: 9}
    // [{currentValue: 2, index: 0}, {currentValue: 6, index: 1}, empty, undefined]

上述代码传入了一个普通的函数，根据打印值看出，callback函数传入普通函数的时候，会把callback函数的this指向传入的thisArg参数，并且没有手动设置返回值时会返回undefined。根据callback函数打印的次数来看传入的值为空值时callback回调函数就不会调用并且新数组也会是空值（empty），我们不光可以传入自己定义的函数也可以传入js中已有的方法如：

    let arr = [1,3, ,7]
    let newArray = arr.map(String)
    console.log(newArray)
    // ["1", "3", empty, "7"]

上述代码传入已有的string方法将数组中元素类型转换为字符类型，还有其他许多像这样的方法可以直接使用，让我们在处理数据的时候更加方便和简洁。看完了描述和使用，让我们模拟实现自己的map方法吧

步骤思路

1、 在array原型上添加自己的map方法
2、 传入callback回调函数和thisArg参数
3、 根据调用的数组长度创建新数组newArry
4、 循环原来数组并使用hasOwnProperty方法当前元素是否为空值
5、 是的话新数组就赋值callback函数返回的值
6、 返回新数组

实现代码

    Array.prototype.myMap = function(callback, thisArg) {
      const length = this.length
      let newArry = new Array(length)
      for (let index = 0; index < length; index++) {
        // 利用hasOwnProperty方法检测空值
        // 利用call方法调用方法并改变this的指向
        if (this.hasOwnProperty(index)) newArry[index] = callback.call(thisArg, this[index], index, this)
      }
      return newArry
    }

验证测试

    Array.prototype.myMap = function(callback, thisArg) {
      const length = this.length
      let newArry = new Array(length)
      for (let index = 0; index < length; index++) {
        // 利用hasOwnProperty方法检测空值
        // 利用call方法调用方法并改变this的指向
        if (this.hasOwnProperty(index)) newArry[index] = callback.call(thisArg, this[index], index, this)
      }
      return newArry
    }

    let arr = [1,3, ,7]
    
    newArray = arr.myMap((currentValue, index, selfArray) => {
      console.log(this)
      return { currentValue: currentValue * 2, index}
    }, {a: 9})
    console.log(newArray)
    // Window
    // Window
    // Window
    // [{currentValue: 2, index: 0},{currentValue: 6, index: 1}, empty, {currentValue: 14, index: 2}]

    newArray = arr.myMap(function(currentValue, index, selfArray) {
      if (currentValue < 5) {
        console.log(this)
        return { currentValue: currentValue * 2, index}
      }
    }, {a: 9})
    console.log(newArray)
    // {a: 9}
    // {a: 9}
    // [{currentValue: 2, index: 0}, {currentValue: 6, index: 1}, empty, undefined]

    newArray = arr.myMap(String)
    console.log(newArray)
    // ["1", "3", empty, "7"]

至此我们模拟实现map方法就完成了。