在 JavaScript 中，Set 和 Map 是两个常用的数据结构。在 ES12 中，这两个数据结构也得到了进一步的加强和优化。本文将详细介绍 ES12 中的 Set 和 Map，包括其基本用法、新特性以及实际应用场景。
Set
Set 是一种无序且唯一的数据集合，它可以存储任何类型的值，不论是基本类型还是引用类型。ES6 中引入了 Set，ES12 中对其进行了一些改进。
基本用法
创建一个 Set 很简单，只需要使用 new Set() 即可：
const set = new Set();
向 Set 中添加元素使用 add() 方法：
set.add(1);
set.add('hello');
set.add({name: 'Tom', age: 18});Set 中不允许重复的元素，因此如果添加重复的元素，不会产生任何效果：
set.add(1); set.add(1); // 不会产生任何效果
Set 的长度可以通过 size 属性获取：
console.log(set.size); // 3
可以通过 has() 方法判断 Set 中是否包含某个元素：
console.log(set.has(1)); // true console.log(set.has(2)); // false
从 Set 中删除元素使用 delete() 方法：
set.delete(1);
新特性
ES12 中为 Set 增加了以下新特性：
Set.prototype.intersection()
intersection() 方法用于计算两个 Set 的交集，并返回一个新的 Set。示例代码如下：
const set1 = new Set([1, 2, 3]);
const set2 = new Set([2, 3, 4]);
const intersectionSet = set1.intersection(set2); // 返回 Set {2, 3}Set.prototype.union()
union() 方法用于计算两个 Set 的并集，并返回一个新的 Set。示例代码如下：
const set1 = new Set([1, 2, 3]);
const set2 = new Set([2, 3, 4]);
const unionSet = set1.union(set2); // 返回 Set {1, 2, 3, 4}Set.prototype.difference()
difference() 方法用于计算两个 Set 的差集，并返回一个新的 Set。示例代码如下：
const set1 = new Set([1, 2, 3]);
const set2 = new Set([2, 3, 4]);
const differenceSet = set1.difference(set2); // 返回 Set {1}Set.prototype.isSubsetOf()
isSubsetOf() 方法用于判断当前 Set 是否是另一个 Set 的子集。示例代码如下：
const set1 = new Set([1, 2, 3]); const set2 = new Set([1, 2, 3, 4]); console.log(set1.isSubsetOf(set2)); // true
Set.prototype.isSupersetOf()
isSupersetOf() 方法用于判断当前 Set 是否是另一个 Set 的超集。示例代码如下：
const set1 = new Set([1, 2, 3, 4]); const set2 = new Set([1, 2, 3]); console.log(set1.isSupersetOf(set2)); // true
Map
Map 是一种键值对集合，其中每个键都唯一对应一个值。ES6 中引入了 Map，ES12 中对其进行了一些改进。
基本用法
创建一个 Map 很简单，只需要使用 new Map() 即可：
const map = new Map();
向 Map 中添加元素使用 set() 方法：
map.set('name', 'Tom');
map.set('age', 18);
map.set('address', {city: 'Beijing', district: 'Haidian'});获取 Map 中对应键的值使用 get() 方法：
console.log(map.get('name')); // Tom
console.log(map.get('age')); // 18
console.log(map.get('address')); // {city: 'Beijing', district: 'Haidian'}从 Map 中删除元素使用 delete() 方法：
map.delete('name');新特性
ES12 中为 Map 增加了以下新特性：
Map.prototype.merge()
merge() 方法用于将两个 Map 合并为一个，并返回一个新的 Map。如果两个 Map 中存在相同的键，则后者的值会覆盖前者的值。示例代码如下：
const map1 = new Map([['name', 'Tom'], ['age', 18]]);
const map2 = new Map([['name', 'Jerry'], ['address', 'Beijing']]);
const mergedMap = map1.merge(map2); // 返回 Map {name: 'Jerry', age: 18, address: 'Beijing'}Map.prototype.mapKeys()
mapKeys() 方法用于对 Map 中的所有键进行映射，并返回一个新的 Map。示例代码如下：
const map = new Map([['name', 'Tom'], ['age', 18]]);
const mappedMap = map.mapKeys(key => key.toUpperCase()); // 返回 Map {NAME: 'Tom', AGE: 18}Map.prototype.mapValues()
mapValues() 方法用于对 Map 中的所有值进行映射，并返回一个新的 Map。示例代码如下：
const map = new Map([['name', 'Tom'], ['age', 18]]);
const mappedMap = map.mapValues(value => typeof value); // 返回 Map {name: 'string', age: 'number'}Map.prototype.filter()
filter() 方法用于对 Map 中的所有键值对进行过滤，并返回一个新的 Map。示例代码如下：
const map = new Map([['name', 'Tom'], ['age', 18], ['address', 'Beijing']]);
const filteredMap = map.filter((value, key) => key !== 'name'); // 返回 Map {age: 18, address: 'Beijing'}应用场景
Set 和 Map 在实际开发中有很多应用场景，下面列举一些常见的场景：
Set
数组去重
使用 Set 可以轻松实现数组去重，示例代码如下：
const arr = [1, 2, 3, 2, 1, 4]; const uniqueArr = [...new Set(arr)]; // 返回 [1, 2, 3, 4]
Map
缓存数据
使用 Map 可以方便地实现数据缓存，示例代码如下：
// javascriptcn.com 代码示例
const cache = new Map();
function getData(key) {
if (cache.has(key)) {
return cache.get(key);
} else {
const data = fetchData(key);
cache.set(key, data);
return data;
}
}总结
本文详细介绍了 ES12 中的 Set 和 Map，包括其基本用法、新特性以及实际应用场景。Set 和 Map 是 JavaScript 中非常常用的数据结构，掌握它们的使用方法对于提高开发效率和代码质量都有很大帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6563d1bcd2f5e1655dd46e11