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阻止事件冒泡具体实现
Oct 11 Javascript
解析JavaScript中instanceof对于不同的构造器或许都返回true
Dec 03 Javascript
jQuery调用ajax请求的常见方法汇总
Mar 24 Javascript
纯javascript制作日历控件
Jul 17 Javascript
Angular中实现树形结构视图实例代码
May 05 Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
Dec 19 Javascript
javascript性能优化之分时函数的介绍
Mar 28 Javascript
ng-events类似ionic中Events的angular全局事件
Sep 05 Javascript
vue如何解决循环引用组件报错的问题
Sep 22 Javascript
巧妙运用v-model实现父子组件传值的方法示例
Apr 07 Javascript
vue中组件通信的八种方式(值得收藏!)
Aug 09 Javascript
js编写简易的计算器
Jul 29 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
[FAQ]PHP中的一些常识:类篇
2006/10/09 PHP
smarty中post用法实例
2014/11/28 PHP
php对象在内存中的存在形式分析
2015/02/03 PHP
PHP获取数组的键与值方法小结
2015/06/13 PHP
动态控制Table的js代码
2007/03/07 Javascript
JS 对象介绍
2010/01/20 Javascript
jquery ui resizable bug解决方法
2010/10/26 Javascript
子窗体与父窗体传值示例js代码
2013/08/01 Javascript
JS实现文件动态顺序载入的方法
2015/03/07 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
2015/10/08 Javascript
js中string和number类型互转换技巧(分享)
2016/11/28 Javascript
Ionic3 UI组件之Gallery Modal详解
2017/06/07 Javascript
js实现动态增加文件域表单功能
2018/10/22 Javascript
Vue源码探究之状态初始化
2018/11/14 Javascript
vue 强制组件重新渲染(重置)的两种方案
2019/10/29 Javascript
Vue请求java服务端并返回数据代码实例
2019/11/28 Javascript
js实现3D旋转效果
2020/08/18 Javascript
[44:40]Serenity vs Pain 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python的Django框架中的select_related函数对QuerySet 查询的优化
2015/04/01 Python
Python实现ssh批量登录并执行命令
2016/10/25 Python
对Python中gensim库word2vec的使用详解
2018/05/08 Python
对Python 语音识别框架详解
2018/12/24 Python
Python中的sys.stdout.write实现打印刷新功能
2020/02/21 Python
python matplotlib工具栏源码探析二之添加、删除内置工具项的案例
2021/02/25 Python
HTML5 Canvas实现放大镜效果示例
2020/03/25 HTML / CSS
美国婴童服装市场上的领先品牌:Carter’s
2018/02/08 全球购物
军用级手机壳,专为冒险而建:Zizo Wireless
2019/08/07 全球购物
医药大学生求职简历的自我评价
2013/10/17 职场文书
《学会待客》教学反思
2014/02/22 职场文书
鸿星尔克广告词
2014/03/21 职场文书
2014年班主任工作总结
2014/11/08 职场文书
二婚主持词
2015/06/30 职场文书
升学宴学生致辞
2015/07/27 职场文书
人民调解协议书
2016/03/21 职场文书
python scipy 稀疏矩阵的使用说明
2021/05/26 Python
使用python生成大量数据写入es数据库并查询操作(2)
2022/09/23 Python