ES6- Set-2之去重—并集—交集—差集

时间:2022-07-25
本文章向大家介绍ES6- Set-2之去重—并集—交集—差集,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

ES6-Set -2 常规用法

单个数组去重

  • 我们先来看一下再ES5中。我们数组去重的方法
	let arr = [1, 2, 3, 4, 5, 6, 5, 4, 3, 2, 1];
	let obj = {};
	let newArr = [];
	for(var i = 0; i < arr.length; i++){
		if(!obj[arr[i]]){
			newArr.push(arr[i]);
			obj[arr[i]] = true;
		}
	}
  • 我们再来看一下使用Set的方式来去重
	let arr = [1, 2, 3, 4, 5, 6, 5, 4, 3, 2, 1];
	let oS = new Set(arr);
	console.log([...oS]);

也同样达到了去重的效果,代码上简单了不少

刚才是在常规的情况下,但是数组中出现了对象,这个去重可能就跪了 我们来看一下

	let o = {
	    name: "zhangsan"
	}
	let arr = [1, 2, 3, 4,o, 5, 6, 5, 4, o,3, 2, 1, {name: "gg"}];
	let obj = {
	
	}
	let newArr = [];
	for(var i = 0; i < arr.length; i++){
	    if(!obj[arr[i]]){
	        newArr.push(arr[i]);
	        obj[arr[i]] = true;
	    }
	}
	console.log(newArr);

这个情况有点出乎意料

我们先来看一下下面这个小例子,o是一个对象

  • 在o上添加一个key为[](此处的属性名是数组),并为[]赋值20;
  • 打印o,我们看到的是[object object]:20。 原因是什么呢? 其实是当我们的key为数组时会默认调用原型链顶端Object的prototype上的toString方法, 返回的是对象类型,所以看到的时刚才的效果
  • 我们把对象给改了,但是看到的效果还是不变,因为返回的键把先前的覆盖了

这也就是刚刚才数组去重失效的原因

如何实现并集

首先解释一下什么是并集:举一个例子,我把我有的东西和你有的东西放到一起,并且把重复的去掉,这就是并集
	let arr1 = [1, 2, 3, 4, 2, 1];
	let arr2 = [3, 4, 5, 6, 6, 7];
	let newArr = new Set([...arr1, ...arr2]);
	console.log(newArr);

达到去重的效果

如何实现交集

什么是交集呢? 把我和你都有的东西都放到一起,再去掉重复的,即为交集

此处使用的是ES6箭头函数的简写方法,如果不懂的,可以去查一下箭头函数,之后会更新上

	let arr1 = [1, 2, 3, 4, 2, 1];
	let arr2 = [3, 4, 5, 6, 6, 7];
	let oS1 = new Set(arr1);
	let oS2 = new Set(arr2);
	//调用数组的filter方法,符合条件的返回
	//再根据Set提供的has方法,判断是否相同的
	let newArr = [...oS1].filter(ele => oS2.has(ele));
  • 先将oS1转化数组才能调用filter方法
  • 调用数组的filter方法,符合条件的返回
  • Set提供的has方法,判断是否相同的
  • 返回满足条件的成为新数组

如何实现差集

差集的定义为:把我在你哪里没有的和你再我这里没有的东西放到一起,再去掉重复的即可;
	let arr1 = [1, 2, 3, 4, 2, 1];
	let arr2 = [3, 4, 5, 6, 6, 7];
	let oS1 = new Set(arr1);
	let oS2 = new Set(arr2);
	let newArr1 = [...oS1].filter(ele => !oS2.has(ele));
	let newArr2 = [...oS2].filter(ele => !oS1.has(ele));
	console.log([...newArr1, ...newArr2]);