用JS函數形式實現一個Array.prototype.forEach()，.map()，.filter()

Array.prototype.forEach()，.map()，.filter()三者區別

• forEach()，map()，filter()三者都是實現對數組元素的迭代
• forEach()，map()兩者區別很小，唯一區別是forEach()無返回值，而map()有返回值，返回一個新的數組
• filter()返回經過函數篩選後的數組

Array.prototype.forEach()

用純粹的for循環寫出forEach的功效，forEach功效如圖所示：

實現代碼如下：

Array.prototype.forEach = function(callback, thisArg) {
    
  //判斷第一個參數是否為函數
  if(typeof callback != 'function') throw new TypeError(callback + 'must be a function')

  var arr = this
  //是否接收到了第二個參數
  var thisValue = arguments[1] || this

  for(let i = 0; i < arr.length; ++i) {
    
    //改變this的指向
    callback.call(thisValue, arr[i], i, arr)
  }
}

Array.prototype.map()

map與forEach功效差不多，map功效如下：

代碼如下：

Array.prototype.map = function(callback, thisArg) {
    
  //判斷第一個參數是否為函數
  if(typeof callback != 'function') throw new TypeError(callback + 'must be a function')

  var arr = this
  //是否接收到了第二個參數
  var thisValue = arguments[1] || this
  
  //保存返回值
  let returnValue = []
  for(let i = 0; i < arr.length; ++i) {
    
    //改變this的指向+推入返回值
    if(callback.call(thisValue, arr[i], i, arr))
    returnValue.push(arr[i])
  }
  return returnValue
}

Array.prototype.filter()

filter()功效如下：

代碼如下：

Array.prototype.filter = function(callback, thisArg) {
    
  //判斷第一個參數是否為函數
  if(typeof callback != 'function') throw new TypeError(callback + 'must be a function')

  var arr = this
  //是否接收到了第二個參數
  var thisValue = arguments[1] || this
  
  //保存返回值
  let returnValue = []
  for(let i = 0; i < arr.length; ++i) {
    
    //該值符合原數組
    if(callback.call(thisValue, arr[i], i, arr))
      returnValue.push(arr[i])
  }
  return returnValue
}