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 相关文章推荐
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
Jun 02 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
Nov 17 Javascript
JavaScript事件类型中焦点、鼠标和滚轮事件详解
Jan 25 Javascript
js将滚动条滚动到指定位置的简单实现方法
Jun 25 Javascript
前端设计师们最常用的JS代码汇总
Sep 25 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
Jan 12 Javascript
Jquery-data的三种用法
Apr 18 jQuery
基于Bootstrap实现城市三级联动
Nov 23 Javascript
Vue2 轮播图slide组件实例代码
May 31 Javascript
vue实现密码显示与隐藏按钮的自定义组件功能
Apr 23 Javascript
Element Cascader 级联选择器的使用示例
Jul 27 Javascript
vue实现几秒后跳转新页面代码
Sep 09 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 批量替换html标签的实例代码
2013/11/26 PHP
php使用mkdir创建多级目录入门例子
2014/05/10 PHP
CI(CodeIgniter)模型用法实例分析
2016/01/20 PHP
Laravel 错误提示本地化的实现
2019/10/22 PHP
MooTools 页面滚动浮动层智能定位实现代码
2011/08/23 Javascript
javascript里绝对用的上的字符分割函数总结
2014/07/31 Javascript
jQuery中:disabled选择器用法实例
2015/01/04 Javascript
jquery带下拉菜单和焦点图代码分享
2015/08/24 Javascript
jQuery双向列表选择器select版
2016/11/01 Javascript
解决给dom元素绑定click等事件无效问题的方法
2017/02/17 Javascript
基于JavaScript实现瀑布流效果
2017/03/29 Javascript
jquery网页加载进度条的实现
2017/06/01 jQuery
Vue.js组件间的循环引用方法示例
2017/12/27 Javascript
angularjs通过过滤器返回超链接的方法
2018/10/26 Javascript
非常漂亮的js烟花效果
2020/03/10 Javascript
python实现类的静态变量用法实例
2015/05/08 Python
Python实现聊天机器人的示例代码
2018/07/09 Python
详解Django中间件执行顺序
2018/07/16 Python
python实现二维插值的三维显示
2018/12/17 Python
解决python2 绘图title,xlabel,ylabel出现中文乱码的问题
2019/01/29 Python
python字符串替换re.sub()方法解析
2019/09/18 Python
使用Fabric自动化部署Django项目的实现
2019/09/27 Python
python 两个一样的字符串用==结果为false问题的解决
2020/03/12 Python
python针对Oracle常见查询操作实例分析
2020/04/30 Python
Django model class Meta原理解析
2020/11/14 Python
人事专员岗位职责
2013/11/20 职场文书
师范教师毕业鉴定
2014/01/13 职场文书
洗发水广告词
2014/03/13 职场文书
党的作风建设心得体会
2014/10/22 职场文书
2015年度村委会工作总结
2015/04/29 职场文书
矛盾论读书笔记
2015/06/29 职场文书
读《方与圆》有感:交友方圆有度
2020/01/14 职场文书
Redis 配置文件重要属性的具体使用
2021/05/20 Redis
Mysql数据库命令大全
2021/05/26 MySQL
Python 中random 库的详细使用
2021/06/03 Python
springboot中rabbitmq实现消息可靠性机制详解
2021/09/25 Java/Android