第一天，引導學習之實現數組的 map 方法

前言

本文只是單純的想給一些基礎差的朋友分析一下如何去實現原理。

1. 先看函數的規定

上圖是map 的規範

兩個參數:

• 第一個參數是 callbackfn 回調函數，

  • value 是遍歷到當前的值
  • index 是遍歷到當前的下標
  • array 是被遍歷的原數組

• 第二個參數是 thisArg: 是任意對象。是用來替換遍歷函數上下文 this 的指向。

返回值: 數組

所以，map 函數的意義就是對整個屬性進行一次改變，並返回一個相同長度的數組。

2. 先看數組的 map 的基本使用

let array1 = [ { a: 1 }, 2, 3, 4]
let obj = {}
let array2 = array1.map(function (item, index, arr) {
    console.log(this === obj)   // true
    if (typeof item === 'object') {
        item.a = 2
    }
    return item
}, obj)

console.log(array1[0] === array2[0])    // true
複製代碼

• 特色：
  • array1 不等於 array2。
  • 元素若是是 引用數據類型，則會淺拷貝。

3. 手寫實現 map

// 1. 根據map 的特色，有兩個入參
Array.prototype.myMap = function(callbackfn, thisArg) {
    var newArray = []   // 新數組
    // 對以前的數組進行 copy，新數組不影響原數組，可是值爲引用類型仍是被同時被影響。
    var currentArray = this.slice() // 方法一
    // var currentArray = Array.prototype.slice.call(this) // 方法二
    // var currentArray = [...this]
    for(var i = 0; i < currentArray.length; i++) {
        // 3.注入回調的三個參數，並能夠有 thisArg 影響，上下文環境
        newArray.push(callbackfn.call(thisArg, currentArray[i], currentArray))
    }
    return newArray
}
複製代碼

就是如此的簡單。