【ES6复习笔记】Map(14)

news/2024/12/27 4:22:04/

概念

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

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

Map_6">声明 Map

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

let m = new Map();

Map_14">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_62">清空 Map

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

m.clear();

Map_70">遍历 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.ppmy.cn/news/1558428.html

相关文章

MFC/C++学习系列之简单记录1——错误解决与Dialog移植

MFC/C学习系列之简单记录1 前言MFC application已停止工作Dialog移植MFC中的去边框设置总结 前言 最近接触MFC&#xff0c;接手一个项目&#xff0c;基于MFC架构编写的&#xff0c;在跑通代码的过程中出现的问题进行简单记录。 MFC application已停止工作 在代码移植过程中&a…

“黄师日报”平安小程序springboot+论文源码调试讲解

第2章 开发环境与技术 基于web的“黄师日报”平安小程序的编码实现需要搭建一定的环境和使用相应的技术&#xff0c;接下来的内容就是对基于web的“黄师日报”平安小程序用到的技术和工具进行介绍。 2.1 MYSQL数据库 本课题所开发的应用程序在数据操作方面是不可预知的&#…

《信管通低代码信息管理系统开发平台》Windows环境安装说明

1 简介 《信管通低代码信息管理系统应用平台》提供多环境软件产品开发服务&#xff0c;包括单机、局域网和互联网。我们专注于适用国产硬件和操作系统应用软件开发应用。为事业单位和企业提供行业软件定制开发&#xff0c;满足其独特需求。无论是简单的应用还是复杂的系统&…

实战分享:开发设计文档模版及编写要点

总框架 一、需求类开发设计文档模版 1、PRD链接 PRD文档链接 2、后端设计 1&#xff09;流程图/代码逻辑描述 描述代码逻辑&#xff0c;要求清晰准确&#xff0c;尽量用图表描述 超过3人天工作量的需求必须有流程图 2&#xff09;库表设计 涉及数据库的改动&#xff0c…

删除VSCode上 origin/分支名,但GitLab上实际上不存在的分支

如果在 Visual Studio Code (VSCode) 中看到的分支在 GitLab 上实际上并不存在&#xff0c;这通常是因为 VSCode 缓存了旧的远程分支信息。以下是一些步骤来解决这个问题&#xff1a; 更新远程引用&#xff1a; 打开 VSCode 的终端&#xff0c;并运行以下命令来更新远程分支的引…

AAAI-2024 | 大语言模型赋能导航决策!NavGPT:基于大模型显式推理的视觉语言导航

作者&#xff1a;Gengze Zhou, Yicong Hong, Qi Wu 单位&#xff1a;阿德莱德大学&#xff0c;澳大利亚国立大学 论文链接&#xff1a; NavGPT: Explicit Reasoning in Vision-and-Language Navigation with Large Language Models &#xff08;https://ojs.aaai.org/index.p…

Vuex 的使用和原理详解

Vuex 是 Vue.js 的一个专门用于管理应用状态的库&#xff0c;它通过集中式存储和状态管理&#xff0c;使得组件之间可以更加高效地共享数据&#xff0c;同时提供了明确的数据流动机制。 一、什么是 Vuex Vuex 是一个专为 Vue.js 应用程序设计的状态管理模式&#xff0c;采用集…

从 GitLab.com 到 JihuLab.com 的迁移指南

本文分享从 GitLab.com 到 JihuLab.com 的迁移指南。 近期&#xff0c;GitLab Inc. 针对其 SaaS 产品做了限制&#xff0c;如果被判定为国内用户&#xff0c;则会建议使用其在国内的发布版本极狐GitLab。从 GitLab SaaS 产品&#xff08;GitLab.com&#xff09;迁移到极狐GitL…