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

前言

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

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

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

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

具体讲解

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

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

2. __.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]，然后以第一个数组为过滤数组，移除与第二个数组中包含的元素，剩下的就是最终的结果

---

总结为：

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

---

3. _.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

---

总结为：

该方法将以比较器的返回结果为过滤条件，如果返回的结果为true，则移除该元素；如果一整组对比返回结果全部为false，则保留该元素。（即：第一个数组的每一个元素与第二个数组的所有元素的对比为一组，遇到true就终止对比，进入下一个元素对比组中，并且该组对应的元素会被移除

---

相关文档：

1. lodash官方文档
2. lodash的cdn加载地址：https://www.bootcdn.cn/lodash.js/
3. 上一篇：Lodash.js学习(一)——初识Lodash

欢迎伙伴们相互交流，讨论。