前言

今天是lodahsh 的 第 7 篇，今天带来的是 intersection,intersectionBy,intersectionWith, 希望自己能够坚持下去！

Api

_.intersection([arrays])

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

Arguments

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

Returns

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

Example

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

简单来说，就是找相同元素

source

var intersection =baseRest(function(arrays) {
  // 对 arrays 的每一项进行判断是否是一个 arrayLike
  var mapped = arrayMap(arrays, castArrayLikeObject);
  // [ [ 2, 1 ], [ 2, 3 ] ]
  return (mapped.length && mapped[0] === arrays[0])
    ? baseIntersection(mapped)
    : [];
});

简化版

var intersection = function(...arrays) {
  return  baseIntersection(arrays)
};

如果传入intersection的 值 是 [2, 1], [2, 3],那么经过 ...arrays，arrays 会变成 [ [2, 1], [2, 3] ];

那么就以 arrays = [ [2, 1], [2, 3] ]为例， 分析一下 baseIntersection

baseIntersection

先看最简版

// arrays =  [ [2, 1], [2, 3] ];
function baseIntersection(arrays){
// 第一个数组的长度
    var  length = arrays[0].length,
    // arrays 总共的数组个数
    othLength = arrays.length,
    // 临时变量
    othIndex = othLength,
    // result 的最大长度
    maxLength = Infinity,
    // 结果数组
    result = [];
  
  // 找到arrays 中长度最小的值
  while (othIndex--) {
       var array = arrays[othIndex];
       maxLength = Math.min(array.length, maxLength);
  }
      
   // 取出第一个数组 [2, 1]
  array = arrays[0];
  var index = -1;
   
   outer: while (++index < length && result.length < maxLength){
     // 第一个数组的每一个元素
       var value = array[index];
      // 去重,如果 result 数组已经存在当前元素，则不需要再次添加
      if (!result.includes(value)) {
      
      othIndex = othLength;
      // 遍历剩余 数组,arrays[othIndex] 是每一个剩余数组
      // 由于 是倒序循环，otherIndex 不会等于0，也就是刚好略过要匹配的数组
      while (--othIndex) {
        // 如果不存在，则继续下一次循环 
        if (!arrays[othIndex].includes(value)) {
          continue outer;
        }
      }
      
     // 如果其他的数组都存在，则把 value 存入 result 结果中
      result.push(value);
    }
   }
}

总体来说，baseIntersection 基本上是拿着第一个数组的每一项元素，然后去遍历剩余数组，判断元素是否在剩余数组中，如果所有的剩余数组都不包含，则直接放入 result 中

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

This method is like _.intersection except that it accepts iteratee which is invoked for each element of each arrays 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) .

Arguments

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

Returns

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

Example

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

增加了一个迭代条件，也就是需要对每一个元素执行这个条件，然后判断是否存在

比如 intersectionBy([2.1, 1.2], [2.3, 3.4], Math.floor), 对每一个数组的每一个元素执行 Math.floor 方法，找经过处理后相同的元素

source 简化版

var intersectionBy = function (...arrays) {
 let iteratee =  arrays.pop(); // 最后一项
  return baseIntersection(arrays, baseIteratee(iteratee));
};

baseIteratee 就是格式化对象，转化为 函数

var baseIteratee = value =>{
   if (typeof value == "function") {
    return value;
  }
  
  if(typeof value == "string"){
      return (value)=>{
          return object=>{
              return object[value]
          }
      }
  }
}

改造一下 baseIntersection

