资讯专栏INFORMATION COLUMN

「读懂源码系列2」我从 lodash 源码中学到的几个知识点

Amio / 2938人阅读

摘要:今天要讲的,是我从的源码实现文件中学到的几个很基础,却又容易被忽略的知识点。在函数式编程中,函数是一等公民,它可以只是根据参数,做简单的组合操作,再作为别的函数的返回值。所以,阅读源码,是一种很棒的重温基础知识的方式。

前言

上一篇文章 「前端面试题系列8」数组去重(10 种浓缩版) 的最后,简单介绍了 lodash 中的数组去重方法 _.uniq,它可以实现我们日常工作中的去重需求,能够去重 NaN,并保留 {...}

今天要讲的,是我从 _.uniq 的源码实现文件 baseUniq.js 中学到的几个很基础,却又容易被忽略的知识点。

三个 API

让我们先从三个功能相近的 API 讲起,他们分别是:_.uniq_.uniqBy_.uniqWith。它们三个背后的实现文件,都指向了 .internal 下的 baseUniq.js

区别在于 _.uniq 只需传入一个源数组 array, _.uniqBy 相较于 _.uniq 要多传一个迭代器 iteratee,而 _.uniqWith 要多传一个比较器 comparator。iterateecomparator 的用法,会在后面说到。

以 _.uniqWith 为例,它是这样调用 _.baseUniq 的:

function uniqWith(array, comparator) {
  comparator = typeof comparator == "function" ? comparator : undefined
  return (array != null && array.length)
    ? baseUniq(array, undefined, comparator)
    : []
}
baseUniq 的实现原理

baseUniq 的源码并不多,但比较绕。先贴一下的源码。

const LARGE_ARRAY_SIZE = 200

function baseUniq(array, iteratee, comparator) {
  let index = -1
  let includes = arrayIncludes
  let isCommon = true

  const { length } = array
  const result = []
  let seen = result

  if (comparator) {
    isCommon = false
    includes = arrayIncludesWith
  }
  else if (length >= LARGE_ARRAY_SIZE) {
    const set = iteratee ? null : createSet(array)
    if (set) {
      return setToArray(set)
    }
    isCommon = false
    includes = cacheHas
    seen = new SetCache
  }
  else {
    seen = iteratee ? [] : result
  }
  outer:
  while (++index < length) {
    let value = array[index]
    const computed = iteratee ? iteratee(value) : value

    value = (comparator || value !== 0) ? value : 0
    if (isCommon && computed === computed) {
      let seenIndex = seen.length
      while (seenIndex--) {
        if (seen[seenIndex] === computed) {
          continue outer
        }
      }
      if (iteratee) {
        seen.push(computed)
      }
      result.push(value)
    }
    else if (!includes(seen, computed, comparator)) {
      if (seen !== result) {
        seen.push(computed)
      }
      result.push(value)
    }
  }
  return result
}

为了兼容刚才说的三个 API,就产生了不少的干扰项。如果先从 _.uniq 入手,去掉 iteratee 和 comparator 的干扰,就会清晰不少。

function baseUniq(array) {
    let index = -1
    const { length } = array
    const result = []

    if (length >= 200) {
        const set = createSet(array)
        return setToArray(set)
    }

    outer:
    while (++index < length) {
        const value = array[index]
        if (value === value) {
            let resultIndex = result.length
            while (resultIndex--) {
                if (result[resultIndex] === value) {
                    continue outer
                }
            }
            result.push(value)
        } else if (!includes(seen, value)) {
            result.push(value)
        }
    }
    return result
}

这里有 2 个知识点。

知识点一、NaN === NaN 吗?

在源码中有一个判断 value === value,乍一看,会觉得这是句废话!?!但其实,这是为了过滤 NaN 的情况。

MDN 中对 NaN 的解释是:它是一个全局对象的属性,初始值就是 NaN。它通常都是在计算失败时,作为 Math 的某个方法的返回值出现的。

判断一个值是否是 NaN,必须使用 Number.isNaN()isNaN(),在执行自比较之中:NaN,也只有 NaN,比较之中不等于它自己。

NaN === NaN;        // false
Number.NaN === NaN; // false
isNaN(NaN);         // true
isNaN(Number.NaN);  // true

所以,在源码中,当遇到 NaN 的情况时,baseUniq 会转而去执行 !includes(seen, value) 的判断,去处理 NaN 。

知识点二、冒号的特殊作用

在源码的主体部分,while 语句之前,有一行 outer:,它是干什么用的呢? while 中还有一个 while 的内部,有一行 continue outer,从语义上理解,好像是继续执行 outer,这又是种什么写法呢?

