Web前端之JavaScript中Set的妙用、并集、交集、差集、过滤、includes、filter

---

效果

---

描述

1、获取两个数组的并集、交集和差集
2、不能出现重复项，得到的结果是一个新数组

---

代码

const arr1 = [33, 22, 22, 55, 33, 11, 33, 5];
const arr2 = [22, 22, 55, 77, 88, 88, 99, 99];
// 并集
const union = [...new Set([...arr1, ...arr2])];

console.log('union并集: ', union);

// 交集
const cross = [...new Set([...arr1.filter((item) => arr2.includes(item))])];

console.log('cross交集: ', cross);

// 差集
const diff = [...new Set(union.filter((item) => !cross.includes(item)))];

console.log('diff差集: ', diff);

---

includes

MDN

includes方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回true，否则返回false。

---

w3school

includes方法确定数组是否包含指定的元素。
如果数组包含元素，则此方法返回true，否则返回false。
includes方法区分大小写。

---

示例

console.log([7, 3, 6].includes(3));
// true
console.log([7, 3, 6].includes(1));
// false

if([7, 3, 6].includes(1)) return 'hello world!';

---

<div v-if="[7, 3, 6].includes(3)"></div>

类型很重要，如果数组里的值与includes中的值类型不同，不起作用，因为includes使用的是全等比较。

---

filter

MDN

filter方法创建给定数组一部分的浅拷贝，其包含通过所提供函数实现的测试的所有元素。

---

w3school

filter方法创建数组，其中填充了所有通过测试的数组元素(作为函数提供)。
filter不会对没有值的数组元素执行该函数。
filter不会改变原始数组。

---

Set

MDN

Set对象允许你存储任何类型(无论是原始值还是对象引用)的唯一值。

---

W3SCHOOL

JavaScript的Set(集合)是一组唯一值的集合。
每个值只能在Set中出现一次。
Set可以容纳任何数据类型的值。

方法	描述
new Set()	创建新的 Set。
add()	向 Set 中添加新元素。
delete()	从 Set 中移除元素。
has()	如果值存在则返回 true。
clear()	从 Set 中移除所有元素。
forEach()	为每个元素调用回调函数。
values()	返回包含 Set 中所有值的迭代器。
keys()	与 values() 相同。
entries()	返回迭代器，其中包含 Set 中的 [value,value] 值值对。

---

属性	描述
size	返回 Set 中元素的数量。