前言

今天是 lodash 系列的第二天，今天主要解析 difference,differenceBy,differenceWith,他们都是找出数组中的差异，但有些细节上的不同

Api

difference

按照老规矩，先看官网的例子

_.difference(array, [values])

Creates an array of array values not included in the other given arrays
using SameValueZero for equality comparisons. The order and references of result values are determined by the first array.

Arguments

1. array  (Array) : The array to inspect.
2. [values]  (…Array) : The values to exclude.

Returns

(Array) : Returns the new array of filtered values.

Example

_.difference([2, 1], [2, 3]);
// => [1]

简单来说，就是后面的参数与第一个参数数组进行比较，找到第一个参数数组中存在，但不存在后面参数的元素

source

源代码长这样

var difference = baseRest(function(array, values) {
  return isArrayLikeObject(array)
    ? baseDifference(array, baseFlatten(values, 1, isArrayLikeObject, true))
    : [];
})

可以简化成

var difference = function (array, values) {
  return isArrayLikeObject(array) ? baseDifference(array, values.flat(1)) : [];
}

我们一一来看，首先看 isArrayLikeObject

isArrayLikeObject

isArrayLikeObject 见名知意，判断是 类数组 和 对象

function isArrayLikeObject(value) {
  return isObjectLike(value) && isArrayLike(value);
}


function isObjectLike(value) {
  return value != null && typeof value == 'object';
}



function isArrayLike(value) {
  return value != null && isLength(value.length) && !isFunction(value);
}


/**
 * _.isLength(3);
 * // => true
 *
 * _.isLength(Number.MIN_VALUE);
 * // => false
 *
 * _.isLength(Infinity);
 * // => false
 *
 * _.isLength('3');
 * // => false
 */
// 最大安全数，也可以使用 Number.MAX_SAFE_INTEGER 直接代替
// value > -1 保证是大于0
// value % 1 == 0 保证是整数,可以使用 `Number.isInteger` 代替

var MAX_SAFE_INTEGER = 9007199254740991;
function isLength(value) {
  return typeof value == 'number' &&
    value > -1 && value % 1 == 0 && value <= MAX_SAFE_INTEGER;
}

上文中有一个函数 — 其中判断函数的方法 isFunction 是有点少见，要着重解释一下

isFunction

function isObject(value) {
  var type = typeof value;
  return value != null && (type == 'object' || type == 'function');
}

/** `Object#toString` result references. */
var asyncTag = '[object AsyncFunction]',
    funcTag = '[object Function]',
    genTag = '[object GeneratorFunction]',
    proxyTag = '[object Proxy]';

function isFunction(value) {
// 如果 value 是一个null 或者 类型不是对象或者函数的函数直接 retrun false
  if (!isObject(value)) {
    return false;
  }
  
  var tag = baseGetTag(value);
  return tag == funcTag || tag == genTag || tag == asyncTag || tag == proxyTag;
}

在 isFunction 中首先使用 isObject 来直接排除掉非 对象 / 函数类型， 然后使用 baseGetTag 获取元素的真正的类型，判断类型是否是

1. [object AsyncFunction] 异步函数 async function
2. [object Function] 普通函数 function
3. [object GeneratorFunction] 生成器函数 *function

baseGetTag

这个方法主要是获取元素的类型 返回值是 [object Object] / [object Array] / [object String]等等

var nullTag = '[object Null]',
    undefinedTag = '[object Undefined]';
    
var symToStringTag = Symbol.toStringTag;
    
function baseGetTag(value) {
    /**
        如果是 undefined 的话使用 [object Undefined]
        如果是 null 的话使用 [object Null]
        为啥不直接使用 `Object.prototype.call` 呢？
        如果 baseGetTag 不传递参数的话，应该返回 `[object Undefined]`
    */
  if (value == null) {
    return value === undefined ? undefinedTag : nullTag;
  }
  
  return (symToStringTag && symToStringTag in Object(value))
    ? getRawTag(value)
    : Object.prototype.toString.call(value);
}

getRawTag

