在 ES6 中，引入了 Set 和 Map 数据结构，这两种数据结构的出现，为前端开发带来了很多方便和效率。实现了集合和字典这两种数据结构，这篇文章将详细介绍 Set 和 Map 的基本使用以及应用场景。
Set 数据结构
Set 数据结构表示一个无序的、没有重复值的集合。它的使用场景很多，比如去重、交集、并集、补集等等。
创建 Set
// 创建一个 Set 对象 let mySet = new Set();
我们也可以通过传入一个数组，来初始化一个 Set 对象：
// 用数组来初始化 Set 对象
let mySet = new Set([1, 2, 3, 4, 4]);
console.log(mySet); // Set(4) {1, 2, 3, 4}添加元素
Set 对象有两个方法用来添加元素：
add(value)
// 添加元素
mySet.add(5);
console.log(mySet); // Set(5) {1, 2, 3, 4, 5}addAll(value1, value2, …, valueN)
// 添加多个元素
mySet.addAll(6, 7, 8, 9);
console.log(mySet); // Set(9) {1, 2, 3, 4, 5, 6, 7, 8, 9}获取元素
Set 对象有两个方法用来获取元素：
has(value)
// 检查是否包含某个元素 console.log(mySet.has(2)); // true console.log(mySet.has(100)); // false
values()
// 获取所有元素
console.log(mySet.values()); // SetIterator {1, 2, 3, 4, 5, 6, 7, 8, 9}删除元素
Set 对象有两个方法用来删除元素：
delete(value)
// 删除某个元素
mySet.delete(1);
console.log(mySet); // Set(8) {2, 3, 4, 5, 6, 7, 8, 9}clear()
// 清空 Set 对象
mySet.clear();
console.log(mySet); // Set(0) {}Set 的应用场景
去除数组重复元素
function removeDuplicateElements(arr) {
return [...new Set(arr)];
}
let arr = [1,2,2,3,4,4,4,5];
let newArr = removeDuplicateElements(arr);
console.log(newArr); // [1, 2, 3, 4, 5]Set 进行数组交集、并集、补集运算
-- -------------------- ---- ------- --- ---- - --- --------------- --- ---- - --- --------------- -- --- --- ------------ - --- ---------------------- -- -------------- -------------------------- -- ------ --- -- -- -- --- --- ----- - --- ------------- ---------- ------------------- -- ------ --- -- -- -- -- -- --- --- ---------- - --- ---------------------- -- --------------- ------------------------ -- ------ ---
Map 数据结构
Map 数据结构表示一组键值对的集合，其中的值可以是任意类型的对象。Map 对象可以使用任意类型的值作为键，而且可以使用对象作为键。
创建 Map
Map 可以通过传入一个数组，来初始化一个 Map 对象：
// 用数组来初始化 Map 对象
let myMap = new Map([
['key1', 'value1'],
['key2', 'value2']
]);
console.log(myMap); // Map(2) {"key1" => "value1", "key2" => "value2"}添加元素
Map 对象有两个方法用来添加元素：
set(key, value)
// 添加元素
myMap.set('key3', 'value3');
console.log(myMap); // Map(3) {"key1" => "value1", "key2" => "value2", "key3" => "value3"}setAll([entry1, entry2, …, entryN])
这个方法跟 addAll() 的方法一样，可以添加多个元素到 Map 对象中。
获取元素
Map 对象有两个方法用来获取元素：
get(key)
// 获取某个键对应的值
console.log(myMap.get('key2')); // "value2"values()
// 获取所有值
console.log(myMap.values()); // MapIterator {"value1", "value2", "value3"}删除元素
Map 对象有两个方法用来删除元素：
delete(key)
// 删除某个键值对
myMap.delete('key2');
console.log(myMap); // Map(2) {"key1" => "value1", "key3" => "value3"}clear()
// 清空 Map 对象
myMap.clear();
console.log(myMap); // Map(0) {}Map 的应用场景
使用 Map 封装配置文件
我们可以使用 Map 来封装一个配置文件。
-- -------------------- ---- ------- --- ------ - --- ----- -------- ------- ------- ---- ---------- ------- --- -------- -------- - ------ ---------------- - ------------------------- -- -----
Map 实现对象的属性访问
我们可以使用 Map 来模拟对象的属性访问。
-- -------------------- ---- -------
--- --- - -
----- ------
---- ---
------- ------
--
--- --- - --- ------
------- --- -- ---- -
------------ ----------
-
----------------------------- -- -----总结
Set 和 Map 数据结构是 ES6 中新增的类型，可以用来表示集合和字典的数据结构。Set 和 Map 的使用，可以使代码更加简洁、高效，提高开发效率。我们可以将它们用于去重、交集、并集、补集运算，也可以用来封装配置文件、实现对象的属性访问。Set 和 Map 对象的方法是基本相同的，主要区别在于它们的应用场景。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646aca59968c7c53b0a46665