一直以来，js只能使用数组和对象来保存多个数据，缺乏像其他语言那样拥有丰富的集合类型。因此，ES6新增了两种集合类型（set 和 map），用于在不同的场景中发挥作用。
set 集合
set 用于存放不重复的数据
- 如何创建 set 集合？
new Set(); // 创建一个没有任何内容的 set 集合
new Set(iterable); // 创建一个具有初始内容的 set 集合，内容来自于可迭代对象每一次迭代的结果
const s1 = new Set();
console.log(s1); // Set(0) {}
const s2 = new Set([1, 2, 3, 4, 5]);
console.log(s2); // Set(5) {1, 2, 3, 4, 5}
const s3 = new Set("assdfffggg");
console.log(s3); // Set(5) {"a", "s", "d", "f", "g"}
- 如何对 set 集合进行后续操作？
- add(数据)：添加一个数据到 set 集合末尾，如果数据已存在，则不进行任何操作。
set 使用 Object.is 的方式判断两个数据是否相同，但是，针对 +0 和 -0，set 认为是相等。
const s1 = new Set();
s1.add(1);
s1.add(2);
s1.add(2);
s1.add(+0);
s1.add(-0);
console.log(s1); // Set(3) {1, 2, 0}
- has(数据)：判断 set 中是否存在对应的数据。
const s1 = new Set([1, 2, 3, 5]);
console.log(s1.has(2)); // true
console.log(s1.has(0)); // false
- delete(数据)：删掉匹配的数据。
const s1 = new Set([1, 2, 3, 5]);
s1.delete(2);
console.log(s1); // Set(3) {1, 3, 5}
- clear()：清空整个集合。
const s1 = new Set([1, 2, 3, 5]);
s1.clear();
console.log(s1); // Set(0) {}
- size：获取 set 集合中的元素数量，只读属性，无法重新赋值。
const arr1 = [1, 2, 3];
const arr2 = [2, 5];
const s = new Set([...arr1, ...arr2]);
console.log(s, s.size); // Set(4) {1, 2, 3, 5} 4
- 如何与数组进行相互转换？
set 本身也是一个可迭代对象，每次迭代的结果就是每一项的值。
const s = new Set([x, x, x]);
const arr = [...s];
const s1 = new Set([1, 2, 3, 5]);
const s2 = new Set("asdffgdfgvvd");
const result = [...s1, ...s2];
console.log(result); // [1, 2, 3, 5, "a", "s", "d", "f", "g", "v"]
- 如何遍历？
- 使用 for-of 循环。
const s = new Set([1, 2, 3, 5]);
for(const d of s) {
console.log(d); // 1 2 3 5
}
- 使用 set 中的实例方法 forEach。
const s = new Set([1, 2, 3, 5]);
s.forEach( (item, index, s) => {
console.log(item, index, s);
});
注意：set 集合不存在下标，因此 forEach 中的回调的第二个参数和第一个参数是一致的，均表示 set 中的每一项。
两个数组的并集、交集、差集
1. 并集
const arr1 = [1, 2, 3];
const arr2 = [2, 5];
// const result = [...new Set(arr1.concat(arr2))];
const result = [...new Set([...arr1, ...arr2])];
console.log(result); // [1, 2, 3, 5]
2. 交集
const arr1 = [1, 2, 3];
const arr2 = [2, 5];
const result = [...new Set(arr1)].filter(item => {
// return arr2.indexOf(item) >= 0;
return new Set(arr2).has(item);
})
console.log(result); // [2]
3. 差集
const arr1 = [1, 2, 3];
const arr2 = [2, 5];
// const result = [...new Set(arr1)].filter(item => {
// return arr1.indexOf(item) >= 0 && arr2.indexOf(item) < 0 || arr2.indexOf(item) >= 0 && arr1.indexOf(item) < 0;
// })
const cross = [...new Set(arr1)].filter(item => {
// return arr2.indexOf(item) >= 0;
return new Set(arr2).has(item);
})
const result = [...new Set(arr1)].filter(item => {
return cross.indexOf(item) < 0;
})
console.log(result); // [1, 3]
[扩展]手写 set
class MySet {
constructor(iterator = []) {
// 验证是否是可迭代的对象
if(typeof iterator[Symbol.iterator] !== "function") {
throw new TypeError(`你提供的${iterator}不是一个可迭代的对象`);
}
this._datas = [];
for(const item of iterator) {
this.add(item);
}
}
get size() {
return this._datas.length;
}
add(data) {
if(!this.has(data)) {
this._datas.push(data);
}
}
has(data) {
for(const item of this._datas) {
if(this.isEqual(data, item)) {
return true;
}
}
return false;
}
delete(data) {
for(let i = 0; i < this._datas.length; i ++) {
const element = this._datas[i];
if(this.isEqual(element, data)) {
// 删除
this._datas.splice(i, 1);
return true;
}
}
return false;
}
clear() {
this._datas.length = 0;
}
*[Symbol.iterator]() {
for(const item of this._datas) {
yield item;
}
}
forEach(callback) {
for(const item of this._datas) {
callback(item, item, this);
}
}
// 判断两个数据是否相等
isEqual(data1, data2) {
if(data1 === 0 && data2 === 0) {
return true;
}
return Object.is(data1, data2);
}
}