function baseIntersection(arrays, iteratee) {
  // 第一个数组的长度
  var length = arrays[0].length,
    // arrays 总共的数组个数
    othLength = arrays.length,
    othIndex = othLength,
    maxLength = Infinity,
    // 结果数组
    result = [],
    //🚀🚀🚀 添加一个缓存
    // 形如 { [0:[xx,xx2],1:[yy,yy1] }
    caches = new Map();
    
  while (othIndex--) {
    var array = arrays[othIndex];

    // 🚀🚀🚀格式化数组中的每一项
    if (othIndex && iteratee) {
      array = array.map(iteratee);
    }
    
    // 🚀🚀🚀 添加进入缓存中
    if (iteratee) {
      caches.set(othIndex, array);
    }

    maxLength = Math.min(array.length, maxLength);
  }

  // 取出第一个数组 [2, 1]
  array = arrays[0];
  var index = -1;

  outer: while (++index < length && result.length < maxLength) {
    // 第一个数组的每一个元素
    var value = array[index];
    
    // 🚀🚀🚀 对第一个数组的当前元素进行格式化
    computed = iteratee ? iteratee(value) : value;
    
    // 去重,如果 result 数组已经存在当前元素，则不需要再次添加
    if (!result.includes(computed)) {
      othIndex = othLength;

      // 遍历剩余 数组,arrays[othIndex] 是每一个剩余数组
      // 由于 是倒序循环，otherIndex 不会等于0，也就是刚好略过要匹配的数组
      while (--othIndex) {
      // 🚀🚀🚀 根据下标 获取缓存数组
        var cache = caches.get(othIndex);
        // 如果不存在，则继续下一次循环
        if (
        // 🚀🚀🚀 判断 格式化后的元素 是否存在于 缓存数组中
          !(cache ? cache.includes(computed) : arrays[othIndex].includes(computed))
        ) {
          continue outer;
        }
      }
      // 如果其他的数组都存在，则把 value 存入 result 结果中
      result.push(value);
    }
  }
  return result;
}

通过一个缓存 caches 来缓存经过 iteratee 的元素数组，然后在遍历剩余数组时候， 对 第一个元素中的元素 执行 iteratee 获取 computed , 然后判断 computed 是否存在于 caches 的缓存的数组

总体来说结构比较清晰

intersectionWith([arrays], [comparator])

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

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

其实就是加了一个自定义条件，不再使用以前的 Array.includes 来判断是否包含，使用自定义函数来判断是否包含

来看看吧

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
}

source

最后一项是比较器

var intersectionWith = function (...arrays) {
  let comparator =  arrays.pop(); // 最后一项
  return baseIntersection(arrays, undefined, comparator);
};

只需要替换 Array.includes 即可，使用传入的 比较器

function baseIntersection(arrays, iteratee,comparator) {
  // 🚀🚀🚀 如果有传入比较器，则使用自定义比较器
  var includes = comparator ? arrayIncludesWith : (array,ele)=>{
    return array.includes(ele)
  };

  var length = arrays[0].length,
    // arrays 总共的数组个数
    othLength = arrays.length,
    othIndex = othLength,
    maxLength = Infinity,
    // 结果数组
    result = [],
    caches = new Map();
  while (othIndex--) {
    var array = arrays[othIndex];

    if (othIndex && iteratee) {
      array = array.map(iteratee);
    }

    if (iteratee) {
      caches.set(othIndex, array);
    }

    maxLength = Math.min(array.length, maxLength);
  }


  // 取出第一个数组 [2, 1]
  array = arrays[0];
  var index = -1;

  outer: while (++index < length && result.length < maxLength) {
    // 第一个数组的每一个元素
    var value = array[index];
    computed = iteratee ? iteratee(value) : value;
    
    // 去重,如果 result 数组已经存在当前元素，则不需要再次添加
    // 🚀🚀🚀 使用自定义比较器
    if (!includes(result, computed, comparator)) {
      othIndex = othLength;

      // 遍历剩余 数组,arrays[othIndex] 是每一个剩余数组
      // 由于 是倒序循环，otherIndex 不会等于0，也就是刚好略过要匹配的数组
      while (--othIndex) {
        var cache = caches.get(othIndex);
        // 如果不存在，则继续下一次循环
         // 🚀🚀🚀 使用自定义比较器
        if (
          !(cache ? includes(cache,computed,comparator): 
         
          includes(arrays[othIndex], computed, comparator)
          )
        ) {
          continue outer;
        }
      }
      // 如果其他的数组都存在，则把 value 存入 result 结果中
      result.push(value);
    }
  }
  return result;
}

看看这个带条件的比较函数 - 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;
}

最后

intersection 这几个衍生函数 依旧是使用一个基础方法 baseIntersection

而且随着 lodash 看的越来越多，也逐渐有了看源码的心得，就是当遇见一个比较复杂的代码的时候，可以先从简单例子做起，先把基础主要的逻辑看明白，然后再不断的调试其他的各种方式