Map竟然这么好用?分享 1 段优质 JS 代码片段!

本内容首发于工粽号:程序员大澈,每日分享一段优质代码片段,欢迎关注和投稿!

大家好,我是大澈!

本文约 600+ 字,整篇阅读约需 1 分钟。

今天分享一段优质 JS 代码片段,使用Map数据结构来管理表单数据。

老规矩,先阅读代码片段并思考,再看代码解析再思考,最后评论区留下你的见解!

js 复制代码
// 创建一个Map对象
const formMap = new Map();

formMap.set('username', 'xxx');
formMap.set('password', '123456');

const username = formMap.get('username');
const password = formMap.get('password');

console.log(username); // 'xxx'
console.log(password); // '123456'

if (formMap.has('username')) {
  console.log('Username exists in the map');
}

formMap.delete('password');
console.log(formMap.get('password')); // undefined

formMap.clear();
console.log(formMap.size); // 0

分享原因

这段代码展示了如何使用 Map 对象来存储和访问键值对。

相比于使用普通对象,Map 提供了一些优点:

键的类型: 在 Map 中,键可以是任何类型,包括对象、函数和基本数据类型,而在普通对象中,键只能是字符串或符号。

迭代顺序: Map 按插入顺序迭代键值对,而普通对象则没有保证迭代顺序。

内置方法: Map 提供了一些内置方法,如 set、get、has、delete 和 clear,使得操作更加便捷。

代码解析

1. formMap.set('username', 'xxx');

添加表单元素的值到Map中。

2. formMap.get('username');

获取表单元素的值。

3. formMap.has('username')

检查是否包含某个键。

4. formMap.delete('password');

删除某个键值对。

5. formMap.clear();

清空整个Map。

6. formMap.size

查看键值对的数量。

  • end -
相关推荐
醉の虾10 分钟前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧19 分钟前
TypeScript 的发展与基本语法
前端·javascript·typescript
chusheng184032 分钟前
Java项目-基于SpringBoot+vue的租房网站设计与实现
java·vue.js·spring boot·租房·租房网站
asleep70141 分钟前
第8章利用CSS制作导航菜单
前端·css
游走于计算机中摆烂的1 小时前
启动前后端分离项目笔记
java·vue.js·笔记
幼儿园的小霸王1 小时前
通过socket设置版本更新提示
前端·vue.js·webpack·typescript·前端框架·anti-design-vue
疯狂的沙粒1 小时前
对 TypeScript 中高级类型的理解?应该在哪些方面可以更好的使用!
前端·javascript·typescript
码蜂窝编程官方2 小时前
【含开题报告+文档+PPT+源码】基于SpringBoot+Vue的虎鲸旅游攻略网的设计与实现
java·vue.js·spring boot·后端·spring·旅游
旭日猎鹰2 小时前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter
乐闻x3 小时前
Vue.js 性能优化指南:掌握 keep-alive 的使用技巧
前端·vue.js·性能优化