【ES6复习笔记】Map(14)

概念

Map 是 JavaScript 中的一种数据结构,它允许你存储键值对,并且可以通过键来访问对应的值。在本教程中,我们将学习如何声明、添加、删除、获取和遍历 Map 集合。

ES6 提供了 Map 数据结构。它类似于对象,也是键值对的集合。但是 “键” 的范围不限于字符串,各种类型的值(包括对象)都可以当作键。Map 也实现了 iterator 接口,所以可以使用『扩展运算符』和「for…of…』进行遍历。Map 的属性和方法。

声明 Map

首先,我们需要声明一个 Map 对象。在 JavaScript 中,你可以使用 new Map() 来创建一个新的 Map 实例。

let m = new Map();

Map的属性和方法:

  1. size:返回Map的元素个数。
  2. set(key, value):增加一个新元素,返回当前Map。
  3. get(key):返回键名对象的键值。
  4. has(key):检测Map中是否包含某个元素,返回boolean值。
  5. clear():清空集合,返回undefined。

添加元素

你可以使用 set 方法向 Map 中添加元素。set 方法接受两个参数:键和值。

m.set('name', '星达网络');
m.set('change', function() {console.log("我们可以改变你!!");
});
let key = {school: 'xkadmin'
};
m.set(key, ['北京', '上海', '深圳']);

获取元素数量

你可以使用 size 属性来获取 Map 中元素的数量。

console.log(m.size);

删除元素

你可以使用 delete 方法从 Map 中删除指定的键值对。

m.delete('name');

获取元素

你可以使用 get 方法获取 Map 中指定键的值。

console.log(m.get('change'));
console.log(m.get(key));

清空 Map

你可以使用 clear 方法清空 Map 中的所有元素。

m.clear();

遍历 Map

你可以使用 for...of 循环来遍历 Map 中的所有键值对。

for(let v of m) {console.log(v);
}

完整代码示例

下面是一个完整的代码示例,展示了如何使用 Map 集合。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Map</title>
</head>
<body><script>//声明 Maplet m = new Map();//添加元素m.set('name', '星达网络');m.set('change', function() {console.log("我们可以改变你!!");});let key = {school: 'xkadmin'};m.set(key, ['北京', '上海', '深圳']);//sizeconsole.log(m.size);//删除m.delete('name');//获取console.log(m.get('change'));console.log(m.get(key));//清空// m.clear();//遍历for(let v of m) {console.log(v);}// console.log(m);</script>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/64278.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

富芮坤FR800X系列之PWM输出程序应用设计

文章目录 前言1.设计背景2.简介3.如何设计控制调光的接口呢4.硬件设计5.软件设计5.1.软件流程图5.2.软件代码 6.小结 前言 版权归作者所有、未经允许、请勿转载。 读者对象&#xff1a; 本文档主要适用以下工程师&#xff1a; 嵌入式系统工程师 单片机软件工程师 IOT固…

Ftrans数据摆渡系统 搭建安全便捷跨网文件传输通道

一、专业数据摆渡系统对企业的意义 专业的数据摆渡系统对企业具有重要意义&#xff0c;主要体现在以下几个方面‌&#xff1a; 1、‌数据安全性‌&#xff1a;数据摆渡系统通过加密传输、访问控制和审计日志等功能&#xff0c;确保数据在传输和存储过程中的安全性。 2、‌高…

EasyPoi 使用$fe:模板语法生成Word动态行

1 Maven 依赖 <dependency><groupId>cn.afterturn</groupId><artifactId>easypoi-spring-boot-starter</artifactId><version>4.0.0</version> </dependency> 2 application.yml spring:main:allow-bean-definition-over…

定义Shape:打造属于你的独特图形

自定义Shape:打造属于你的独特图形 在Android开发中,自定义图形绘制是一个非常重要的技能,尤其是在需要实现复杂UI或特定设计需求时。Android提供了android.graphics.drawable.shapes包,其中包含了一些基本的形状类,如RectShape、OvalShape等。然而,有时这些基本形状无法…

python 渗透开发工具之SQLMapApi Server不同IP服务启动方式处理 解决方案SqlMapApiServer外网不能访问的情况

目录 说在前面 什么是 SQLMapAPI 说明 sqlmapApi能干什么 sqlmapApi 服务安装相关 kali-sqlmap存放位置 正常启动sqlmap-api server SqlMapApi-Server 解决外网不能访问情况 说在前面 什么是sqlmap 这个在前面已经说过了&#xff0c;如果这个不知道&#xff0c;就可以…

【基础还得练】 KKT 条件

优秀教程-真正理解拉格朗日乘子法和 KKT 条件&#xff1a; link优秀教程-最优化(6)&#xff1a;一般约束优化问题的最优性理论&#xff1a; link KKT条件&#xff08;Karush-Kuhn-Tucker条件&#xff09;是非线性规划中的一组必要条件&#xff0c;在某些情况下也是最优解的充分…

使用 Webpack 优雅的构建微前端应用❕

Module Federation 通常译作“模块联邦”&#xff0c;是 Webpack 5 新引入的一种远程模块动态加载、运行技术。MF 允许我们将原本单个巨大应用按我们理想的方式拆分成多个体积更小、职责更内聚的小应用形式&#xff0c;理想情况下各个应用能够实现独立部署、独立开发(不同应用甚…

