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. linux文件权限命令chmod学习

    Linux系统中的每个文件和目录都有访问许可权限,用它来确定谁可以通过何种方式对文件和目录进行访问和操作. 文件或目录的访问权限分为只读,只写和可执行三种.以文件为例,只读权限表示只允许读其内容,而禁 ...

  2. 日期时间格式化 SimpleDateFormat与DateTimeFormatter

    原文:https://www.jianshu.com/p/b212afa16f1f 1.SimpleDateFormat为什么不是线程安全的? 如果我们把SimpleDateFormat定义成stat ...

  3. 牛客练习赛48 C 小w的糖果 (数学,多项式,差分)

    牛客练习赛48 C 小w的糖果 (数学,多项式) 链接:https://ac.nowcoder.com/acm/contest/923/C来源:牛客网 题目描述 小w和他的两位队友teito.toki ...

  4. 【动态规划】ZZNU-OJ- 2054 : 油田

    2054 : 油田 (一个神奇的功能:点击上方文字进入相应页面) 时间限制:1 Sec 内存限制:32 MiB提交:49 答案正确:6 提交 状态 讨论区 题目描述 在太平洋的一片海域,发现了大量的油 ...

  5. springboot+支付宝完成秒杀项目的初体验

    springboot+支付宝完成秒杀项目的初体验 思考的问题: 首先是秒杀的商品查询,考虑到是热点数据,所以写一个接口读取当日批次的秒杀商品到redis中(那么接下来对商品的操作都放入redis中). ...

  6. canvas圆形进度条(逆时针)

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

  7. java继承(implements与extends)总结

       版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/weixin_39938767/article/details/80056922 关键字impl ...

  8. 利用selenium自动化测试样例一

    import argparse import logging import psycopg2 import datetime,time import os,sys from selenium impo ...

  9. 记录 ubuntu 安装中文语言出现 software database is broken

    在终端下执行 sudo apt-get install  language-pack-zh-han* 然后去语言中心设置中文,并全局使用即可.

  10. sql server update inner join on 的使用

    假定我们有两张表,一张表为Product表存放产品信息,其中有产品价格列Price:另外一张表是ProductPrice表,我们要将ProductPrice表中的价格字段Price更新为Price表中 ...