1、创建实例

let map= new Map(); // 创建

2、对map的写入

// 要添加的对象
let obj1 = {name:'张三', sex:'boy',age: 21};
let obj2 = {name:'李四', sex:'boy',age: 23};
let obj3 = {name:'王五', sex:'boy',age: 22};
let obj4 = {name:'张三', sex:'girl',age: 18}; map.set(obj1.name,obj1);
map.set(obj2.name,obj2);
map.set(obj3.name,obj3);// 添加写入

map可以存储对象、字段等,key value,key是键用于取值、修改、删除。value是存入的值

3、获取map里面的值

map.get('张三'); // 通过key键获取

4、删除map的key和value

map.delete('李四');// 删除

5、修改map里面的值

map.set(obj1.name, obj4);

修改和添加一样:都是用set方法,通过key,如果map里面有该key就会对原来的值进行覆盖,如果没有就是添加

6、map的大小

map.size

用map实例名直接点size,不用括号,如果是带括号size()将会报错,

7、map的清空

map.clear();

调用clear方法清空map里面的所有内容

8、遍历map

map.forEach(function (item) {
console.log('遍历', item); // 输出value
});
map.forEach(function (value, key, maps) {
console.log('value', value) // 输出value
console.log('key', key); // 输出key
console.log('map', maps); // 输出整个对象
})
for (var [key, value] of map) {
console.log('key', key);
console.log('value', value);
}

这三种方法都可以遍历实例化的map。

注意事项:Map的另外一种意思

let map = [
{key : "张三", value : "男"}, {key : "李四",value : "女"}
];

很多人都喜欢把上面这种写法也叫做map,但是在我看来,它是一个数组,因为有个中括号,数组的元素是object而已。

所以这种map可以用普通的for循环遍历

for (var key in map) {
console.log(key);
console.log(map[key]);
}

上面这种方法有人说是遍历map的,但是它只能遍历第二种map,因为这个for循环里面的key是索引,不是实例化map的key键。

js的Map实例的更多相关文章

  1. js javascript map函数去重功能的使用实例

    js javascript map函数去重功能的使用实例 先上一个实战例子代码 var map = new Map(); for(var i=0; i<=9; i++){ map.set(i,i ...

  2. js模拟Map对象,实现key---value

    js模拟Map对象,实现key---value 根据java中map的属性,实现key----value保存 function Map() { var struct = function (key, ...

  3. js原生设计模式——3简单工厂模式\js面向对象编程实例

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  4. Js中Map对象的使用

    Js中Map对象的使用 1.定义 键/值对的集合. 2.语法 mapObj = new Map() 3.备注 集合中的键和值可以是任何类型.如果使用现有密钥向集合添加值,则新值会替换旧值. 4.属性 ...

  5. js es6 map 与 原生对象区别

    区别 object和Map存储的都是键值对组合.但是: object的键的类型是 字符串: map的键的类型是 可以是任意类型: 另外注意,object获取键值使用Object.keys(返回数组): ...

  6. list中存放map实例

    list中存放map实例 2016年08月08日 18:46:14 阅读数:22279 List中存放Map遍历输出的实例   import java.util.ArrayList;   import ...

  7. C#保留2位小数几种场景总结 游标遍历所有数据库循环执行修改数据库的sql命令 原生js轮盘抽奖实例分析(幸运大转盘抽奖) javascript中的typeof和类型判断

    C#保留2位小数几种场景总结   场景1: C#保留2位小数,.ToString("f2")确实可以,但是如果这个数字本来就小数点后面三位比如1.253,那么转化之后就会变成1.2 ...

  8. 项目中一次排序规则的改动,注意到js中map的遍历的顺序

    背景:项目需要对前端页面上某个插件的下拉选择项进行排序,需要按照配置的顺序显示. 首先调查后台,发现sql语句中已经添加order by.之后发现查询结果遍历后封装进HashMap,这里改为LinkH ...

  9. 三种动态加载js的jquery实例代码另附去除js方法

    !-- 这里为你提供了三种动态加载js的jquery实例代码哦,由于jquery是为用户提供方便的,所以利用jquery动态加载文件只要一句话$.getscript("test.js&quo ...

随机推荐

  1. vue项目 npm install 安装依赖 特别慢 解决办法

    使用NPM(Node.js包管理工具)安装依赖时速度特别慢,为了安装Express,执行命令后两个多小时都没安装成功,最后只能取消安装,笔者20M带宽,应该不是我网络的原因,后来在网上找了好久才找到一 ...

  2. 6. kafka序列化和反序列化

    https://blog.csdn.net/weixin_33690963/article/details/91698279 kafka序列化: 生产者在将消息传入kafka之前需要将其序列化成byt ...

  3. 实战jvisualvm

    在上一次[https://www.cnblogs.com/webor2006/p/10629889.html]已经编写了一个能在堆空间出现内存溢出的代码,先来回顾一下: 其中咱们给JVM配置了如下参数 ...

  4. pandas 数据类型研究(一)数据转换

    当利用pandas进行数据处理的时候,经常会遇到数据类型的问题,当拿到数据的时候,首先需要确定拿到的是正确类型的数据,一般通过数据类型的转化,这篇文章就介绍pandas里面的数据类型(data typ ...

  5. jquery判断两次密码不一致

    jquery检测输入密码两次不一样提示 输入密码: <input type="password" name="password1" id="pa ...

  6. Vue多语言支持

    i18n插件实现多语言支持,本文以中英文为例记录一下配置过程. 1.配置 1.1安装:npm install vue-i18n --save 1.2创建中英文配置项文件 src/lang目录下创建以下 ...

  7. 自定义的JSP标签

    JSP标签 JSP标准标签库(JSTL)是一个JSP标签集合,它封装了JSP应用的通用核心功能. JSTL支持通用的.结构化的任务,比如迭代,条件判断,XML文档操作,国际化标签,SQL标签. 除了这 ...

  8. 爬虫与seo优化

    爬虫及爬行方式 爬虫有很多名字,比如web机器人.spider等,它是一种可以在无需人类干预的情况下自动进行一系列web事务处理的软件程序.web爬虫是一种机器人,它们会递归地对各种信息性的web站点 ...

  9. 数据结构实验之查找四:二分查找(SDUT 3376)

    #include <stdio.h> #include <string.h> #include <stdlib.h> int a[1000005]; int fin ...

  10. Hadoop YARN 调度器(scheduler) —— 资源调度策略

    本文通过MetaWeblog自动发布,原文及更新链接:https://extendswind.top/posts/technical/hadoop_yarn_resource_scheduler 搜了 ...