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 相关文章推荐
CSS+JS构建的图片查看器
Jul 22 Javascript
JavaScript写的一个DIV 弹出网页对话框
Aug 14 Javascript
event.currentTarget与event.target的区别介绍
Dec 31 Javascript
JavaScript动态改变表格单元格内容的方法
Mar 30 Javascript
在Javascript中处理字符串之big()方法的使用
Jun 08 Javascript
javascript创建cookie、读取cookie
Mar 31 Javascript
基于JavaScript实现的希尔排序算法分析
Apr 14 Javascript
javascript帧动画(实例讲解)
Sep 02 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
Nov 29 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
Jan 03 Javascript
快速解决element的autofocus失效问题
Sep 08 Javascript
vue-quill-editor插入图片路径太长问题解决方法
Jan 08 Vue.js
简单谈谈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目录导航文件代码
2006/10/09 PHP
关于URL最大长度限制的相关资料查证
2014/12/23 PHP
PHP中Cookie的使用详解(简单易懂)
2017/04/28 PHP
PHP实现从PostgreSQL数据库检索数据分页显示及根据条件查找数据示例
2018/06/09 PHP
thinkPHP框架实现的短信接口验证码功能示例
2018/06/20 PHP
为Yahoo! UI Extensions Grid增加内置的可编辑器
2007/03/10 Javascript
EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码
2010/10/26 Javascript
jquery如何改变html标签的样式(两种实现方法)
2013/01/16 Javascript
动态加载js、css等文件跨iframe实现
2014/02/24 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
2015/10/16 Javascript
jquery实现全选、反选、获得所有选中的checkbox
2020/09/13 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
2017/03/30 Javascript
vue-cli中的babel配置文件.babelrc实例详解
2018/02/22 Javascript
JS实现的判断方法、变量是否存在功能示例
2020/03/28 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
2019/11/01 Javascript
详解Vue+elementUI build打包部署后字体图标丢失问题
2020/07/13 Javascript
django框架如何集成celery进行开发
2017/05/24 Python
Python字典操作详细介绍及字典内建方法分享
2018/01/04 Python
详解PyTorch批训练及优化器比较
2018/04/28 Python
解决Python pandas plot输出图形中显示中文乱码问题
2018/12/12 Python
Pyecharts地图显示不完成问题解决方案
2020/05/11 Python
纯CSS3打造属于自己的“小黄人”
2016/03/14 HTML / CSS
HTML5 贪吃蛇游戏实现思路及源代码
2013/09/03 HTML / CSS
一款利用html5和css3动画排列人物头像的实例演示
2014/12/05 HTML / CSS
美国乡村商店:Plow & Hearth
2016/09/12 全球购物
来自全球大都市的高级街头服饰:Pegador
2018/01/03 全球购物
美国运动鞋类和服装零售连锁店:Shoe Palace
2019/08/13 全球购物
时尚休闲吧创业计划书
2014/01/25 职场文书
优秀团支部事迹材料
2014/02/08 职场文书
县政府领导班子四风问题对照检查材料思想汇报
2014/09/26 职场文书
自愿离婚协议书范本
2015/01/26 职场文书
观看《筑梦中国》纪录片心得体会
2016/01/18 职场文书
CSS3实现三角形不断放大效果
2021/04/13 HTML / CSS
Pandas数据类型之category的用法
2021/06/28 Python
使用vue判断当前环境是安卓还是IOS
2022/04/12 Vue.js
JavaScript前端面试组合函数
2022/06/21 Javascript