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方法,这样结构看起来清晰,代码整洁明了

你可能感兴趣的:(vue.js,javascript)