javascript中的Map和Set

目录

  • [1 Map的常用方法](#1 Map的常用方法)
  • [2 Set的常用方法](#2 Set的常用方法)
  • [3 Set的常见场景](#3 Set的常见场景)
  • [4 Map的常见场景](#4 Map的常见场景)
  • 总结

微搭中除了常见的五种变量,文本、数字、布尔值、对象、数组外,我们还会经常用两种数据结构Map和Set。本篇我们讲解一下这两种数据结构的常用方法和常见场景。

1 Map的常用方法

Map 是一种键值对的集合,类似于对象,但有一些重要的区别。

bash 复制代码
// 创建 Map
let 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

// 遍历 Map
myMap.forEach((value, key) => {
  console.log(key, value);
});

// 清空 Map
myMap.clear();

2 Set的常用方法

Set 是一种值的集合,其中每个值只能出现一次。

bash 复制代码
// 创建 Set
let 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

// 遍历 Set
mySet.forEach(value => {
  console.log(value);
});

// 清空 Set
mySet.clear();

3 Set的常见场景

1、需要存储唯一值的场景。

2、需要快速查找、添加、删除元素的场景。

3、去重。

bash 复制代码
// 使用 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 和其他属性:

bash 复制代码
const users = [
  { id: 1, name: "Alice", age: 30 },
  { id: 2, name: "Bob", age: 25 },
  { id: 3, name: "Charlie", age: 35 }
];

我们可以创建一个 Map,使用用户的 id 作为键,用户对象作为值:

bash 复制代码
const userMap = new Map(users.map(user => [user.id, user]));

转换成Map之后,就可以调用各种方法:

  1. 快速查找
bash 复制代码
   const user = userMap.get(2);
   console.log(user); // { id: 2, name: "Bob", age: 25 }

我们就可以直接通过ID来获取具体的信息

  1. 高效更新
bash 复制代码
 userMap.get(2).age = 26;

可以直接通过 id 更新用户信息,无需遍历数组查找。

3.轻松添加新用户

bash 复制代码
   userMap.set(4, { id: 4, name: "David", age: 40 });

4.高效删除

bash 复制代码
userMap.delete(3);

5.检查用户是否存在

bash 复制代码
   console.log(userMap.has(2)); // true

6.获取所有用户

bash 复制代码
   const allUsers = Array.from(userMap.values());

7.遍历用户

bash 复制代码
   userMap.forEach((user, id) => {
     console.log(`User ${id}: ${user.name}`);
   });

通过Map提供的各种便利方法我们就可以快速的去访问和修改数据,如果需要回填到数据源中,我们也可以调用Map和数组的转换方法,将最终的结果保存到数据源中。

总结

我们本篇介绍了JS中两种常见的数据结构,随着你开发的深入,这些知识点必然会用到,先把它储备好,在用的时候就有备选的方法。要不然只能靠笨办法去实现,效率和性能就不太高。

相关推荐
活宝小娜1 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点1 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow1 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o1 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
----云烟----2 小时前
QT中QString类的各种使用
开发语言·qt
lsx2024062 小时前
SQL SELECT 语句:基础与进阶应用
开发语言
开心工作室_kaic2 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā2 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
向宇it2 小时前
【unity小技巧】unity 什么是反射?反射的作用?反射的使用场景?反射的缺点?常用的反射操作?反射常见示例
开发语言·游戏·unity·c#·游戏引擎
武子康2 小时前
Java-06 深入浅出 MyBatis - 一对一模型 SqlMapConfig 与 Mapper 详细讲解测试
java·开发语言·数据仓库·sql·mybatis·springboot·springcloud