讀Lodash源碼——compact.js

有一般天罡數，該三十六般變化；有一般地煞數，該七十二般變化 --《西游記》

Compact.js

Lodash第二個api_.compact(array)
指:刪除數組中所有通過布爾值可以轉換為false的值,如null、false、''、0、undefinded、NaN,返回一個新數組.

舉個例子:

_.compact([0, 1, false, 2, '', 3]);

// => [1, 2, 3]

先看一下compact.js 的源碼

/**
 * Creates an array with all falsey values removed. The values `false`, `null`,
 * `0`, `""`, `undefined`, and `NaN` are falsey.
 *
 * @since 0.1.0
 * @category Array
 * @param {Array} array The array to compact.
 * @returns {Array} Returns the new array of filtered values.
 * @example
 *
 * compact([0, 1, false, 2, '', 3])
 * // => [1, 2, 3]
 */
function compact(array) {
  let resIndex = 0
  const result = []

  if (array == null) {
    return result
  }

  for (const value of array) {
    if (value) {
      result[resIndex++] = value
    }
  }
  return result
}

export default compact

分析一下源碼

1. 首先創建一個函數compact 傳遞一個參數.

2. 初始化一個變數resIndex為0,用於記錄數組索引.

3. 創建一個空數組result過濾後數組值都保存在這裡面.

4. 先判斷參數是否為空,如果是空,這返回一個數組.

5. 利用for of迴圈,將null、false、0、undefinded、NaN、''過濾除去.

思考

compact函數用了es6裡面的for of方法,那麼也可以用for迴圈的方法,來實現

for迴圈第一版

function compact (array) {
  const result = []
  if (array === null) {
    return result
  }
  for (let i = 0; i < array.length; i++) {
    let value = array[i]
    if (arr[i]) {
      result.push(value)
    }
  }
  return result
}

for迴圈第二版

function compact (array) {
  let resIndex = 0
  const result = []
  if (array === null) {
    return result
  }
  for (let i = 0; i < array.length; i++) {
    const value = array[i]
    if (value) {
      result[resIndex++] = value
    }
  }
  return result
}

第一版跟第二版的區別在添加數組的方式不同,第一版用的是push,而第二版用的是索引賦值.從速度上來說第二版會更快

while迴圈

function compact (array) {
  const result = [] 
  if (array === null) {
    return result
  }
  let index = 0 
  let resIndex = 0 
  while (index < arr.length) {
    let value = array[index]
    if (value) {
      result[resIndex++] = value
    }
    index++
  }
  return result
}

map方法

function compact (array) {
  const result = []
  if (array === null) {
    return result
  }
  array.map(function (value) {
    if(value){
      result.push(value)
    }
  })
  return result
}

for in 迴圈

function compact (array) {
  const result = []
  if (array === null) {
    return result
  }
  let resIndex = 0
  for (let index in array) {
    const value = array[index]
    if (value) {
      result[resIndex++] = value
    }
  }
  return result
}

例外

通常我們在開發過程中,不需要把數組裡面的0去掉,稍微改一下源代碼就可以實現這個功能

function compact (array) {
  let resIndex = 0 
  const result = [] 
  if (arr === null) {
    return result
  }
  for (const value of array) {
    if (value || value === 0) {
      result[resIndex++] = value
    }
  }
  return result
}

參考資料

1. Lodash源碼講解(3)-compact函數
2. https://github.com/Hushabyme/lodash-comments/blob/master/compact.js
3. https://github.com/yeyuqiudeng/pocket-lodash/blob/master/compact.md