outer:
while (++index < length) {
    ...
    while (resultIndex--) {
        if (result[resultIndex] === value) {
            continue outer
        }
    }
}

我们都知道 Javascript 中,常用到冒号的地方有三处,分别是:A ? B : C 三元操作符、switch case 语句中、对象的键值对组成

但其实还有一种并不常见的特殊作用:标签语句。在 Javascript 中,任何语句都可以通过在它前面加上标志符和冒号来标记(identifier: statement),这样就可以在任何地方使用该标记,最常用于循环语句中。

所以,在源码中,outer 只是看着有点不习惯,多看两遍就好了,语义上还是很好理解的。

_.uniqBy 的 iteratee

_.uniqBy 可根据指定的 key 给一个对象数组去重,一个官网的例子如下:

// The `_.property` iteratee shorthand.
_.uniqBy([{ "x": 1 }, { "x": 2 }, { "x": 1 }], "x");
// => [{ "x": 1 }, { "x": 2 }]

这里的 "x"_.property("x") 的缩写,它指的就是 iteratee

从给出的例子和语义上看,还挺好理解的。但是为什么 _.property 就能实现对象数组的去重了呢?它又是如何实现的呢?

@param {Array|string} path The path of the property to get.
@returns {Function} Returns the new accessor function.

function property(path) {
  return isKey(path) ? baseProperty(toKey(path)) : basePropertyDeep(path)
}

从注释看,property 方法会返回一个 Function,再看 baseProperty 的实现:

@param {string} key The key of the property to get.
@returns {Function} Returns the new accessor function.

function baseProperty(key) {
  return (object) => object == null ? undefined : object[key]
}

咦?怎么返回的还是个 Function ?感觉它什么也没干呀,那个参数 object 又是哪里来的?

知识点三、纯函数的概念

纯函数,是函数式编程中的概念,它代表这样一类函数:对于指定输出,返回指定的结果。不存在副作用

// 这是一个简单的纯函数
const addByOne = x => x + 1;

也就是说,纯函数的返回值只依赖其参数,函数体内不能存在任何副作用。如果是同样的参数,则一定能得到一致的返回结果。

function baseProperty(key) {
  return (object) => object == null ? undefined : object[key]
}

baseProperty 返回的就是一个纯函数,在符合条件的情况下,输出 object[key]。在函数式编程中,函数是“一等公民”,它可以只是根据参数,做简单的组合操作,再作为别的函数的返回值。

所以,在源码中,object 是调用 baseProperty 时传入的对象。 baseProperty 的作用,是返回期望结果为 object[key] 的函数。

_.uniqWith 的 comparator

还是先从官网的小例子说起,它会完全地给对象中所有的键值对,进行比较。

var objects = [{ "x": 1, "y": 2 }, { "x": 2, "y": 1 }, { "x": 1, "y": 2 }];

_.uniqWith(objects, _.isEqual);
// => [{ "x": 1, "y": 2 }, { "x": 2, "y": 1 }]

而在 baseUniq 的源码中,可以看到最终的实现,需要依赖 arrayIncludesWith 方法,以下是它的源码:

function arrayIncludesWith(array, target, comparator) {
  if (array == null) {
    return false
  }

  for (const value of array) {
    if (comparator(target, value)) {
      return true
    }
  }
  return false
}

arrayIncludesWith 没什么复杂的。comparator 作为一个参数传入,将 targetarray 的每个 value 进行处理。从官网的例子看,_.isEqual 就是 comparator,就是要比较它们是否相等。

接着就追溯到了 _.isEqual 的源码,它的实现文件是 baseIsEqualDeep.js。在里面看到一个让我犯迷糊的写法,这是一个判断。

/** Used to check objects for own properties. */
const hasOwnProperty = Object.prototype.hasOwnProperty
...

const objIsWrapped = objIsObj && hasOwnProperty.call(object, "__wrapped__")

hasOwnProperty ?call, "__wrapped__" ?

知识点四、对象的 hasOwnProperty

再次查找到了 MDN 的解释:所有继承了 Object 的对象都会继承到 hasOwnProperty 方法。它可以用来检测一个对象是否含有特定的自身属性;会忽略掉那些从原型链上继承到的属性。

o = new Object();
o.prop = "exists";
o.hasOwnProperty("prop");             // 返回 true
o.hasOwnProperty("toString");         // 返回 false
o.hasOwnProperty("hasOwnProperty");   // 返回 false

call 的用法可以参考这篇 细说 call、apply 以及 bind 的区别和用法。

