JavaScript集合对象：wtfjs中的Set与Map案例
项目地址: https://gitcode.com/gh_mirrors/wt/wtfjs 在日常开发中，你是否遇到过数组去重时的繁琐操作？是否在处理键值对数据时被对象的类型限制困扰？JavaScript的Set与Map对象正是解决这些问题的利器。本文将通过实际案例带你深入了解这两种集合类型的特性、使用场景及常见陷阱，读完你将能够：掌握Set的高效去重技巧、利用Map处理复杂键值关系、避免集合操作中的常见误区。
Set：高效去重的无序集合
Set对象允许你存储任何类型的唯一值，无论是原始值还是对象引用。与数组相比，Set最大的优势在于自动去重和O(1)时间复杂度的成员检测。
基础特性与创建方式
创建Set的基本语法如下：
// 创建空Set
const uniqueNumbers = new Set();
// 从数组初始化
const fruits = new Set(['apple', 'banana', 'apple', 'orange']);
console.log(fruits.size); // -> 3 (自动去重)
常用操作方法
Set提供了直观的操作方法：
const s = new Set();
// 添加元素
s.add(1);
s.add('hello');
s.add({ name: 'John' });
// 检测成员
console.log(s.has(1)); // -> true
// 删除元素
s.delete('hello');
// 清空集合
s.clear();
实战案例：数组去重与交集运算
利用Set实现数组去重：
const numbers = [1, 2, 3, 2, 1, 4];
const uniqueNums = [...new Set(numbers)];
console.log(uniqueNums); // -> [1, 2, 3, 4]
计算两个数组的交集：
const a = new Set([1, 2, 3]);
const b = new Set([2, 3, 4]);
const intersection = new Set([...a].filter(x => b.has(x)));
console.log([...intersection]); // -> [2, 3]
注意事项
Set使用Object.is()方法进行值比较，这意味着：
const set = new Set();
set.add(NaN);
set.add(NaN);
console.log(set.size); // -> 1 (NaN被视为相等)
set.add(-0);
set.add(0);
console.log(set.size); // -> 2 (-0与0被视为不同)
Map：灵活的键值对集合
Map对象用于存储键值对的集合，与普通对象相比，它允许任何类型的键，并且保留插入顺序。
基础特性与创建方式
创建Map的基本语法：
// 创建空Map
const userRoles = new Map();
// 从二维数组初始化
const products = new Map([
['id1', '手机'],
['id2', '电脑'],
[123, '平板'] // 数字也可作为键
]);
常用操作方法
Map的核心操作方法：
const m = new Map();
// 添加键值对
m.set('name', 'wtfjs');
m.set(42, 'answer');
m.set(true, 'boolean');
// 获取值
console.log(m.get('name')); // -> 'wtfjs'
// 检测键是否存在
console.log(m.has(42)); // -> true
// 删除键值对
m.delete(true);
// 获取键值对数量
console.log(m.size); // -> 2
实战案例：复杂对象作为键
与普通对象不同，Map允许对象作为键：
const objKey = { id: 1 };
const map = new Map();
map.set(objKey, 'value associated with object key');
console.log(map.get(objKey)); // -> 'value associated with object key'
// 不同引用的对象视为不同键
console.log(map.get({ id: 1 })); // -> undefined
遍历方法
Map提供多种遍历方式：
const map = new Map([
['a', 1],
['b', 2],
['c', 3]
]);
// 遍历键
for (const key of map.keys()) {
console.log(key);
}
// 遍历值
for (const value of map.values()) {
console.log(value);
}
// 遍历键值对
for (const [key, value] of map.entries()) {
console.log(`${key}: ${value}`);
}
Set与Map的实际应用场景
数据去重与过滤
Set非常适合处理需要唯一值的场景：
// 从API响应中提取唯一用户ID
const apiResponses = [
{ users: [1, 2, 3] },
{ users: [2, 3, 4] },
{ users: [3, 4, 5] }
];
const allUserIds = new Set();
apiResponses.forEach(response => {
response.users.forEach(id => allUserIds.add(id));
});
console.log([...allUserIds]); // -> [1, 2, 3, 4, 5]
缓存实现
Map的键值对特性使其成为缓存实现的理想选择：
const cache = new Map();
function fetchData(url) {
if (cache.has(url)) {
console.log('从缓存获取数据');
return cache.get(url);
}
console.log('从API获取数据');
const data = `数据: ${url}`; // 模拟API请求
cache.set(url, data);
return data;
}
fetchData('https://api.example.com/users'); // 从API获取数据
fetchData('https://api.example.com/users'); // 从缓存获取数据
复杂状态管理
在前端状态管理中，Map可以更灵活地处理键值关系：
// 管理组件状态
const componentState = new Map();
// 设置状态
componentState.set('userForm', {
name: '',
email: '',
status: 'idle'
});
// 更新状态
const userForm = componentState.get('userForm');
componentState.set('userForm', { ...userForm, status: 'submitting' });
Set与Map的性能考量
在处理大量数据时，Set和Map通常比数组和对象具有更好的性能：
| 操作 | Set | 数组 | Map | 对象 |
|---|---|---|---|---|
| 添加 | O(1) | O(1) | O(1) | O(1) |
| 删除 | O(1) | O(n) | O(1) | O(1) |
| 查找 | O(1) | O(n) | O(1) | O(1) |
| 遍历 | O(n) | O(n) | O(n) | O(n) |
常见陷阱与解决方案
Set的隐式类型转换
Set使用严格相等比较，但需注意特殊值：
const s = new Set();
s.add(5);
s.add('5');
console.log(s.size); // -> 2 (数字5与字符串'5'被视为不同)
Map的键引用问题
对象作为键时，只有引用相同才视为同一键：
const map = new Map();
const obj1 = { id: 1 };
const obj2 = { id: 1 };
map.set(obj1, 'value');
console.log(map.has(obj2)); // -> false (obj1与obj2是不同引用)
解决方案：使用字符串化作为键或实现自定义比较逻辑。
与其他数据结构的转换
Set与数组的转换
// Set转数组
const set = new Set([1, 2, 3]);
const arr = Array.from(set);
// 或使用展开运算符
const arr2 = [...set];
// 数组转Set
const uniqueArr = [...new Set([1, 2, 2, 3])];
Map与对象的转换
// Map转对象
function mapToObj(map) {
const obj = {};
for (const [key, value] of map) {
obj[key] = value; // 注意：键会被转换为字符串
}
return obj;
}
// 对象转Map
function objToMap(obj) {
return new Map(Object.entries(obj));
}
总结与最佳实践
Set和Map为JavaScript提供了更强大的数据集合解决方案：
- 优先使用Set：需要存储唯一值、进行集合运算（交集、并集、差集）时
- 优先使用Map：需要键值对存储、键为非字符串类型、需要保持插入顺序时
- 性能优化：频繁添加删除操作时，Set/Map比数组/对象更高效
- 避免陷阱：注意特殊值比较、对象引用问题和类型转换
官方文档：README.md 中文文档：README-zh-cn.md 项目源码：wtfjs.js
通过合理利用Set和Map，你可以写出更简洁、高效的代码，解决实际开发中的数据处理难题。尝试在你的下一个项目中使用这些集合对象，体验它们带来的便利吧！
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
