Lodash學習筆記 - compact函數

habren 發布于2019-08-22 15:25 / 2063人閱讀

摘要：文檔地址中文文檔英文文檔源碼地址創建一個新數組，包含原數組中所有的非假值元素。例如和都是被認為是假值。下面對比一下兩者效率，如下圖傳送門可以看到使用更快，如果沒有兼容性需求，還是使用原生函數比較好。

百忙之中（閑來無事）想抽點時間好好讀一下源碼，于是就選了Lodash來寫一個系列罷。讀源碼順序就按照loadsh文檔順序來。

文檔地址：中文文檔?? 英文文檔
源碼地址：gayhub

   _.compact(array)

創建一個新數組，包含原數組中所有的非假值元素。例如false, null, 0, "", undefined, 和 NaN 都是被認為是“假值”。
代碼比較簡單，直接上源碼：

   /**
 * 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

可以看到只是一個簡單的for of循環，然后將非真的值全部剔除，es5中的filter也可以做到。下面對比一下兩者效率，如下圖：傳送門

可以看到使用filter更快，如果沒有兼容性需求，還是使用es5原生函數比較好。

至于filter比較快的原因，猜測是chrome排序算法導致的，以后有空時間我會看一波源碼再來補充這篇blog

GPU云服務器云服務器學習筆記學習筆記一基礎學習筆記深度學習筆記

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93449.html

Lodash源碼講解-compact函數

摘要：首先我們先說一下這個函數的作用，這個函數接收一個數組作為參數然后將數組中所有通過布爾轉換可以變為的值去除從而生成一個新的數組。原文首發于Lodash源碼講解這是我們閱讀Lodash源碼的第3篇博客，在這篇文章里我們來學習一下Lodash的compact方法。 compact函數內部沒有依賴別的函數，讓我們先來看一下compact函數的源碼。 /** * Creates an ar...

glumes 2019-08-21 12:03 評論0 收藏0
lodash源碼分析之compact中的遍歷

摘要：到這里，源碼分析完了。但是，有兩個致命的特性的遍歷不能保證順序會遍歷所有可枚舉屬性，包括繼承的屬性。的遍歷順序依賴于執行環境，不同執行環境的實現方式可能會不一樣。小時候，鄉愁是一枚小小的郵票，我在這頭，母親在那頭。長大后，鄉愁是一張窄窄的船票，我在這頭，新娘在那頭。后來啊，鄉愁是一方矮矮的墳墓，我在外頭，母親在里頭。而現在，鄉愁是一灣淺淺的海峽，我在這頭，大...

dmlllll 2019-08-22 11:20 評論0 收藏0
lodash數組篇之2 compact()

摘要：創建一個新數組，包含原數組中所有的非假值元素。例如和都是被認為是假值。創建一個新數組，包含原數組中所有的非假值元素。例如false, null, 0, , undefined, 和 NaN 都是被認為是假值。以下是自己實現的compact() compact:(array)=>{ let result = [] //判斷參數是否是數組如果不是...

robin 2019-08-23 18:35 評論0 收藏0
2017-08-20 前端日報

摘要：前端日報精選數組所有全解密原生實現最簡單的圖片懶加載譯如何抓取數據中種常見的內存泄露陷阱內部原理，第一部分基礎渲染前端國際化中文深入理解筆記模塊掘金譯熱的冷的掘金模塊，桌面端的支付請求，和迷津欲有問遮罩層狀態丟失及解決方案全 2017-08-20 前端日報精選 JavaScript數組所有API全解密原生JS實現最簡單的圖片懶加載【譯】React如何抓取數據JavaScript 中 ...

molyzzx 2019-08-21 12:02 評論0 收藏0
Lodash 中文文檔 (v3.10.1) - “Chain” 方法

摘要：中文文檔方法方法創建一個包含的對象以開啟內置的方法鏈。注意該方法會修改包裝數組。返回返回強制轉為字符串的值示例執行方法鏈隊列并提取未包裝的值別名返回返回已處理的未包裝的值示例 Lodash 中文文檔 (v3.10.1) - Chain 方法 Translated by PeckZegOriginal Docs: Lodash v3.10.1 Docs Chain 方法 _(value)...

BLUE 2019-08-19 17:18 評論0 收藏0