【Lodash源碼】_.map() [ map和foreach有什麼區別呢？]

我們通過例子來分析源碼和兩個方法之間的區別

舉例：_.forEach()

var array = [1,2,3,4,5];  
var res = _.forEach(array, function (item,index,input) {  
       input[index] = item*10;  
})  
console.log(res);//=>undefined
console.log(array);//=>[10,20,30,40,50]

舉例：_.map（）

var res = _.map(array, function (item,index,input) {  
       input[index] = item*10;  
})  
console.log(res);//=>[10,20,30,40,50]
console.log(array);//=>[1,2,3,4,5]

共同點：

1. 都是循環遍歷數組中的每一項
2. 每一次執行匿名函數都支持三個參數，數組中的當前項item，當前項的索引index，原始數組input
3. 只能遍歷數組

不同點：

_.foreach()

沒有返回值

對原本數組進行操作

_.map()

有返回值

克隆原本數組 ，再新數組進行操作並返回新數組

？？？？？我在敲黑板

這個同點，請自己在下面的源碼中找到原因。

有興趣交流的朋友，在下面留言

也可加微信羣，我們聊聊前端，一起進階。也可加我微信15956574080

 

 

 

_.map()

/**
 * Creates an array of values by running each element of `array` thru `iteratee`.
 * The iteratee is invoked with three arguments: (value, index, array).
 *
 * @since 5.0.0
 * @category Array
 * @param {Array} array The array to iterate over.
 * @param {Function} iteratee The function invoked per iteration.
 * @returns {Array} Returns the new mapped array.
 * @example
 *
 * function square(n) {
 *   return n * n
 * }
 *
 * map([4, 8], square)
 * // => [16, 64]
 */
function map(array, iteratee) {
  let index = -1
  const length = array == null ? 0 : array.length
  const result = new Array(length)

  while (++index < length) {
    result[index] = iteratee(array[index], index, array)
  }
  return result
}

export default map

_.forEach()

註釋:forEach()是判斷傳入的參數是否是數組，對不同類型分別進行不同操作

import arrayEach from './.internal/arrayEach.js'
import baseEach from './.internal/baseEach.js'

/**
 * Iterates over elements of `collection` and invokes `iteratee` for each element.
 * The iteratee is invoked with three arguments: (value, index|key, collection).
 * Iteratee functions may exit iteration early by explicitly returning `false`.
 *
 * **Note:** As with other "Collections" methods, objects with a "length"
 * property are iterated like arrays. To avoid this behavior use `forIn`
 * or `forOwn` for object iteration.
 *
 * @since 0.1.0
 * @alias each
 * @category Collection
 * @param {Array|Object} collection The collection to iterate over.
 * @param {Function} iteratee The function invoked per iteration.
 * @returns {Array|Object} Returns `collection`.
 * @see forEachRight, forIn, forInRight, forOwn, forOwnRight
 * @example
 *
 * forEach([1, 2], value => console.log(value))
 * // => Logs `1` then `2`.
 *
 * forEach({ 'a': 1, 'b': 2 }, (value, key) => console.log(key))
 * // => Logs 'a' then 'b' (iteration order is not guaranteed).
 */
function forEach(collection, iteratee) {
  const func = Array.isArray(collection) ? arrayEach : baseEach
  return func(collection, iteratee)
}

export default forEach

當我們傳入數組的時候則會進入arrayEach函數，處理該數組，具體如下：

/**
 * A specialized version of `forEach` for arrays.
 *
 * @private
 * @param {Array} [array] The array to iterate over.
 * @param {Function} iteratee The function invoked per iteration.
 * @returns {Array} Returns `array`.
 */
function arrayEach(array, iteratee) {
  let index = -1
  const length = array.length

  while (++index < length) {
    if (iteratee(array[index], index, array) === false) {
      break
    }
  }
  return array
}

export default arrayEach