那么 hasOwnProperty.call(object, "__wrapped__") 的意思就是,判断 object 这个对象上是否存在 "__wrapped__" 这个自身属性。

wrapped 是什么属性?这就要说到 lodash 的延迟计算方法 _.chain,它是一种函数式风格,从名字就可以看出,它实现的是一种链式的写法。比如下面这个例子:

var names = _.chain(users)
  .map(function(user){
    return user.user;
  })
  .join(" , ")
  .value();

如果你没有显样的调用value方法,使其立即执行的话,将会得到如下的LodashWrapper延迟表达式:

LodashWrapper {__wrapped__: LazyWrapper, __actions__: Array[1], __chain__: true, constructor: function, after: function…}

因为延迟表达式的存在,因此我们可以多次增加方法链,但这并不会被执行,所以不会存在性能的问题,最后直到我们需要使用的时候,使用 value() 显式立即执行即可。

所以,在 baseIsEqualDeep 源码中,才需要做 hasOwnProperty 的判断,然后在需要的情况下,执行 object.value()

总结

阅读源码,在一开始会比较困难,因为会遇到一些看不明白的写法。就像一开始我卡在了 value === value 的写法,不明白它的用意。一旦知道了是为了过滤 NaN 用的,那后面就会通畅很多了。

所以,阅读源码,是一种很棒的重温基础知识的方式。遇到看不明白的点,不要放过,多查多问多看,才能不断地夯实基础,读懂更多的源码思想,体会更多的原生精髓。如果我在一开始看到 value === value 时就放弃了,那或许就不会有今天的这篇文章了。

PS:欢迎关注我的公众号 “超哥前端小栈”,交流更多的想法与技术。

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

转载请注明本文地址:https://www.ucloud.cn/yun/109206.html

相关文章

  • 读懂源码系列4」lodash 是如何实现深拷贝的(下)

    摘要:用于检测自己是否在自己的原型链上如果是函数,则取出该函数的原型对象否则,取出对象的原型对象其中,的判断,是为了确定的类型是对象或数组。相当于,而的构造函数是一个函数对象。 showImg(https://segmentfault.com/img/bVbq2N1?w=640&h=437); 前言 接着上一篇文章 lodash 是如何实现深拷贝的(上),今天会继续解读 _.cloneDee...

    zombieda 评论0 收藏0
  • 我从 fabric.js 中学到了什么

    摘要:前言熟悉的朋友想必都使用或者听说过,算是一个元老级的库了,从第一个版本发布到现在,已经有年时间了。中缓存是默认开启的,同时也可以设置为禁用。处理屏屏幕模糊的问题,直接给出处理方法,就不展开说了。 前言 熟悉 canvas 的朋友想必都使用或者听说过 Fabric.js,Fabric 算是一个元老级的 canvas 库了,从第一个版本发布到现在,已经有 8 年时间了。我近一年时间也在项目...

    oogh 评论0 收藏0
  • 我从 fabric.js 中学到了什么

    摘要:前言熟悉的朋友想必都使用或者听说过,算是一个元老级的库了,从第一个版本发布到现在,已经有年时间了。中缓存是默认开启的,同时也可以设置为禁用。处理屏屏幕模糊的问题,直接给出处理方法,就不展开说了。 前言 熟悉 canvas 的朋友想必都使用或者听说过 Fabric.js,Fabric 算是一个元老级的 canvas 库了,从第一个版本发布到现在,已经有 8 年时间了。我近一年时间也在项目...

    forsigner 评论0 收藏0
  • 读懂源码系列3」lodash 是如何实现深拷贝的(上)

    摘要:上对位运算的解释是它经常被用来创建处理以及读取标志位序列一种类似二进制的变量。位运算,常用于处理同时存在多个布尔选项的情形。掩码中的每个选项的值都是的幂,位运算是位的。位运算,说白了就是直接对某个数据在内存中的二进制位,进行运算操作。 showImg(https://segmentfault.com/img/bVbrC56?w=2208&h=1242); 前言 上一篇文章 「前端面试题...

    flyer_dev 评论0 收藏0
  • 前端基础进阶(十一):详细图解jQuery对象,以及如何扩展jQuery插件

    摘要:而在构造函数中,返回了的实例对象。在中直接返回过的实例,这里的是的真正构造函数最后对外暴露入口时,将字符与对等起来。因此当我们直接使用创建一个对象时,实际上是创建了一个的实例,这里的正真构造函数是原型中的方法。 showImg(https://segmentfault.com/img/remote/1460000008749398); 早几年学习前端,大家都非常热衷于研究jQuery源...

    RebeccaZhong 评论0 收藏0

发表评论

0条评论

Amio

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<