ES6 带来了很多新的特性，其中 Set 和 Map 是比较常用的两个。它们都是集合，但结构不同，应用场景也不同。在这篇文章中，我们将深入了解 Set 和 Map，以及它们在前端开发中的应用。
Set
Set 是一种无序且唯一的集合。它的主要作用是去重。我们可以使用 new Set() 创建一个空的 Set，或者用一个数组初始化一个 Set。
// 创建一个空的 Set
let set = new Set();
// 用数组初始化一个 Set
let set1 = new Set([1, 2, 3, 4, 4]);
console.log(set1); // Set {1, 2, 3, 4}Set 有以下常用方法：
add(value)：向 Set 中添加一个值，返回 Set 本身，可以链式调用。delete(value)：删除 Set 中指定的值，返回一个布尔值，表示删除成功或失败。has(value)：判断 Set 中是否包含指定的值，返回一个布尔值。clear()：清空 Set 中所有的值，没有返回值。
-- -------------------- ---- ------- --- --- - --- ------ -------------------------------- ----------------- -- --- --- -- -- --------------------------- -- ---- ------------------------ -- ----- ------------ ----------------- -- --- --
除了这些方法，Set 还有一些其他的特性，比如它是可迭代的，可以直接使用 for...of 循环遍历。
let set = new Set([1, 2, 3]);
for (let value of set) {
console.log(value);
// 1
// 2
// 3
}还可以使用 Set 的一些操作，比如并集、交集和差集。
-- -------------------- ---- ------- --- ---- - --- ------- -- ---- --- ---- - --- ------- -- ---- --- ----- - --- ------------- ---------- --- ------------ - --- ---------------------- -- -------------- --- ---------- - --- ---------------------- -- --------------- ------------------- -- --- --- -- -- -- -------------------------- -- --- --- -- ------------------------ -- --- ---
Map
Map 是一种键值对的集合，键和值都可以是任何类型。它的主要作用是存储和查找键值对。我们可以使用 new Map() 创建一个空的 Map，或者用一个数组初始化一个 Map。
// 创建一个空的 Map
let map = new Map();
// 用数组初始化一个 Map
let map1 = new Map([['name', 'Alice'], ['age', 18]]);
console.log(map1); // Map(2) {"name" => "Alice", "age" => 18}Map 有以下常用方法：
set(key, value)：向 Map 中添加键值对，返回 Map 本身，可以链式调用。get(key)：获取 Map 中指定键的值，如果键不存在返回 undefined。has(key)：判断 Map 中是否包含指定的键，返回一个布尔值。delete(key)：删除 Map 中指定的键值对，返回一个布尔值，表示删除成功或失败。
let map = new Map();
map.set('name', 'Bob').set('age', 20);
console.log(map.get('name')); // Bob
console.log(map.has('age')); // true
console.log(map.delete('name')); // true
console.log(map); // Map(1) {"age" => 20}和Set类似，Map也是可迭代的，可以直接使用 for...of 循环遍历。
let map = new Map([['name', 'Alice'], ['age', 18]]);
for (let [key, value] of map) {
console.log(key, value);
// name Alice
// age 18
}和Set一样，Map也有一些操作，比如使用 keys() 方法、 values() 方法和 entries() 方法获取 Map 中的键、值和键值对。
let map = new Map([['name', 'Alice'], ['age', 18]]); console.log([...map.keys()]); // ["name", "age"] console.log([...map.values()]); // ["Alice", 18] console.log([...map.entries()]); // [["name", "Alice"], ["age", 18]]
结合解构赋值和扩展运算符，可以很容易地将 Map 转换为数组。
let map = new Map([['name', 'Alice'], ['age', 18]]); let arr = [...map]; console.log(arr); // [["name", "Alice"], ["age", 18]]
Set 和 Map 的应用场景
- Set 可以去重，可以用来统计元素出现的次数。
-- -------------------- ---- ------- --- --- - --- -- -- -- -- -- -- --- --- --- - --- --------- --- -------- - --- --- ---- ----- -- ---- - --------------- - ------------ -- - --- -------------- - ---------------------- -- --- -- -- -- -- -- -- -- -- --
- Map 可以用来缓存计算结果，避免重复计算。
-- -------------------- ---- -------
--- ----- - --- ------
-------- ------------ -
-- -------------- -
------ -------------
-
--- -------
-- -- - -- -
------ - --
- ---- -
------ - ----------- - -- - ----------- - ---
-
------------ --------
------ -------
-
--------------------------- -- --- Set 和 Map 都可以用来存储数据的唯一标识符。
-- -------------------- ---- ------- --- ----- - ---- -- ----- --------- --- ----- - ---- -- ----- ------- --- ----- - ---- -- ----- ----------- --- --- - --- ----------- ------ -------- ---------------------- -- ----- -- ----- --------- ---- -- ----- ------- ---- -- ----- ----------- --- --- - --- ------------ ----- ------- ----- ------- ------- ---------------------- -- ------ -- ----- --------- ----- ----- -- ----- ------- ----- ----- -- ----- ----------- -----
总结
Set 和 Map 都是 ES6 新增的数据结构，分别用于集合和键值对存储。它们的常用方法和操作都比较简单易懂，而且还可以用来解决一些实际问题。在开发过程中，我们可以灵活使用它们，提高代码的可读性和效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6539daaf7d4982a6eb370bab