## 32.集合（`Set`） > 原文： [http://exploringjs.com/impatient-js/ch_sets.html](http://exploringjs.com/impatient-js/ch_sets.html) 在 ES6 之前，JavaScript 没有集合的数据结构。相反，使用了两种解决方法： * 对象的键作为字符串集。 * 数组作为任意值的集合（例如，通过`.includes()`检查元素是否在集合中），缺点是元素检查缓慢。 ECMAScript 6 具有数据结构`Set`，适用于任意值且具有快速执行元素检查。 ### 32.1. 使用集合 #### 32.1.1. 创建集合 创建集合有三种常用方法。 首先，您可以使用不带任何参数的构造函数来创建空集： ```js const emptySet = new Set(); assert.equal(emptySet.size, 0); ``` 其次，您可以将迭代（例如，数组）传递给构造函数。迭代值成为新集的元素： ```js const set = new Set(['red', 'green', 'blue']); ``` 第三，`.add()`方法将元素添加到 Set 并且是可链式调用的： ```js const set = new Set() .add('red') .add('green') .add('blue'); ``` #### 32.1.2. 添加，删除，检查包含 `.add()`向 `Set` 添加元素。 `.has()`检查某个元素是否包含在一个集合中。 `.delete()`从 `Set` 中删除元素。 ```js const set = new Set(); set.add('red'); assert.equal(set.has('red'), true); assert.equal(set.delete('red'), true); // there was a deletion assert.equal(set.has('red'), false); ``` #### 32.1.3. 确定 Set 的大小和清除 `.size`包含 `Set` 中的元素数量。 `.clear()`删除 `Set` 的所有元素。 ```js const set = new Set() .add('foo') .add('bar') ; assert.equal(set.size, 2) set.clear(); assert.equal(set.size, 0) ``` #### 32.1.4. 遍历集合 集合是可迭代的，`for-of`循环可按预期工作： ```js const set = new Set(['red', 'green', 'blue']); for (const x of set) { console.log(x); } // Output: // 'red' // 'green' // 'blue' ``` 如您所见，集合保留插入顺序。也就是说，元素总是按照添加顺序迭代。 集合是可迭代的，可以使用[展开(...)](ch_arrays.html#spreading-into-arrays)方法将其转换为`Array`。 ```js const set = new Set(['red', 'green', 'blue']); const arr = [...set]; // ['red', 'green', 'blue'] ``` ### 32.2. 使用`Set`示例 #### 32.2.1. 从数组中删除重复项 将数组转换为 Set 并返回，将从数组中删除重复项： ```js assert.deepEqual( [...new Set([1, 2, 1, 2, 3, 3, 3])], [1, 2, 3]); ``` #### 32.2.2 创建一个Unicode字符集合 字符串也是可迭代的，因此可以用作`new Set()`的参数： ```js assert.deepEqual( new Set('abc'), new Set(['a', 'b', 'c'])); ``` ### 32.3. 什么集合元素被认为是相等的？ 与 `Map`的key一样，集合元素的比较类似于`===`，但`NaN`等于它自身。 ```js > const set = new Set([NaN, NaN, NaN]); > set.size 1 > set.has(NaN) true ``` 第二次添加元素无效： ```js > const set = new Set(); > set.add('foo'); > set.size 1 > set.add('foo'); > set.size 1 ``` 与`===`类似，两个不同的对象永远不会被认为是相同的（目前无法自定义）： ```js > const set = new Set(); > set.add({}); > set.size 1 > set.add({}); > set.size 2 ``` ### 32.4. 缺少的 Set 操作 集合缺少几个常见操作。它们通常可通过以下方式实现： * 将集转换为数组（通过[展开（`...`）](ch_arrays.html#spreading-into-arrays)）。 * 对数组执行操作。 * 将结果转换回 Set。 #### 32.4.1. 并集(a∪b） 计算两个集合a和b的并集是指创建一个新的集合，包含a和b的所有元素。 ```js const a = new Set([1,2,3]); const b = new Set([4,3,2]); // Use spreading to concatenate two iterables const union = new Set([...a, ...b]); assert.deepEqual([...union], [1, 2, 3, 4]); ``` #### 32.4.2. 交集(a∩b) 计算两个集合a和b的交集是指创建一个新的集合，包含同时包含在a和b中的元素。 ```js const a = new Set([1,2,3]); const b = new Set([4,3,2]); const intersection = new Set( [...a].filter(x => b.has(x))); assert.deepEqual([...intersection], [2, 3]); ``` #### 32.4.3. 差集(a\b) 计算两个集合a和b的差集是指创建一个新的集合，包含那些在a中而不在b中的元素。该操作又称为减法(-)。 ```js const a = new Set([1,2,3]); const b = new Set([4,3,2]); const difference = new Set( [...a].filter(x => !b.has(x))); assert.deepEqual([...difference], [1]); ``` #### 32.4.4. 集合映射 集合没有`.map()`方法。但是我们可以从Array中借用。 ```js const set = new Set([1, 2, 3]); const mappedSet = new Set([...set].map(x => x * 2)); // Convert mappedSet to an Array to check what’s inside it assert.deepEqual([...mappedSet], [2, 4, 6]); ``` #### 32.4.5. 集合过滤 我们不能直接使用`.filter()`操作集合，因此我们需要使用Array的相应方法。 ```js const set = new Set([1, 2, 3, 4, 5]); const filteredSet = new Set([...set].filter(x => (x % 2) === 0)); assert.deepEqual([...filteredSet], [2, 4]); ``` ### 32.5. 快速参考：`Set<T>` #### 32.5.1. 构造函数 * `new Set<T>(values?: Iterable<T>)` ^[ES6] 如果未提供参数`values`，则会创建一个空集。如果提供`values`，则迭代值将作为元素添加到 Set 中。例如： ```js const set = new Set(['red', 'green', 'blue']); ``` #### 32.5.2. `Set<T>.prototype`：设置单个元素 * `.add(value: T): this` ^[ES6] 将`value`添加到此 Set。此方法返回`this`，这意味着它可以链式调用。 ```js const set = new Set(['red']); set.add('green').add('blue'); assert.deepEqual([...set], ['red', 'green', 'blue']); ``` * `.delete(value: T): boolean` ^[ES6] 从此 Set 中删除`value`，如果删除成功返回`true`，反之返回`false`。 ```js const set = new Set(['red', 'green', 'blue']); assert.equal(set.delete('red'), true); // there was a deletion assert.deepEqual([...set], ['green', 'blue']); ``` * `.has(value: T): boolean` ^[ES6] 检查`value`是否在此集合中。 ```js const set = new Set(['red', 'green']); assert.equal(set.has('red'), true); assert.equal(set.has('blue'), false); ``` #### 32.5.3. `Set<T>.prototype`：所有 Set 元素 * `get .size: number` ^[ES6] 返回此 Set 中有多少元素。 ```js const set = new Set(['red', 'green', 'blue']); assert.equal(set.size, 3); ``` * `.clear(): void` ^[ES6] 从此 Set 中删除所有元素。 ```js const set = new Set(['red', 'green', 'blue']); assert.equal(set.size, 3); set.clear(); assert.equal(set.size, 0); ``` #### 32.5.4. `Set<T>.prototype`：迭代和循环 * `.values(): Iterable<T>` ^[ES6] 返回包含该 Set 的所有元素的迭代器。 ```js const set = new Set(['red', 'green']); for (const x of set.values()) { console.log(x); } // Output: // 'red' // 'green' ``` * `[Symbol.iterator](): Iterable<T>` ^[ES6] 迭代 Set 的默认方式。与`.values()`相同。 ```js const set = new Set(['red', 'green']); for (const x of set) { console.log(x); } // Output: // 'red' // 'green' ``` * `.forEach(callback: (value: T, value2: T, theSet: Set<T>) => void, thisArg?: any): void` ^[ES6] 循环遍历此 Set 的元素，并为每个元素调用回调（第一个参数）。 `value`和`key`都设置为当前元素，这种冗余设计是为了使该方法的回调与`Map.prototype.forEach`相同的类型签名。 可以通过`thisArg`指定`this`的回调。否则，`this`设置为`undefined`。 ```js const set = new Set(['red', 'green']); set.forEach(x => console.log(x)); // Output: // 'red' // 'green' ``` #### 32.5.5. 与`Map`对称 仅存在以下两种方法，以使 Sets 的接口类似于 Maps 的接口。处理每个 Set 元素就好像它是一个 Map 键，其键和值是元素。 * `Set.prototype.entries(): Iterable<[T,T]>` ^[ES6] * `Set.prototype.keys(): Iterable<T>` ^[ES6] `.entries()`使您可以将 Set 转换为 Map： ```js const set = new Set(['a', 'b', 'c']); const map = new Map(set.entries()); assert.deepEqual( [...map.entries()], [['a','a'], ['b','b'], ['c','c']]); ```  **测验** 参见[测验应用程序](ch_quizzes-exercises.html#quizzes)。