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

envoke

发布于 2020-09-17 11:25:55

7770

发布于 2020-09-17 11:25:55

文章被收录于专栏：我们一无所有，我们巍然矗立我们一无所有，我们巍然矗立

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]);