Lodash源碼講解-compact函數

glumes 發布于2019-08-21 12:03 / 2022人閱讀

摘要：首先我們先說一下這個函數的作用，這個函數接收一個數組作為參數然后將數組中所有通過布爾轉換可以變為的值去除從而生成一個新的數組。

原文首發于Lodash源碼講解

這是我們閱讀Lodash源碼的第3篇博客，在這篇文章里我們來學習一下Lodash的compact方法。

compact函數內部沒有依賴別的函數，讓我們先來看一下compact函數的源碼。

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

首先我們先說一下這個函數的作用，這個函數接收一個數組作為參數；然后將數組中所有通過布爾轉換可以變為false的值去除；從而生成一個新的數組。

那么那些值通過布爾轉換會變為false呢；這些值有：0，""，false，null，undefined，NaN。

因為這個函數比較簡單，我們就不劃分步驟了，直接進行講解；首先我們初始化了兩個變量，resIndex用來表示我們返回的數組的索引；result是我們新創建的一個數組，這個數組就是我們要返回的數組；接下來，如果傳遞的數組為空，我們直接返回一個空的數組；接下來就是使用ES6新的語法，for...of對傳遞的數組進行循環，將能夠通過布爾轉化為false的值去除，然后就獲取到了我們想要的結果。

那么，接下來我們首先把這個源碼部分實現一遍；雖然簡單，但是還是要自己敲一遍代碼的；切記不要眼高手低。compact是我自己又重新實現一遍的代碼。

接下來我們考慮一下，如果我們不使用for...of來循環數組，而是使用數組的map方法，或者是使用while進行數組的循環；它們的效率有多大的差異？讓我們來實踐一下，首先是使用map方法，我們使用如下的代碼來進行測試：

// 使用數組原生的map方法
function compact(array) {
    // 判斷array是否為空
    if(array == null) {
        return [];
    }

    let result = [];

    array.map((value) => {
        if(value) {
            result.push(value);
        }
    });

    return result;
}

再接著我們使用while進行數組的循環，使用如下的代碼進行測試：

// 使用while進行數組的循環

function compact(array) {
    // 判斷array是否為空
    if(array == null) {
        return [];
    }

    let result = [];
    let index = 0;
    let resIndex = 0;
    let value;
    const length = array.length;

    while(index < length) {
        value = array[index];
        if(value) {
            result[resIndex++] = value;
        }
        index++;
    }

    return result;
}

我將這兩個方法都添加到之前的那個例子中了，大家可以點擊這里查看。

接下來我們就要進行性能的測試了，我寫了一個測試的用例；大家可以點擊這里查看。經過多次測試發現，使用lodash的compact方法和使用while進行數組循環的compact方法的性能都還是不錯的，使用map進行數組循環的compact方法性能最差；但是使用map方法的compact方法代碼量是比較少的。

性能比較的圖如下圖所示：

lodash的compact方法性能比較好的一次測試：

使用while進行數組循環的compact方法性能比較好的一次測試：

云服務器 GPU云服務器 php函數講解 webrtc源碼講解 Compaction compact

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

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

lodash源碼分析之compact中的遍歷

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

dmlllll 2019-08-22 11:20 評論0 收藏0
Lodash學習筆記 - compact函數

摘要：文檔地址中文文檔英文文檔源碼地址創建一個新數組，包含原數組中所有的非假值元素。例如和都是被認為是假值。下面對比一下兩者效率，如下圖傳送門可以看到使用更快，如果沒有兼容性需求，還是使用原生函數比較好。百忙之中（閑來無事）想抽點時間好好讀一下源碼，于是就選了Lodash來寫一個系列罷。讀源碼順序就按照loadsh文檔順序來。文檔地址：中文文檔?? 英文文檔源碼地址：gayhub ...

habren 2019-08-22 15:25 評論0 收藏0
Lodash源碼講解-chunk函數

摘要：原文首發于源碼講解這是我們閱讀源碼的第篇博客，在這篇文章里我們來學習一下的方法。好啦，關于函數暫時就先講到這里啦。與惡龍纏斗過久自身亦成為惡龍凝視深淵過久深淵將回以凝視。原文首發于Lodash源碼講解這是我們閱讀Lodash源碼的第2篇博客，在這篇文章里我們來學習一下Lodash的chunk方法。 chunk函數內部依賴其他的函數，依賴的函數如下所示； slice 按照慣例，我們先...

ISherry 2019-08-21 11:59 評論0 收藏0
Lodash源碼講解-slice函數

摘要：本文首發于技術風暴源碼講解這是我們閱讀源碼的第篇博客，這一篇博客主要介紹的函數，這個函數內部的實現沒有依賴別的函數我們這篇博客就來講解一下這個函數。本文首發于技術風暴-Lodash源碼講解這是我們閱讀源碼的第1篇博客，這一篇博客主要介紹Lodash的slice函數，這個函數內部的實現沒有依賴別的函數；我們這篇博客就來講解一下這個slice函數。我們首先來看一下這個函數的源碼，源碼...

李義 2019-08-22 10:53 評論0 收藏0
lodash數組篇之2 compact()

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

robin 2019-08-23 18:35 評論0 收藏0