微搭中除了常见的五种变量，文本、数字、布尔值、对象、数组外，我们还会经常用两种数据结构Map和Set。本篇我们讲解一下这两种数据结构的常用方法和常见场景。
1 Map的常用方法
Map 是一种键值对的集合，类似于对象，但有一些重要的区别。
// 创建 Maplet myMap = new Map();// 添加键值对myMap.set('key1', 'value1');myMap.set(42, 'value2');myMap.set({a: 1}, 'value3');// 获取值console.log(myMap.get('key1')); // 'value1'// 检查键是否存在console.log(myMap.has(42)); // true// 删除键值对myMap.delete(42);// 获取 Map 大小console.log(myMap.size); // 2// 遍历 MapmyMap.forEach((value, key) => {console.log(key, value);});// 清空 MapmyMap.clear();
2 Set的常用方法
Set 是一种值的集合，其中每个值只能出现一次。
// 创建 Setlet mySet = new Set();// 添加值mySet.add(1);mySet.add('some text');mySet.add({a: 1, b: 2});// 检查值是否存在console.log(mySet.has(1)); // true// 删除值mySet.delete(1);// 获取 Set 大小console.log(mySet.size); // 2// 遍历 SetmySet.forEach(value => {console.log(value);});// 清空 SetmySet.clear();
3 Set的常见场景
1、需要存储唯一值的场景。
2、需要快速查找、添加、删除元素的场景。
3、去重。
// 使用 Set 去除数组中的重复元素let numbers = [1, 2, 2, 3, 4, 4, 5];let uniqueNumbers = [...new Set(numbers)];console.log(uniqueNumbers); // [1, 2, 3, 4, 5]// 使用 Set 实现简单的标签系统let tagSet = new Set();function addTag(tag) {tagSet.add(tag.toLowerCase());}function removeTag(tag) {tagSet.delete(tag.toLowerCase());}function hasTag(tag) {return tagSet.has(tag.toLowerCase());}
在微搭中一个常见的场景，比如我们创建了一个配置表，我们会有几个有关系的字段，比如我们的商品分类，我们有一级分类、二级分类、三级分类
按照这种去添加数据的时候，如果我们单独获取一级分类，就会有很多重复数据，我们就可以在表达式中使用Set来完成去重的操作
4 Map的常见场景
Map的常见场景主要是我们用来处理多条数据的。微搭中通过查询多条的API查询到的数据它是一个对象数组，对象数组尤其在获取对象属性的时候，需要通过循环，比较消耗资源，这个时候我们就可以将对象数组转换成Map
假设我们有一个对象数组，每个对象代表一个用户，包含 id、name 和其他属性：
const users = [{ id: 1, name: "Alice", age: 30 },{ id: 2, name: "Bob", age: 25 },{ id: 3, name: "Charlie", age: 35 }];
我们可以创建一个 Map，使用用户的 id 作为键，用户对象作为值：
const userMap = new Map(users.map(user => [user.id, user]));
转换成Map之后，就可以调用各种方法：
快速查找
const user = userMap.get(2);console.log(user); // { id: 2, name: "Bob", age: 25 }
我们就可以直接通过ID来获取具体的信息
高效更新
userMap.get(2).age = 26;可以直接通过 id 更新用户信息，无需遍历数组查找。
轻松添加新用户
userMap.set(4, { id: 4, name: "David", age: 40 });高效删除
userMap.delete(3);检查用户是否存在
console.log(userMap.has(2)); // true获取所有用户
const allUsers = Array.from(userMap.values());遍历用户
userMap.forEach((user, id) => {console.log(`User ${id}: ${user.name}`);});
通过Map提供的各种便利方法我们就可以快速的去访问和修改数据，如果需要回填到数据源中，我们也可以调用Map和数组的转换方法，将最终的结果保存到数据源中。
总结
我们本篇介绍了JS中两种常见的数据结构，随着你开发的深入，这些知识点必然会用到，先把它储备好，在用的时候就有备选的方法。要不然只能靠笨办法去实现，效率和性能就不太高。
