es6系列教程_ Map详解以及常用api介绍


Posted in Javascript onSeptember 25, 2017

ECMAScript 6中的Map类型是一种存储着许多键值对的有序列表。键值对支持所有的数据类型. 键 0 和 ‘0'会被当做两个不同的键,不会发生强制类型转换.

如何使用Map?

let map = new Map();

常用方法:

set( 键,值 ): 添加新的键值对元素

get( 键 ): 获取键对应的值,如果这个值不存在,返回undefined

let map = new Map();
map.set( '0', 'ghostwu' );
map.set( 0, 'ghostwu' );

console.log( map.get( '0' ) ); //ghostwu
console.log( map.get( 'name' ) ); //undefined;
let map = new Map();
var key1 = {}, key2 = {};

map.set( key1, 'ghostwu' );
map.set( key2, 22 );

console.log( map.get( key1 ) ); //ghostwu
console.log( map.get( key2 ) ); //22

可以用对象做为Map的键. 虽然是两个空对象,但是不会发生强类型转换.

has( key ): 判断键名是否存在

delete( key ):删除键名以及对应的值

clear(): 移除map集合中所有的键值对

size: map集合的元素个数

let map = new Map();
map.set( 'name', 'ghostwu' );
map.set( 'age', 22 );

console.log( map.has( 'name' ) );//true
console.log( map.size ); //2

map.delete( 'name' );
console.log( map.has( 'name' ) );//false
console.log( map.size ); //1
console.log( map.has( 'age' ) ); //true

map.clear();
console.log( map.size ); //0
console.log( map.has( 'age' ) ); //false

Map支持数组初始化,用一个二维数组,每个数组用键值对的方式

let map = new Map( [ [ 'name', 'ghostwu' ], [ 'age', 22 ] ] );
console.log( map.has( 'name') ); //true
console.log( map.has( 'age') ); //true
console.log( map.size ); //2
map.set( 'sex', 'man' );
console.log( map.size );
console.log( map.get( 'name' ) ); //ghostwu
map.clear();
console.log( map.size ); //0

Map也支持forEach方法,支持2个参数, 第一个:函数,函数中支持3个参数( 值,键,当前map ), 第二个: this

let map = new Map( [ [ 'name', 'ghostwu' ], [ 'age', 22 ] ] );
map.set( 'sex', 'man' );
map.forEach( function( val, key, cur ){
 console.log( val, key, cur, this );
}, 100 );

es6系列教程_ Map详解以及常用api介绍

以上这篇es6系列教程_ Map详解以及常用api介绍就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用YUI做了个标签浏览效果
Feb 20 Javascript
jquery 批量上传图片实现代码
Jan 28 Javascript
JS代码放在head和body中的区别分析
Dec 01 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
Mar 04 Javascript
Javascript调用函数方法的几种方式介绍
Mar 20 Javascript
JavaScript节点及列表操作实例小结
Aug 05 Javascript
jquery实现漂亮的二级下拉菜单代码
Aug 26 Javascript
js的三种继承方式详解
Jan 21 Javascript
Express进阶之log4js实用入门指南
Feb 10 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
Oct 10 Javascript
微信小程序实现点击空白隐藏的方法示例
Aug 13 Javascript
angular *Ngif else用法详解
Dec 15 Javascript
简单谈谈js的数据类型
Sep 25 #Javascript
实现两个文本框同时输入的实例
Sep 25 #Javascript
zTree jQuery 树插件的使用(实例讲解)
Sep 25 #jQuery
对于input 框限定输入值为浮点型的js代码
Sep 25 #Javascript
静态页面实现 include 引入公用代码的示例
Sep 25 #Javascript
React学习之事件绑定的几种方法对比
Sep 24 #Javascript
一文让你彻底搞清楚javascript中的require、import与export
Sep 24 #Javascript
You might like
深入PHP autoload机制的详解
2013/06/09 PHP
8个必备的PHP功能开发
2015/10/02 PHP
让IE8支持DOM 2(不用框架!)
2009/12/31 Javascript
ExtJS 工具栏 分页事件参数
2010/03/05 Javascript
从零开始学习jQuery (三) 管理jQuery包装集
2011/02/23 Javascript
JavaScript生成随机数的4种自定义函数分享
2015/02/28 Javascript
鼠标经过子元素触发mouseout,mouseover事件的解决方案
2015/07/26 Javascript
JS实现为排序好的字符串找出重复行的方法
2016/03/02 Javascript
javascript实现PC网页里的拖拽效果
2016/03/14 Javascript
详细介绍RxJS在Angular中的应用
2017/09/23 Javascript
微信小程序实时聊天WebSocket
2018/07/05 Javascript
vue中如何实现pdf文件预览的方法
2018/07/12 Javascript
NodeJS如何实现同步的方法示例
2018/08/24 NodeJs
使用flow来规范javascript的变量类型
2019/09/12 Javascript
浅谈layui分页控件field参数接收对象的问题
2019/09/20 Javascript
Vue.js计算机属性computed和methods方法详解
2019/10/12 Javascript
vue 自定义右键样式的实例代码
2019/11/06 Javascript
Python实现抓取网页并且解析的实例
2014/09/20 Python
Python实现在线程里运行scrapy的方法
2015/04/07 Python
Python实现JSON反序列化类对象的示例
2018/01/31 Python
django ajax json的实例代码
2018/05/29 Python
Python+opencv 实现图片文字的分割的方法示例
2019/07/04 Python
django迁移数据库错误问题解决
2019/07/29 Python
pytorch 批次遍历数据集打印数据的例子
2019/12/30 Python
将不规则的Python多维数组拉平到一维的方法实现
2021/01/11 Python
HTML5 embed标签定义和用法详解
2014/05/09 HTML / CSS
美国最受欢迎的度假目的地优惠套餐:BookVIP
2018/09/27 全球购物
军训自我鉴定200字
2014/02/13 职场文书
2014年父亲节活动方案
2014/03/06 职场文书
财务工作疏忽检讨书
2014/09/11 职场文书
2014年教师工作总结
2014/11/10 职场文书
应届生简历自我评价
2015/03/11 职场文书
2015年扫黄打非工作总结
2015/05/13 职场文书
培养联系人考察意见
2015/06/01 职场文书
创业的9条正确思考方式
2019/08/26 职场文书
python中Tkinter 窗口之输入框和文本框的实现
2021/04/12 Python