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. 【pytorch报错解决】expected input to have 3 channels, but got 1 channels instead

    遇到的问题 数据是png图像的时候,如果用PIL读取图像,获得的是单通道的,不是多通道的.虽然使用opencv读取图片可以获得三通道图像数据,如下: def __getitem__(self, idx ...

  2. Luogu P1294 高手去散步

    Luogu P1294 高手去散步 因为数据较小,所以用邻接矩阵存图即可. 将1号点到$t$号点分别设为起点,深搜遍历路线,开一个$vis$数组,记录每一个点是否被访问过.每次求出从当前起点出发的最大 ...

  3. linux网络编程之posix线程(一)

    今天继续学习posix IPC相关的东东,消息队列和共享内存已经学习过,接下来学习线程相关的知识,下面开始: [注意]:创建失败这时会返回错误码,而通常函数创建失败都会返回-1,然后错误码会保存在er ...

  4. 小知识——c++关于指针的理解

    参考文章: 简介: 指针可以简化c++编程,在一些任务中没有指针是无法完成的(动态内存分配) 使用 & 可以获得变量在内存中的地址: eg: #include <iostream> ...

  5. 对比AngularJS/jQueryUI/Extjs:没有一个框架是万能的

    AngularJS不能做什么?对比Angular/JSjQueryUI/Extjs 框架就好比兵器,你得明白你手里拿的是屠龙刀还是倚天剑,刀法主要是砍,剑法主要是刺.对于那些职业喷子和脑残粉,小僧送你 ...

  6. VueRouter基础

    安装 直接下载(官方CDN) https://unpkg.com/vue-router/...通过页面script标签引入,如下: <script src='https://unpkg.com/ ...

  7. 45、[源码]-Spring容器创建-执行BeanFactoryPostProcessor

    45.[源码]-Spring容器创建-执行BeanFactoryPostProcessor 5.invokeBeanFactoryPostProcessors(beanFactory);执行BeanF ...

  8. 使用jQuery快速高效制作网页交互特效----jQuery中的事件与动画

    jQuery中的事件 和WinForm一样,在网页中的交互也是需要事件来实现的,例如tab切换效果,可以通过鼠标单击事件来实现. 事件在元素对象与功能代码中起着重要的桥梁作用. 在JQuery中,事件 ...

  9. Java知识点汇总-1

    目录 1 native方法 2 泛型 3 hashcode 4 JDK主要的包 5 被final修饰的类特点 6 空串与null串 7 判断字符串是否相等 1 native方法 JDK源代码由C++. ...

  10. 学到了林海峰,武沛齐讲的Day17-5 内置函数

    zip print(list(zip(('a','n','c','d'),(1,2,3))))  =====[('a', 1), ('n', 2), ('c', 3)]   一一对应====元组变列表 ...