js数组对象交集、并集、差集

需求

在实际项目中，特别是拿到后端返回的数组对象数据接口，有些是需要我们前端自己重写整合成前端需要的数组对象结构数据才能满足前端的渲染需求的。其中，数组的交集、并集、差集经常会涉及到。

交集

两组数组中都包含的元素

// 普通数组
const arr1 = [1, 2, 3, 4, 5 , 8 ,9],
      arr2 = [5, 6, 7, 8, 9];
// 方法1：
const intersection1 = arr1.filter((item) => arr2.includes(item));
console.log(intersection1);

//方法2：
const intersection2 = Array.from(new Set(arr1.concat(b)));
console.log(intersection2);

// 数组对象
const arr1 = [{ name: 'name1', id: 1 }, { name: 'name2', id: 2 }, { name: 'name3', id: 3 }, { name: 'name5', id: 5 }];
const arr2 = [{ name: 'name1', id: 1 }, { name: 'name2', id: 2 }, { name: 'name3', id: 3 }, { name: 'name4', id: 4 }, { name: 'name5', id: 5 }];
// 方法1：
const arr2Ids = arr2.map(item => item.id);
const intersection1 = arr1.filter(item => arr2Ids.includes(item.id))
console.log(intersection2);

// 方法2：
const intersection2 = arr1.reduce((pre, cur, index, array) => {
	if (arr2.some(item => item.id === cur.id)) {
        pre.push(cur)
      }
      return pre;
    }, []);
    console.log(intersection2);

并集

两组数组合并起来，去除重复的元素

// 普通数组
const arr1 = [1, 2, 3, 4, 5 , 8 ,9],
      arr2 = [5, 6, 7, 8, 9];
      
const result1 = arr1.concat(arr2.filter(item => !arr1.includes(item)))
console.log(result1);

// 数组对象
const arr1 = [{ name: 'name1', id: 1 }, { name: 'name2', id: 2 }, { name: 'name3', id: 3 }, { name: 'name5', id: 5 }];
const arr2 = [{ name: 'name1', id: 1 }, { name: 'name2', id: 2 }, { name: 'name3', id: 3 }, { name: 'name4', id: 4 }, { name: 'name5', id: 5 }];

const arr3 = arr1.concat(arr2);
let obj = {};
const result2 = arr3.reduce((prev, cur, index, array) => {
	obj[cur.id] ? '' : obj[cur.id] = true && prev.push(cur);
      return prev
    }, []);
console.log(result2);

差集

一数组相对于另一数组中没有的

// 普通数组
const arr1 = [1, 2, 3, 4, 5 , 8 ,9],
      arr2 = [5, 6, 7, 8, 9];

const result1 = arr1.filter((item) => !arr2.includes(item));
console.log(result1);


// 数组对象
const arr1 = [{ name: 'name1', id: 1 }, { name: 'name2', id: 2 }, { name: 'name3', id: 3 }, { name: 'name5', id: 5 }];
const arr2 = [{ name: 'name1', id: 1 }, { name: 'name2', id: 2 }, { name: 'name3', id: 3 }, { name: 'name4', id: 4 }, { name: 'name5', id: 5 }];

const result2 = arr1.filter(item => arr2.every(subItem => subItem.id !== item.id));
console.log(result2)

最后：实现此三种类型的方法还有很多，该文章只是列举一些自己在项目中用到的方法。