ES6 Set 与 Map

ES6 新增了两个数据结构 Set（集合）和 Map（字典），各有专属用途。

Set：集合

Set 里的每个元素都唯一，重复添加自动忽略。

// 创建与基本操作
const s = new Set();
s.add(1);
s.add(2);
s.add(1);          // 重复，被忽略
console.log(s.size);          // 2
console.log(s.has(2));        // true
s.delete(2);
console.log(s.size);          // 1

数组去重

// 示例：数组去重，一行搞定
const arr = [1, 2, 2, 3, 3, 4];
const unique = [...new Set(arr)];   // 利用展开运算符转回数组
console.log(unique);  // [1, 2, 3, 4]

去重思路：new Set(数组) 自动去重 → 再用 [...set] 转回数组。

遍历

// 示例
const s = new Set(['a', 'b']);
for (const v of s) {
  console.log(v);   // a b
}
console.log([...s]);          // ['a', 'b'] 字符串数组

Map：键值对存储

对象（{}）的键只能是字符串或 Symbol；Map 的键可以是任意类型（对象、函数都行），且保持插入顺序。

// 创建与操作
const m = new Map();
m.set('name', '小明');   // 设置
m.set(1, '数字一');      // 数字也能当键
console.log(m.get('name'));  // 小明
console.log(m.has(1));       // true
console.log(m.size);         // 2
m.delete(1);
console.log(m.size);         // 1

用对象当键

Map 独特能力的典型用法。

// 示例：给元素绑定"私有"信息
const btn = document.createElement('button');
const data = new Map();
data.set(btn, '点击了这个按钮');  // 对象作键
console.log(data.get(btn));       // 点击了这个按钮

Map 的遍历

// 示例
const m = new Map([['a', 1], ['b', 2]]);
for (const [k, v] of m) {
  console.log(k, v);      // a 1 / b 2 —— 解构出键和值
}
console.log([...m]);      // [['a',1], ['b',2]]

Map 与普通对象对比

和数组/对象的相互转换

// 示例：三者的转换
const map = new Map([['x', 1], ['y', 2]]);
console.log([...map]);                    // [['x',1],['y',2]] Map→数组
const obj = Object.fromEntries(map);      // Map→对象 {x:1,y:2}
console.log(Object.entries(obj));         // 对象→数组 [['x',1],['y',2]]
const back = new Map(Object.entries(obj));// 对象→Map

Object.fromEntries 是把”键值对数组”转回对象的现代方法，和 Object.entries 正好相反。

速查卡片

这两个数据结构，日常用在”去重”、”按条件快速查找”、”关联额外信息”处，配合 for...of 和展开运算符遍历转换非常顺手。