/** Used for built-in method references. */
var objectProto = Object.prototype;


/** Used to check objects for own properties. */
var hasOwnProperty = objectProto.hasOwnProperty;


var nativeObjectToString = objectProto.toString;



var symToStringTag = Symbol.toStringTag

function getRawTag(value) {
  var isOwn = hasOwnProperty.call(value, symToStringTag),
      tag = value[symToStringTag];


  try {
    value[symToStringTag] = undefined;
    var unmasked = true;
  } catch (e) {}

  var result = nativeObjectToString.call(value);
  
  if (unmasked) {
    if (isOwn) {
      value[symToStringTag] = tag;
    } else {
      delete value[symToStringTag];
    }
  }
  return result;
}

如果 Symbol.toStringTag 存在于 value 的构造函数的话，使用 getRawTag, 否则使用 Object.prototype.toString 这个方法

为什么不直接使用 Object.prototype.toString 呢？

因为 getRawTag 是为了获取 「 真正」的原始类型

什么是 真正的 的类型？

我们一般使用 Object.prototype.toString.call 的方法获取 类型，但是是可以通过属性 Symbol.toStringTag 更改的

举个可以改变类型的例子

class ValidatorClass {
  get [Symbol.toStringTag]() {
    return 'Validator';
  }

}


console.log(Object.prototype.toString.call(new ValidatorClass()));
// "[object Validator]"

let s = {};
s[Symbol.toStringTag] = "Validator"
Object.prototype.toString.call(s) // [object Validator]

此时类型就不是常见的 [object Object], 而是自定义的类型 [object Validator];

既然可以更改类型，那该怎么获取「真正」的类型呢？答案就在 getRawTag 中

那么再来看 getRawTag
首先，它检查传入的对象（value）是否有自己的(isOwn方法) toStringTag 属性。如果有，它会保存这个属性的值，并尝试将其设置为 undefined

value[symToStringTag] = undefined;

2. 然后，它调用 Object.prototype.toString 方法来获取对象的 原始 toStringTag。由于 toStringTag 属性已经被设置为 undefined，所以这个方法会返回对象的 内置 toStringTag，而不是对象自己的 toStringTag。

// Symbol.toStringTag 已经设置为 undefined 的
// 所以可以获取原始的类型
var result = nativeObjectToString.call(value); 

3. 最后，如果对象原本就有自己的 toStringTag 属性，函数会将其恢复到原来的值。否则，它会删除这个属性。

  value[symToStringTag] = tag;

那么为什么要使用 try catch 呢？

是为了捕获属性访问器中的 set 的错误

let  s =  {
  _tag:'Validator',
  get [Symbol.toStringTag]() {
    return this._tag;
  },
  set [Symbol.toStringTag](val){
    this._tag = val
    throw new Error("Error")
  }
}

如果此时去掉用 s 的 [Symbol.toStringTag] 的方法， 如果不用 try catch 捕获，程序便会报错

总结

说了这么多，就是说明 isArrayLikeObject 就是判断元素是否是 一个数组 / 对象 / 函数

言归正传，我们来看看核心方法baseDifference

baseDifference

function baseDifference(array, values, iteratee, comparator) {
  var index = -1,

    isCommon = true,
    length = array.length,
    result = [],
    includes = arrayIncludesWith,
    valuesLength = values.length;



 
  // 先在外层把所有的迭代一遍
  if (iteratee) {
    values = values.map(iteratee);
  }


  // 此时要对遍历元素添加判断
  if (comparator) {
    isCommon = false;
  } 
  

  outer: while (++index < length) {
    var value = array[index];
    // 对原数组每一个元素进行迭代操作
   computed = iteratee == null ? value : iteratee(value);
   
    // 不使用比较器
    if (isCommon && computed === computed) {
      var valuesIndex = valuesLength;
      while (valuesIndex--) {
        if (values[valuesIndex] === computed) {
          continue outer;
        }
      }
      result.push(value);
    } else if (!includes(values, value,comparator)) {
      result.push(value);
    }
  }
  return result;
}

