Lodash源碼講解-compact函數(shù)

glumes 發(fā)布于2019-08-21 12:03 / 2017人閱讀

摘要：首先我們先說(shuō)一下這個(gè)函數(shù)的作用，這個(gè)函數(shù)接收一個(gè)數(shù)組作為參數(shù)然后將數(shù)組中所有通過(guò)布爾轉(zhuǎn)換可以變?yōu)榈闹等コ龔亩梢粋€(gè)新的數(shù)組。

原文首發(fā)于Lodash源碼講解

這是我們閱讀Lodash源碼的第3篇博客，在這篇文章里我們來(lái)學(xué)習(xí)一下Lodash的compact方法。

compact函數(shù)內(nèi)部沒(méi)有依賴(lài)別的函數(shù)，讓我們先來(lái)看一下compact函數(shù)的源碼。

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

首先我們先說(shuō)一下這個(gè)函數(shù)的作用，這個(gè)函數(shù)接收一個(gè)數(shù)組作為參數(shù)；然后將數(shù)組中所有通過(guò)布爾轉(zhuǎn)換可以變?yōu)?b>false的值去除；從而生成一個(gè)新的數(shù)組。

那么那些值通過(guò)布爾轉(zhuǎn)換會(huì)變?yōu)?b>false呢；這些值有：0，""，false，null，undefined，NaN。

因?yàn)檫@個(gè)函數(shù)比較簡(jiǎn)單，我們就不劃分步驟了，直接進(jìn)行講解；首先我們初始化了兩個(gè)變量，resIndex用來(lái)表示我們返回的數(shù)組的索引；result是我們新創(chuàng)建的一個(gè)數(shù)組，這個(gè)數(shù)組就是我們要返回的數(shù)組；接下來(lái)，如果傳遞的數(shù)組為空，我們直接返回一個(gè)空的數(shù)組；接下來(lái)就是使用ES6新的語(yǔ)法，for...of對(duì)傳遞的數(shù)組進(jìn)行循環(huán)，將能夠通過(guò)布爾轉(zhuǎn)化為false的值去除，然后就獲取到了我們想要的結(jié)果。

那么，接下來(lái)我們首先把這個(gè)源碼部分實(shí)現(xiàn)一遍；雖然簡(jiǎn)單，但是還是要自己敲一遍代碼的；切記不要眼高手低。compact是我自己又重新實(shí)現(xiàn)一遍的代碼。

接下來(lái)我們考慮一下，如果我們不使用for...of來(lái)循環(huán)數(shù)組，而是使用數(shù)組的map方法，或者是使用while進(jìn)行數(shù)組的循環(huán)；它們的效率有多大的差異？讓我們來(lái)實(shí)踐一下，首先是使用map方法，我們使用如下的代碼來(lái)進(jìn)行測(cè)試：

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

    let result = [];

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

    return result;
}

再接著我們使用while進(jìn)行數(shù)組的循環(huán)，使用如下的代碼進(jìn)行測(cè)試：

// 使用while進(jìn)行數(shù)組的循環(huán)

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;
}

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

接下來(lái)我們就要進(jìn)行性能的測(cè)試了，我寫(xiě)了一個(gè)測(cè)試的用例；大家可以點(diǎn)擊這里查看。經(jīng)過(guò)多次測(cè)試發(fā)現(xiàn)，使用lodash的compact方法和使用while進(jìn)行數(shù)組循環(huán)的compact方法的性能都還是不錯(cuò)的，使用map進(jìn)行數(shù)組循環(huán)的compact方法性能最差；但是使用map方法的compact方法代碼量是比較少的。

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

lodash的compact方法性能比較好的一次測(cè)試：

使用while進(jìn)行數(shù)組循環(huán)的compact方法性能比較好的一次測(cè)試：