Set
Set是unique（不同）元素的集合，其中每个元素可以是任何类型。Set也是元素的有序集合。这意味着元素的检索顺序将与插入顺序相同。
创建Set
const set = new Set();
console.log(set);
输出:
Set(0) {}
初始化Set并创建
const fruteSet = new Set(['🍉', '🍎', '🍈', '🍏']);
console.log(fruteSet);
输出:
Set(4) {"🍉", "🍎", "🍈", "🍏"}
添加元素
使用add(element)方法将元素添加到中Set。
// Create a set - saladSet
const saladSet = new Set();
// Add some vegetables to it
saladSet.add('🍅'); // tomato
saladSet.add('🥑'); // avocado
saladSet.add('🥕'); // carrot
saladSet.add('🥒'); // cucumber
console.log(saladSet);
好了，我们加了蔬菜。到目前为止的输出:
Set(4) {"🍅", "🥑", "🥕", "🥒"}
添加元素
saladSet.add('🥒');
console.log(saladSet);
输出仍然像以前一样，没有添加任何内容到saladSet,因为内部已经包含🥒
判断是否存在，🥕和🥦
使用该has(element)方法在Set中查找元素
有 🥕, 所以返回true
console.log('是否有🥕?', saladSet.has('🥕'));
没有🥦, 所以返回false
console.log('是否有🥦?', saladSet.has('🥦'));
现在我们删除掉🥑，因为的不喜欢吃它，如果是茄子的话可能不会删除
saladSet.delete('🥑');
console.log('我不喜欢 🥑, 从数组中删除:', saladSet);
现在的数组是这样的：
{"🍅", "🥕", "🥒"}
clear()
clear() 方法用于删除所有元素
saladSet.clear();
console.log('完成了:', saladSet);
输出：
完成了: Set(0) {}
values()
Set有一个values()函数，它返回一个SetIterator(迭代器)
//创建一个set
const houseNos = new Set([360, 567, 101]);
//调用`values（）`方法获取一个`SetIterator`(迭代器)
console.log(houseNos.values());
输出:
SetIterator {360, 567, 101}
可以使用forEach或for-of循环获取所有项的值
有趣的事实：JavaScript强调Set与Map兼容。这就是为什么我们发现Set中有keys()以及entries()，Map里也有
keys()
因为Set没有键，所以需要调用keys()方法返回一个SetIterator来获取键
console.log(houseNos.keys());
输出:
SetIterator {360, 567, 101}
entries()
entries()方法返回SetIterator以检索值-值对
console.log(houseNos.entries());
输出:
SetIterator {360 => 360, 567 => 567, 101 => 101}
让我们列举一下
我们可以使用forEach 或者 for-of循环遍历Set
houseNos.forEach((value) => {
console.log(value);
});
输出：
360
567
101
使用for-of
for(const value of houseNos) {
console.log(value);
}
集合和对象
Set可以具有任何类型的元素，甚至是对象
const person = {
'name': 'Alex',
'age': 32
};
const pSet = new Set();
pSet.add(person);
console.log(pSet);
输出:
image.png
现在，让我们更改对象的属性，然后将其再次添加到集合中。
const person = {
'name': 'Alex',
'age': 32
};
const pSet = new Set();
pSet.add(person);
person.name = 'Bob';
pSet.add(person);
console.log(pSet);
输出:
image.png
获取唯一值
Set数据结构最常见的用法是从数组获取唯一值。
// 创建我喜欢的水果
const mixedFruit = ['🍉', '🍎', '🍉', '🍈', '🍏', '🍎', '🍈',];
// 把水果存在Set集合中
const mixedFruitSet = new Set(mixedFruit);
console.log(mixedFruitSet);
输出：
Set(4) {"🍉", "🍎", "🍈", "🍏"}
Set 常用操作
比如，union，intersection，diference，superset，subset等用于Set和数组一起使用.
const first = new Set([1, 2, 3]);
const second = new Set([3, 4, 5]);
Union (mysql里面也有这个知识)并集后集合
image.png
Union 例如。{1，2，3}和{3，4，5}的并集后的集合是：{1,2,3,4,5}。
const first = new Set([1, 2, 3]);
const second = new Set([3, 4, 5]);
// Union
const union = new Set([...first, ...second]);
console.log('Union:', union);
输出:
Union: Set(5) {1, 2, 3, 4, 5}
Intersection (交集)
image.png
Intersection 在集合A和B中，表示为A∩B的是集合中所有同时属于A和B的对象的集合。例如，{1，2，3}和{3，4，5}的交集是设置{3}。
const first = new Set([1, 2, 3]);
const second = new Set([3, 4, 5]);
// Intersection
const intersection = new Set([...first].filter(elem => {
return second.has(elem)
}));
console.log('Intersection:', intersection);
输出:
Intersection: Set(1) {3}
Difference (集合差)
image.png
difference U和A的U（表示为U \ A）是U的所有非A成员的集合。集合差{1,2,3} \ {3,4,5}为{1,2}，相反，设置差{3，4，5} \ {1,2,3}为{4，5}。
const first = new Set([1, 2, 3]);
const second = new Set([3, 4, 5]);
// Difference
const difference = new Set([...first].filter(elem => {
return !second.has(elem)
}));
输出:
Difference: Set(2) {1, 2}
image.png
Superset(超集)
如果A的所有元素也是B的元素，则A是B的子集。那么B是A的超集。
const first = new Set([1, 2, 3]);
const second = new Set([3, 4, 5]);
// 是否超集?
const isSuperset = (set, subset) => {
for (let elem of subset) {
if (!set.has(elem)) {
return false;
}
}
return true;
}
console.log('isSuperset?', isSuperset(first, second));
输出:
isSuperset? false
结论
Set是一个很好的数据结构，可以作为JavaScript数组的附加组件使用。不过，与array相比，它没有太大的优势。当您需要维护一组不同的数据以执行集合操作（如并集、交集、差分等）时，请使用它。
来源 | blog.greenroots.info
译者 | 鬼哥
网友评论