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方法,这样结构看起来清晰,代码整洁明了
  • 3
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
### 回答1: 可以利用Vue的计算属性来获取两个数组中相同的元素,并将这些元素重新组成新的数组。 首先,在Vue的data中定义两个数组arr1和arr2,分别表示两个数组。 接下来,定义一个计算属性commonArr,通过遍历arr1和arr2,找到相同的元素,将这些元素存入一个新的数组中。 最后,通过在模板中使用commonArr计算属性的值,即可获得相同元素重新组成的新数组。 下面是示例代码: ``` <template> <div> <!-- 使用commonArr来展示相同元素重新组成的新数组 --> <div v-for="item in commonArr" :key="item">{{ item }}</div> </div> </template> <script> export default { data() { return { arr1: [1, 2, 3, 4, 5], arr2: [3, 4, 5, 6, 7] } }, computed: { commonArr() { let result = []; for (let i = 0; i < this.arr1.length; i++) { if (this.arr2.includes(this.arr1[i])) { result.push(this.arr1[i]); } } return result; } } } </script> ``` 在上述代码中,我们通过遍历arr1,通过includes方法判断arr2中是否包含当前元素,如果包含,则将该元素push进result数组。最后,返回result数组作为commonArr计算属性的值。 这样,我们就可以在模板中使用commonArr来展示相同元素重新组成的新数组了。 ### 回答2: 可以使用Vue的计算属性来获取两个数组中相同的元素,并组成新的数组。 首先,在Vue的data中定义两个数组arr1和arr2,分别存放需要比较的元素。 然后,在Vue的计算属性中定义一个新的数组intersect,用来存放两个数组相同的元素。 代码示例如下: ``` data() { return { arr1: [1, 2, 3, 4], arr2: [3, 4, 5, 6] }; }, computed: { intersect() { return this.arr1.filter(item => this.arr2.includes(item)); } } ``` 在上述代码中,使用了`filter`方法对arr1进行遍历,然后使用`includes`方法判断arr2中是否包含该元素,如果包含就返回true,否则返回false。最后将过滤出的相同元素作为新的数组返回给intersect。 通过上述代码,我们就可以得到两个数组中相同的元素,重新组成一个新的数组。 注意:以上代码只是一个示例,具体的实现方式可以根据实际需求进行调整。 ### 回答3: 可以通过循环遍历两个数组,将相同的元素添加到一个新数组中。 以下是使用Vue的方法实现这个过程: ``` <template> <div> <!-- 原始数组 --> <p>数组A: {{ arrayA }}</p> <p>数组B: {{ arrayB }}</p> <!-- 相同元素的新数组 --> <p>新数组: {{ newArray }}</p> </div> </template> <script> export default { data() { return { arrayA: [1, 2, 3, 4, 5], arrayB: [4, 5, 6, 7, 8], newArray: [] // 存放相同元素的新数组 } }, mounted() { this.getSameElements(); }, methods: { getSameElements() { for (let i = 0; i < this.arrayA.length; i++) { for (let j = 0; j < this.arrayB.length; j++) { if (this.arrayA[i] === this.arrayB[j]) { this.newArray.push(this.arrayA[i]); break; // 找到相同元素后结束当前循环 } } } } } } </script> ``` 以上代码中,`arrayA`和`arrayB`是两个原始数组,`newArray`是存放相同元素的新数组。在`mounted`生命周期钩子函数中调用`getSameElements`方法,该方法通过两个嵌套的循环,找到相同的元素并添加到`newArray`中。最后,在模板中展示这个新数组

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值