参数有点多，别急，慢慢解释

1. array 即原数组
2. values 要比较的数组
3. iteratee 自定义迭代器
4. comparator 自定义比较器

如果存在 自定义迭代器，那么就需要对values数组中的每一项进行 迭代
如果存在 自定义比较器, 那么说明要增加条件判断

函数比较简单，主要功能是通过判断 array[index] 与 values[valuesIndex] 是否相同，(由于 array 和 values 是不同数组，所以使用了两个索引),如果不相等，则把 array[index] 放入 result 中

如果存在 comparator，不再通过简单的 比较判断，使用自定义的比较器

默认的 comparator 是 arrayIncludesWith 也比较简单

arrayIncludesWith

function arrayIncludesWith(array, value, comparator) {
  var index = -1,

    length = array == null ? 0 : array.length;
  while (++index < length) {
    if (comparator(value, array[index])) {
      return true;
    }
  }
  return false;
}

那么看 difference 只用到了 baseDifference 其中的前两个参数

baseDifference(array, values.flat(1))

现在知道 baseDifference 是比较两个数组之间的不同，是不是一切都清晰起来
剩下的方法都是基于 baseDifference

differenceBy

This method is like _.difference except that it accepts iteratee which is invoked for each element of array and values to generate the criterion by which they’re compared. The order and references of result values are determined by the first array. The iteratee is invoked with one argument:
(value) .

Note:  Unlike _.pullAllBy, this method returns a new array.

Arguments

1. array  (Array) : The array to inspect.
2. [values]  (…Array) : The values to exclude.
3. [iteratee=_.identity]  (Function) : The iteratee invoked per element.

Returns

(Array) : Returns the new array of filtered values

Example

_.differenceBy([2.1, 1.2], [2.3, 3.4], Math.floor);
// => [1.2]
_.differenceBy([{ 'x': 2 }, { 'x': 1 }], [{ 'x': 1 }], 'x')
//=>{ 'x': 2 }

那么如你所见，最后一个参数就是一个迭代器

var differenceBy = function (array, ...values) {

  var iteratee = values.at(-1);
 
  iteratee = baseIteratee(iteratee);
  
  return isArrayLikeObject(array)
    ? baseDifference(array, values.flat(1), iteratee)
    : [];
};

baseIteratee 简化版

var baseIteratee = value => {
if (typeof value == "function") {
    return value;
  }

  
  if(typeof (value) != 'object'){
     return (object)=>{
         return object == null ? undefined : object[value];
     }
  }
}

在 baseDifference 中, 由于传入了 iteratee, 所以首先对参数做一次迭代处理
if (iteratee) { values = values.map(iteratee)}

而后又在
computed = iteratee == null ? value : iteratee(value); 对原数组元素做相同迭代处理

然后进行比较处理，理解 baseDifference 之后，这个就比较好理解，拿着两个自定义迭代器过滤之后的元素进行比较

_.differenceWith(array, [values], [comparator])

This method is like _.difference except that it accepts comparator which is invoked to compare elements of array to values. The order and references of result values are determined by the first array. The comparator is invoked with two arguments:  (arrVal, othVal) .

Arguments

1. array  (Array) : The array to inspect.
2. [values]  (…Array) : The values to exclude.
3. [comparator]  (Function) : The comparator invoked per element.

Returns

(Array) : Returns the new array of filtered values.

Example

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

说的很清楚，多了一个 comparator 自定义比较器

var differenceWith = function (array, ...values) {
  var comparator = values.at(-1);


  return isArrayLikeObject(array)
    ? baseDifference(array, values.flat(1), undefined, comparator)
    : [];
};

如果存在 comparator, 那么 isCommon = false, 就会执行else if (!includes(values, value,comparator)) { result.push(value)} 就会生效

结尾

difference、differenceBy 和 differenceWith 都是基于 baseDiffence(怪不得叫base)传入不同的参数，根据参数不同执行不同的逻辑，如果以后做底层代码封装，也许是个不错的想法

2023/6/23