Skip to content

Commit ff265f7

Browse files
committed
docs(set): edit set operator methods
1 parent bdbcf3e commit ff265f7

File tree

1 file changed

+138
-18
lines changed

1 file changed

+138
-18
lines changed

docs/set-map.md

+138-18
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ for (let i of s) {
2121

2222
上面代码通过`add()`方法向 Set 结构加入成员,结果表明 Set 结构不会添加重复的值。
2323

24-
`Set`函数可以接受一个数组(或者具有 iterable 接口的其他数据结构)作为参数,用来初始化。
24+
`Set()`函数可以接受一个数组(或者具有 iterable 接口的其他数据结构)作为参数,用来初始化。
2525

2626
```javascript
2727
// 例一
@@ -88,6 +88,23 @@ set.size // 2
8888

8989
上面代码表示,由于两个空对象不相等,所以它们被视为两个值。
9090

91+
`Array.from()`方法可以将 Set 结构转为数组。
92+
93+
```javascript
94+
const items = new Set([1, 2, 3, 4, 5]);
95+
const array = Array.from(items);
96+
```
97+
98+
这就提供了去除数组重复成员的另一种方法。
99+
100+
```javascript
101+
function dedupe(array) {
102+
return Array.from(new Set(array));
103+
}
104+
105+
dedupe([1, 1, 2, 3]) // [1, 2, 3]
106+
```
107+
91108
### Set 实例的属性和方法
92109

93110
Set 结构的实例有以下属性。
@@ -142,23 +159,6 @@ if (properties.has(someName)) {
142159
}
143160
```
144161

145-
`Array.from()`方法可以将 Set 结构转为数组。
146-
147-
```javascript
148-
const items = new Set([1, 2, 3, 4, 5]);
149-
const array = Array.from(items);
150-
```
151-
152-
这就提供了去除数组重复成员的另一种方法。
153-
154-
```javascript
155-
function dedupe(array) {
156-
return Array.from(new Set(array));
157-
}
158-
159-
dedupe([1, 1, 2, 3]) // [1, 2, 3]
160-
```
161-
162162
### 遍历操作
163163

164164
Set 结构的实例有四个遍历方法,可以用于遍历成员。
@@ -302,6 +302,122 @@ set = new Set(Array.from(set, val => val * 2));
302302

303303
上面代码提供了两种方法,直接在遍历操作中改变原来的 Set 结构。
304304

305+
### 集合运算
306+
307+
[ES2025](https://github.com/tc39/proposal-set-methods) 为 Set 结构添加了以下集合运算方法。
308+
309+
- Set.prototype.intersection(other):交集
310+
- Set.prototype.union(other):并集
311+
- Set.prototype.difference(other):差集
312+
- Set.prototype.symmetricDifference(other):对称差集
313+
- Set.prototype.isSubsetOf(other):判断是否为子集
314+
- Set.prototype.isSupersetOf(other):判断是否为超集
315+
- Set.prototype.isDisjointFrom(other):判断是否不相交
316+
317+
以上方法的参数都必须是 Set 结构,或者是一个类似于 Set 的结构(拥有`size`属性,以及`keys()``has()`方法。
318+
319+
`.union()`是并集运算,返回包含两个集合中存在的所有成员的集合。
320+
321+
```javascript
322+
const frontEnd = new Set(["JavaScript", "HTML", "CSS"]);
323+
const backEnd = new Set(["Python", "Java", "JavaScript"]);
324+
325+
const all = frontEnd.union(backEnd);
326+
// Set {"JavaScript", "HTML", "CSS", "Python", "Java"}
327+
```
328+
329+
`.intersection()`是交集运算,返回同时包含在两个集合中的成员的集合。
330+
331+
```javascript
332+
const frontEnd = new Set(["JavaScript", "HTML", "CSS"]);
333+
const backEnd = new Set(["Python", "Java", "JavaScript"]);
334+
335+
const frontAndBackEnd = frontEnd.intersection(backEnd);
336+
// Set {"JavaScript"}
337+
```
338+
339+
`.difference()`是差集运算,返回第一个集合中存在但第二个集合中不存在的所有成员的集合。
340+
341+
```javascript
342+
const frontEnd = new Set(["JavaScript", "HTML", "CSS"]);
343+
const backEnd = new Set(["Python", "Java", "JavaScript"]);
344+
345+
const onlyFrontEnd = frontEnd.difference(backEnd);
346+
// Set {"HTML", "CSS"}
347+
348+
const onlyBackEnd = backEnd.difference(frontEnd);
349+
// Set {"Python", "Java"}
350+
```
351+
352+
`.symmetryDifference()`是对称差集,返回两个集合的所有独一无二成员的集合,即去除了重复的成员。
353+
354+
```javascript
355+
const frontEnd = new Set(["JavaScript", "HTML", "CSS"]);
356+
const backEnd = new Set(["Python", "Java", "JavaScript"]);
357+
358+
const onlyFrontEnd = frontEnd.symmetricDifference(backEnd);
359+
// Set {"HTML", "CSS", "Python", "Java"}
360+
361+
const onlyBackEnd = backEnd.symmetricDifference(frontEnd);
362+
// Set {"Python", "Java", "HTML", "CSS"}
363+
```
364+
365+
注意,返回结果中的成员顺序,由添加到集合的顺序决定。
366+
367+
`.isSubsetOf()`返回一个布尔值,判断第一个集合是否为第二个集合的子集,即第一个集合的所有成员都是第二个集合的成员。
368+
369+
```javascript
370+
const frontEnd = new Set(["JavaScript", "HTML", "CSS"]);
371+
const declarative = new Set(["HTML", "CSS"]);
372+
373+
declarative.isSubsetOf(frontEnd);
374+
// true
375+
376+
frontEndLanguages.isSubsetOf(declarativeLanguages);
377+
// false
378+
```
379+
380+
任何集合都是自身的子集。
381+
382+
```javascript
383+
frontEnd.isSubsetOf(frontEnd);
384+
// true
385+
```
386+
387+
`isSupersetOf()`返回一个布尔值,表示第一个集合是否为第二个集合的超集,即第二个集合的所有成员都是第一个集合的成员。
388+
389+
```javascript
390+
const frontEnd = new Set(["JavaScript", "HTML", "CSS"]);
391+
const declarative = new Set(["HTML", "CSS"]);
392+
393+
declarative.isSupersetOf(frontEnd);
394+
// false
395+
396+
frontEnd.isSupersetOf(declarative);
397+
// true
398+
```
399+
400+
任何集合都是自身的超集。
401+
402+
```javascript
403+
frontEnd.isSupersetOf(frontEnd);
404+
// true
405+
```
406+
407+
`.isDisjointFrom()`判断两个集合是否不相交,即没有共同成员。
408+
409+
```javascript
410+
const frontEnd = new Set(["JavaScript", "HTML", "CSS"]);
411+
const interpreted = new Set(["JavaScript", "Ruby", "Python"]);
412+
const compiled = new Set(["Java", "C++", "TypeScript"]);
413+
414+
interpreted.isDisjointFrom(compiled);
415+
// true
416+
417+
frontEnd.isDisjointFrom(interpreted);
418+
// false
419+
```
420+
305421
## WeakSet
306422

307423
### 含义
@@ -1283,3 +1399,7 @@ class Thingy {
12831399

12841400
由于无法知道清理器何时会执行,所以最好避免使用它。另外,如果浏览器窗口关闭或者进程意外退出,清理器则不会运行。
12851401

1402+
## 参考链接
1403+
1404+
- [Union, intersection, difference, and more are coming to JavaScript Sets](https://www.sonarsource.com/blog/union-intersection-difference-javascript-sets/)
1405+

0 commit comments

Comments
 (0)