Lodash源码讲解-compact函数

glumes 发布于2019-08-21 12:03 / 2000人阅读

摘要：首先我们先说一下这个函数的作用，这个函数接收一个数组作为参数然后将数组中所有通过布尔转换可以变为的值去除从而生成一个新的数组。

原文首发于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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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