vue，js获取两个数组交集，并集，补集，差集

vue，js获取两个数组交集，并集，补集，差集

1.对于简单的数字/字符串类的数组

//数组是简单数字或者字符串的交集、并集、补集、差集  es6
let arr1=[1,2,3,4,5];
let arr2=[4,5,6,7,8];
let set1=new Set(arr1),set2=new Set(arr2);
//交集
let mixed=arr1.filter(item=>set2.has(item));
console.log("交集",mixed);
//并集
let union=Array.from(new Set([...arr1,...arr2]));;
console.log("并集", union);
//补集 两个数组各自没有的集合
let complement=[...arr1.filter(item=>set2.has(item)==false),...arr2.filter(item=>set1.has(item)==false)];
console.log("补集", complement);
//差集 数组arr1相对于arr2所没有的
let differenceSet=arr1.filter(item=>set2.has(item)==false);
console.log("差集",differenceSet);

2.或使用filter方法和includes组合使用得到并集,交集,差集

	let arrNews = [...arr1, ...arr2];// 利用set数据结构将数组去重得到并集let all = new Set(arrNews);// 将一个数组筛选遍历与另一个数组进行比较，相同返回，得到交集let data = arr1.filter((item) => {if (arr2.includes(item)) {return item;}})// 将一个数组筛选遍历与两数组并集进行比较，不相同返回，得到差集let datas = [...all].filter((item) => {if (!data.includes(item)) {return item;}})

3.对于字符串类的数组，如：arr1 = [{id:‘1’,name:‘红’},{{id:‘2’,name:‘蓝’}]

 let arr1 = [{id:'1',name:'红'},{{id:'2',name:'蓝'}]let arr2 = [{id:'2',name:'蓝'},{{id:'3',name:'明'}]//交集(两个数组相同的数据)let mixed=[];arr1.forEach(item=>{arr2.forEach(items=>{if(item.id==items.id){//找到相同的就push进新的数组mixed.push(item);}});});console.log("交集",mixed);//并集(两个数组的合并，数据都是唯一的，不重复)let union=[...arr1, ...arr2];arr1.forEach(x=>{arr2.forEach(y=>{if(x.id==y.id){//找到相同的就删除union.splice(union.findIndex(item=>item.id==x.id),1);}});});console.log("并集", union);//补集(两个数组中除了相同的数据)let complement=[...arr1, ...arr2];arr1.forEach(x=>{arr2.forEach(y=>{if(x.id==y.id){//找到就删除,删除完相同的complement.splice(complement.findIndex(item=>item.id==x.id),1);}});});console.log("补集", complement);//差集(例如数组1中和数组2中不一样的数据)let differenceSet=[...arr1];arr1.forEach(x=>{let flag=arr2.some(y=>x.id==y.id);if(flag){//如果有相同的就删除differenceSet.splice(diff.findIndex(item=>item.id==x.id),1);}});console.log("差集", differenceSet);

4.对于字符串类的数组，这里的案例是在el-select中使用反选

解决：因为select选项是个数组对象，多选，change事件拿到的绑定的id的数组，所以使用map把全部数组的id整合到一个新的数组中，然后进行使用1种的es6方法，这样结构看起来清晰，代码整洁明了