前言

今天是 lodash 的第十天(帝释天),今天是星期一，加油！

Api

_.union([arrays])

Creates an array of unique values, in order, from all given arrays using SameValueZero for equality comparisons.

Arguments

1. [arrays]  (...Array) : The arrays to inspect.

Returns

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

Example

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

这个方法的用意是获取两个参数中的相同的值，如果可以使用 js 高阶语法，可以写成下面

function union(...values){
    return [...new Set(values.flat(1))]
}

为了兼容低级语法，lodash 使用了简单的 for 和 while 来进行过滤， 我们来看看 lodash 是怎么实现的

source

var union = baseRest(function(arrays) {
  return baseUniq(baseFlatten(arrays, 1, isArrayLikeObject, true));
});

可以简化成

var union = function(...arrays){
    return baseUniq(arrays.flat(1))
}

其实 baseUniq 非常的简单，比如 arrays 是 [1],[1,2]，传入 baseUniq 时已经转换成了 [1,1,2]

baseUniq 只需要遍历 arrays，找到没有重复的元素存储起来即可

function baseUniq(values) {
  let index = -1;
  let result = [];
  let length = values.length;

  outer: while (++index < length) {
    let seenIndex = result.length;
    let value = values[index];
    
   while (seenIndex--) {
      if(result[seenIndex] == value){
        continue outer;
      }
    }
    
    result.push(value);
  }
  return result;
}

baseUniq 分为 内外 嵌套循环，外层循环传入数组，内层循环已经存储的结果数组 ，两者相互比较， 如果发现有重复的，直接跳过本次的外层循环

_.unionBy([arrays], [iteratee=_.identity])

This method is like _.union except that it accepts iteratee which is invoked for each element of each arrays to generate the criterion by which uniqueness is computed. Result values are chosen from the first array in which the value occurs. The iteratee is invoked with one argument: (value) .

Arguments

1. [arrays]  (...Array) : The arrays to inspect.
2. [iteratee=_.identity]  (Function) : The iteratee invoked per element.

Returns

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

Example

_.unionBy([2.1], [1.2, 2.3], Math.floor);
// => [2.1, 1.2]
 
// The `_.property` iteratee shorthand.
_.unionBy([{ 'x': 1 }], [{ 'x': 2 }, { 'x': 1 }], 'x');
// => [{ 'x': 1 }, { 'x': 2 }]

这次传入迭代器 iteratee,如果经过迭代器之后然后去掉重复元素

只需要对baseUniq 稍加改造

function baseUniq(values,iteratee) {
  let index = -1;
  let result = [];
  let length = values.length;
  
   // 🚀🚀🚀,如果是字符串，要转换成函数
  if(iteratee){
      if(typeof iteratee == "string"){
          iteratee = (object)=>object[iteratee]
      }
  }
  
  
  // 🚀🚀🚀
  let seen = iteratee ? [] : result;

  outer: while (++index < length) {
    let seenIndex = seen.length;
    let value =  values[index];
    
    // 🚀🚀🚀  对元素执行相同的操作
    let computed = iteratee ? iteratee(value) : values[index];

    while (seenIndex--) {
    
      if(seen[seenIndex] == computed){
       // 🚀🚀🚀 continue 是退出的外层循环，不会直接后续代码
       // 也就是说 如果有相同的元素，不会 push
        continue outer;
      }
    }
    
    if(iteratee){
      seen.push(computed)
    }

    result.push(value);
  }
  return result;
}

对每一个元素执行相同的 iteratee 操作，使用 seen 数组进行收集计算后的元素,然后使用result 收集原始元素

_.unionWith([arrays], [comparator])

This method is like _.union except that it accepts comparator which is invoked to compare elements of arrays. Result values are chosen from the first array in which the value occurs. The comparator is invoked with two arguments:  (arrVal, othVal) .

Arguments

1. [arrays]  (...Array) : The arrays to inspect.
2. [comparator]  (Function) : The comparator invoked per element.

Returns

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

Example

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

isEqual 是比较两个对象是否相等

isEqual 可以简化成

function isEqual(value1,value2){
  let k1 = Object.keys(value1),k2  = Object.keys(value2);

  if(k1.length != k2.length)return false;

  for(let k in value1){
    if(!(k in value2) || value2[k] != value1[k]){
      return false
    }
  }
  return true
}

比较两个对象的长度，然后比较是否有相同的 key 值，如果有相同的key 值，对应的 value 值是否相等

这次需要传入一个自定义比较器 comparator

function baseUniq(values,iteratee,comparator) {
  let index = -1;
  let result = [];
  let length = values.length;
  
  let seen = iteratee ? [] : result;
  // 🚀🚀🚀 是否使用 普通的比较方式
 let isCommon = true;
  if(comparator){
    isCommon= false;
  }
  outer: while (++index < length) {
    let seenIndex = seen.length;
    let value =  values[index];
    
    
    let computed = iteratee ? iteratee(value) : values[index];
     if(isCommon){ 
        while (seenIndex--) {
          if(seen[seenIndex] == computed){
            continue outer;
          }
        }
        if(iteratee){
          seen.push(computed)
        }
        result.push(value);
      }  // 🚀🚀🚀  自定义比较方式
     }else (!arrayIncludesWith(result, computed, comparator)) {
       result.push(value);
    }
 
  return result;
}

其中的 arrayIncludesWith,就是拿自定义比较器去比较数组中的元素是否与 value 相等

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;
}

结尾

今天的这个 union 和以前的方法一样，都是由一个基础方法构建而来