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 相关文章推荐
Javascript学习笔记6 prototype的提出
Jan 11 Javascript
ASP 过滤数组重复数据函数(加强版)
May 31 Javascript
JavaScript截取字符串的2个函数介绍
Aug 27 Javascript
对JavaScript客户端应用编程的一些建议
Jun 24 Javascript
js实现tab切换效果实例
Sep 16 Javascript
Augularjs-起步详解
Jul 08 Javascript
js封装tab标签页实例分享
Dec 19 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
配置node服务器并且链接微信公众号接口配置步骤详解
Jun 21 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
Feb 19 Javascript
json_decode 索引为数字时自动排序问题解决方法
Mar 28 Javascript
js实现3D旋转效果
Aug 18 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
咖啡知识 咖啡养豆要养多久 排气又是什么
2021/03/06 新手入门
用js进行url编码后用php反解以及用php实现js的escape功能函数总结
2010/02/08 PHP
yii2中的rules 自定义验证规则详解
2016/04/19 PHP
30个最佳jQuery Lightbox效果插件分享
2011/04/11 Javascript
如何使用jQuery Draggable和Droppable实现拖拽功能
2013/07/05 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
2016/06/23 Javascript
json定义及jquery操作json的方法
2016/10/03 Javascript
AngularJS实现Input格式化的方法
2016/11/07 Javascript
PHP实现本地图片上传和验证功能
2017/02/27 Javascript
JavaScript实现简单图片轮播效果
2017/08/21 Javascript
css和js实现弹出登录居中界面完整代码
2017/11/26 Javascript
一次记住JavaScript的6个正则表达式方法
2018/02/22 Javascript
Vue监听事件实现计数点击依次增加的方法
2018/09/26 Javascript
js实现简单模态框实例
2018/11/16 Javascript
如何通过setTimeout理解JS运行机制详解
2019/03/23 Javascript
JavaScript实现简单的弹窗效果
2020/05/19 Javascript
python使用os模块的os.walk遍历文件夹示例
2014/01/27 Python
python利用标准库如何获取本地IP示例详解
2017/11/01 Python
Python使用pip安装pySerial串口通讯模块
2018/04/20 Python
python 字符串常用方法汇总详解
2019/09/16 Python
python 哈希表实现简单python字典代码实例
2019/09/27 Python
Python要如何实现列表排序的几种方法
2020/02/21 Python
Django Xadmin多对多字段过滤实例
2020/04/07 Python
关于matplotlib-legend 位置属性 loc 使用说明
2020/05/16 Python
特罗佩亚包官方网站:Tropea
2017/01/03 全球购物
社团文化节邀请函
2014/01/10 职场文书
效能监察建议书
2014/05/19 职场文书
教师考察材料范文
2014/06/03 职场文书
“三支一扶”支教教师思想汇报
2014/09/13 职场文书
2014群众路线学习笔记
2014/11/06 职场文书
2014年乡镇团委工作总结
2014/12/18 职场文书
小班下学期幼儿评语
2014/12/30 职场文书
导师工作推荐信
2015/03/27 职场文书
企业战略合作意向书
2015/05/08 职场文书
民事起诉书范本
2015/05/19 职场文书
SQL Server连接查询的实用教程
2021/04/07 SQL Server