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 相关文章推荐
jQuery 入门讲解1
Apr 15 Javascript
Jquery attr("checked") 返回checked或undefined 获取选中失效
Oct 10 Javascript
jQuery控制TR显示隐藏的三种常用方法
Aug 21 Javascript
JavaScript实现16进制颜色值转RGB的方法
Feb 09 Javascript
JavaScript实现LI列表数据绑定的方法
Aug 04 Javascript
javascript实现的登陆遮罩效果汇总
Nov 09 Javascript
AngulerJS学习之按需动态加载文件
Feb 13 Javascript
Angular实现跨域(搜索框的下拉列表)
Feb 16 Javascript
js+canvas实现五子棋小游戏
Aug 02 Javascript
jQuery实现评论模块
Aug 19 jQuery
在webstorm中配置less的方法详解
Sep 25 Javascript
前端 javascript 实现文件下载的示例
Nov 24 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
不用数据库的多用户文件自由上传投票系统(2)
2006/10/09 PHP
MySQL GBK→UTF-8编码转换
2007/05/24 PHP
基于flush()不能按顺序输出时的解决办法
2013/06/29 PHP
PHP入门教程之上传文件实例详解
2016/09/11 PHP
php+jQuery递归调用POST循环请求示例
2016/10/14 PHP
PHP面向对象五大原则之里氏替换原则(LSP)详解
2018/04/08 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
Javascript 刷新全集常用代码
2009/11/22 Javascript
模仿百度三维地图的js数据分享
2011/05/12 Javascript
js如何设置在iframe框架中指定div不显示
2013/12/04 Javascript
js 通过cookie实现刷新不变化树形菜单
2014/10/30 Javascript
jQuery实现左右切换焦点图
2015/04/03 Javascript
关于JavaScript中forEach和each用法浅析
2017/07/27 Javascript
AngularJS实现表单验证功能详解
2017/10/12 Javascript
Vue+SpringBoot开发V部落博客管理平台
2017/12/27 Javascript
webpack4.0打包优化策略整理小结
2018/03/30 Javascript
vue 设置路由的登录权限的方法
2018/07/03 Javascript
layui实现tab的添加拒绝重复的方法
2019/09/04 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
2020/02/23 Javascript
Python实现远程调用MetaSploit的方法
2014/08/22 Python
python使用正则表达式的search()函数实现指定位置搜索功能
2017/11/10 Python
python下解压缩zip文件并删除文件的实例
2018/04/24 Python
Python小进度条显示代码
2019/03/05 Python
详解Python 中sys.stdin.readline()的用法
2019/09/12 Python
使用tensorflow根据输入更改tensor shape
2020/06/23 Python
python和C++共享内存传输图像的示例
2020/10/27 Python
python 获取字典键值对的实现
2020/11/12 Python
使用HTML5做的导航条详细步骤
2020/10/19 HTML / CSS
英国领先品牌手动工具和电动工具供应商:Tooled Up
2018/11/24 全球购物
雷蛇美国官网:Razer
2020/04/03 全球购物
我的求职计划书
2014/01/10 职场文书
护理专业自我鉴定
2014/01/30 职场文书
网站出售协议书范文
2014/10/10 职场文书
教师先进事迹材料
2014/12/16 职场文书
国家助学金受助感言
2015/08/01 职场文书