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 中所有的值，没有返回值。
// javascriptcn.com 代码示例
let set = new Set();
set.add(1).add(2).add(3).add(3);
console.log(set); // Set {1, 2, 3}
console.log(set.delete(2)); // true
console.log(set.has(2)); // false
set.clear();
console.log(set); // Set {}除了这些方法，Set 还有一些其他的特性，比如它是可迭代的，可以直接使用 for...of 循环遍历。
let set = new Set([1, 2, 3]);
for (let value of set) {
console.log(value);
// 1
// 2
// 3
}还可以使用 Set 的一些操作，比如并集、交集和差集。
// javascriptcn.com 代码示例
let set1 = new Set([1, 2, 3]);
let set2 = new Set([2, 3, 4]);
let union = new Set([...set1, ...set2]);
let intersection = new Set([...set1].filter(x => set2.has(x)));
let difference = new Set([...set1].filter(x => !set2.has(x)));
console.log(union); // Set {1, 2, 3, 4}
console.log(intersection); // Set {2, 3}
console.log(difference); // Set {1}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 可以去重，可以用来统计元素出现的次数。
// javascriptcn.com 代码示例
let arr = [1, 2, 3, 2, 1, 4, 5, 4];
let set = new Set(arr);
let countObj = {};
for (let value of set) {
countObj[value] = arr.filter(x => x === value).length;
}
console.log(countObj); // {1: 2, 2: 2, 3: 1, 4: 2, 5: 1}- Map 可以用来缓存计算结果，避免重复计算。
// javascriptcn.com 代码示例
let cache = new Map();
function fibonacci(n) {
if (cache.has(n)) {
return cache.get(n);
}
let result;
if (n < 2) {
result = n;
} else {
result = fibonacci(n - 1) + fibonacci(n - 2);
}
cache.set(n, result);
return result;
}
console.log(fibonacci(10)); // 55- Set 和 Map 都可以用来存储数据的唯一标识符。
// javascriptcn.com 代码示例
let item1 = {id: 1, name: 'Alice'};
let item2 = {id: 2, name: 'Bob'};
let item3 = {id: 1, name: 'Charlie'};
let set = new Set([item1, item2, item3]);
console.log([...set]); // [{id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}, {id: 1, name: 'Charlie'}]
let map = new Map([[item1, 100], [item2, 200], [item3, 300]]);
console.log([...map]); // [[{id: 1, name: 'Alice'}, 100], [{id: 2, name: 'Bob'}, 200], [{id: 1, name: 'Charlie'}, 300]]总结
Set 和 Map 都是 ES6 新增的数据结构，分别用于集合和键值对存储。它们的常用方法和操作都比较简单易懂，而且还可以用来解决一些实际问题。在开发过程中，我们可以灵活使用它们，提高代码的可读性和效率。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6539daaf7d4982a6eb370bab