Lodash.js学习（二）——difference深度理解

最新推荐文章于 2024-01-25 18:13:42 发布

置顶 bililibili

最新推荐文章于 2024-01-25 18:13:42 发布

阅读量5.2k

点赞数 1

分类专栏： Lodash学习笔记文章标签： lodash Lodash.js difference differenceBy differenceWith

本文链接：https://blog.csdn.net/fly_home_ysc/article/details/99072386

版权

Lodash学习笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前言

前面初始了lodash，涉及到的几个方法也比较简单，因此没有进行具体的讲解，这篇文章将对difference、differenceBy，differenceWith进行深度的讲解

_.difference(array, [values])：创建一个具有唯一array值的数组，每个值不包含在其他给定的数组中。（即创建一个新数组，这个数组中的值，为第一个数字（array 参数）排除了给定数组中的值。）该方法使用 SameValueZero做相等比较。结果值的顺序是由第一个数组中的顺序确定。

.differenceBy(array, [values], [iteratee=.identity])：这个方法类似 _.difference ，除了它接受一个 iteratee （迭代器），调用array 和 values 中的每个元素以产生比较的标准。结果值是从第一数组中选择。iteratee 会调用一个参数：(value)。（首先使用迭代器分别迭代array 和 values中的每个元素，返回的值作为比较值）。

differenceWith(array, [values], [comparator])：这个方法类似 _.difference ，除了它接受一个 comparator （比较器），它调用比较array，values中的元素。结果值是从第一数组中选择。comparator 调用参数有两个：(arrVal, othVal)。

具体讲解

_.difference(array, [values])：将array数组中元素与values中的元素做对比，去掉相同的元素，array剩下的元素组成的数组即为该方法的返回值,具体如下：

_.difference([3, 2, 1], [4, 2]);
// 结果为： [3, 1]

__.differenceBy(array, [values], [iteratee=_.identity])：iteratee 会调用一个参数将array 和 values中的所有元素进行迭代，然后对迭代后得到的元素进行对比，去掉迭代后相同的元素，array剩下的元素组成的数组即为该方法的返回值，具体如下：

_.differenceBy([3, 2, 3, 2], [-3, -2], val => {
    return val * val
})
//结果为：[]

说明：因为迭代器函数每次迭代为val*val，会对两个数组的每一个元素进行计算返回，迭代完成后两个数组的等待对比的元素依次为：[9,4,9,4]，[9,4]，然后以第一个数组为过滤数组，移除与第二个数组中包含的元素，剩下的就是最终的结果

_.differenceBy([3, 2, 3, 2], [-3, -2], val => {
    return val
})
//结果为：[3, 2, 3, 2]

说明：迭代后的数据为：[3, 2, 3, 2], [-3, -2]，然后以第一个数组为过滤数组，移除与第二个数组中包含的元素，剩下的就是最终的结果

_.differenceBy([3, 2, 3, 2], [-3, -2], val => {
    return false
})
//结果为：[]

说明：迭代后的数据为：[false，false，false，false], [false，false]，然后以第一个数组为过滤数组，移除与第二个数组中包含的元素，剩下的就是最终的结果

_.differenceBy([3, 2, 3, 2], [-3, -2], val => {
    return true
})
//结果为：[]

说明：迭代后的数据为：[true，true，true，true], [true，true]，然后以第一个数组为过滤数组，移除与第二个数组中包含的元素，剩下的就是最终的结果

总结为：

该方法将以迭代器函数的返回值作为每一个元素的对比值进行对比，以第一个数组为准，去掉对比中相同的元素

_.differenceWith(array, [values], [comparator])：comparator比较器接受两个参数，以第一个数组为数组，将两个参数进行对比，返回的结果为true就移除该元素，反之则保留该函数。具体如下：

_.differenceBy([3, 2, 3, 2], [-3, -2], (a,b) => {
   console.log(a, b)
    return true
})
/结果为：[]

说明：将[3, 2, 3, 2]的每一个元素与[-3, -2]比较，如果比较结果为true，则取第一个数组中的下一个元素进行对比，否则将于第二个数组中的所有元素全部比较完成才会进行第一个数组中的下一个元素进行对比。
因此console打印的数据分别为：
3 -3
2 -3
3 -3
2 -3

_.differenceBy([3, 2, 3, 2], [-3, -2], (a,b) => {
    console.log(a, b)
    return false
})
/结果为：[3, 2, 3, 2]

说明：将[3, 2, 3, 2]的每一个元素与[-3, -2]比较，如果比较结果为true，则取第一个数组中的下一个元素进行对比，否则将于第二个数组中的所有元素全部比较完成才会进行第一个数组中的下一个元素进行对比。
因此console打印的数据分别为：
3 -3
3 -2
2 -3
2 -2
3 -3
3 -2
2 -3
2 -2