Boost之log日志使用

不讲理论&#xff0c;直接上在程序中可用代码&#xff1a; 一、引入Boost模块 开发环境&#xff1a;Visual Studio 2017 Boost库版本&#xff1a;1.68.0 安装方式&#xff1a;Nuget 安装命令&#xff1a; #只安装下面几个即可 Install-package boost -version 1.68.0 Install…

【MySQL】十四,MySQL 8.0的隐藏索引

在MySQL 8.0之前的版本中&#xff0c;索引只能直接删除。如果删除后发现引起了系统故障&#xff0c;又必须进行创建。当表的数据量比较大的时候&#xff0c;这样做的代价就会非常高。 在MySQL 8.0中&#xff0c;提供了隐藏索引。如果想删除某个索引&#xff0c;那么在实际删除…

【ES6复习笔记】解构赋值(2)

介绍 解构赋值是一种非常方便的语法&#xff0c;可以让我们更简洁地从数组和对象中提取值&#xff0c;并且可以应用于很多实际开发场景中。 1. 数组的解构赋值 数组的解构赋值是按照一定模式从数组中提取值&#xff0c;然后对变量进行赋值。下面是一个例子&#xff1a; con…

爬虫数据存储:Redis、MySQL 与 MongoDB 的对比与实践

爬虫的核心任务是从网络中提取数据&#xff0c;而存储这些数据是流程中不可或缺的一环。根据业务需求的不同&#xff0c;存储的选择可能直接影响数据处理的效率和开发体验。本文将介绍三种常用的存储工具——Redis、MySQL 和 MongoDB&#xff0c;分析它们的特点&#xff0c;并提…

【Python】使用匿名函数Lambda解析html源码的任意元素(Seleinium ,BeautifulSoup皆适用)

一直都发现lambda函数非常好用&#xff0c;它可以用简洁的方式编写小函数&#xff0c;无需写冗长的过程就可以获取结果。干脆利落&#xff01; 它允许我们定义一个匿名函数&#xff0c;在调用一次性的函数时非常有用。 最近整理了一些&#xff0c;lambda函数结合BeautifulSou…

Bash语言的语法

Bash语言简介与应用 Bash&#xff08;Bourne Again SHell&#xff09;是一种Unix Shell和命令语言&#xff0c;在Linux、macOS及其他类Unix系统中被广泛使用。作为GNU项目的一部分&#xff0c;Bash不仅是对早期Bourne Shell的增强&#xff0c;还引入了许多特性和功能&#xff…

Ingress-Nginx Annotations 指南:配置要点全方面解读(下)

文章目录 1.HTTP2 Push Preload2.Server Alias3.Server snippet4.Client Body Buffer Size5.External Authentication6.Global External Authentication7.Rate Limiting8.Global Rate Limiting9.Permanent Redirect10.Permanent Redirect Code11.Temporal Redirect12.SSL Passt…

互联网路由架构

大家觉得有意义和帮助记得及时关注和点赞!!! 本书致力于解决实际问题&#xff0c;书中包含大量的架构图、拓扑图和真实场景示例&#xff0c;内容全面 且易于上手&#xff0c;是不可多得的良心之作。本书目的是使读者成为将自有网络集成到全球互联网 领域的专家。 以下是笔记内…

【Flutter_Web】Flutter编译Web第三篇(网络请求篇):dio如何改造方法,变成web之后数据如何处理

前言 Flutter端在处理网络请求的时候&#xff0c;最常用的库当然是Dio了&#xff0c;那么在改造成web端的时候&#xff0c;最先处理的必然是网络请求&#xff0c;否则没有数据去处理驱动实图渲染。 官方链接 pub https://pub.dev/packages/diogithub https://github.com/c…

Spring Boot @Conditional注解

在Spring Boot中&#xff0c;Conditional 注解用于条件性地注册bean。这意味着它可以根据某些条件来决定是否应该创建一个特定的bean。这个注解可以放在配置类或方法上&#xff0c;并且它会根据提供的一组条件来判断是否应该实例化对应的组件。 要使用 Conditional注解时&#…

项目上传到gitcode

首先需要在个人设置里面找到令牌 记住自己的账号和访问令牌&#xff08;一长串&#xff09;&#xff0c;后面git要输入这个&#xff0c; 账号是下面这个 来到自己的仓库 #查看远程仓库&#xff0c;是不是自己的云仓库 git remote -v # 创建新分支 git checkout -b llf # 三步…

【Rust自学】6.4. 简单的控制流-if let

喜欢的话别忘了点赞、收藏加关注哦&#xff0c;对接下来的教程有兴趣的可以关注专栏。谢谢喵&#xff01;(&#xff65;ω&#xff65;) 6.4.1. 什么是if let if let语法允许将if和let组合成一种不太冗长的方式来处理与一种模式匹配的值&#xff0c;同时忽略其余模式。 可以…

【Git学习】windows系统下git init后没有看到生成的.git文件夹

[问题] git init 命令后看不到.git文件夹 [原因] 文件夹设置隐藏 [解决办法] Win11 win10