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 !!的作用
Dec 04 Javascript
js浮点数精确计算(加、减、乘、除)
Dec 26 Javascript
详解Javacript和AngularJS中的Promises
Feb 09 Javascript
给easyui的datebox控件添加清空按钮的实现方法
Nov 09 Javascript
js实现文字跑马灯效果
Feb 23 Javascript
详解vue模拟加载更多功能(数据追加)
Jun 23 Javascript
基于node下的http小爬虫的示例代码
Jan 11 Javascript
JavaScript两种计时器的实例讲解
Jan 31 Javascript
SSM+layUI 根据登录信息显示不同的页面方法
Sep 20 Javascript
JS实现轮播图效果
Jan 11 Javascript
原生javascript如何实现共享onload事件
Jul 03 Javascript
Vuex实现简单购物车
Jan 10 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遍历文件目录与清除目录中文件的实现详解
2013/06/24 PHP
让你的PHP7更快之Hugepage用法分析
2016/05/31 PHP
Yii针对添加行的增删改查操作示例
2016/10/18 PHP
基于jquery的防止大图片撑破页面的实现代码(立即缩放)
2011/10/24 Javascript
JS版元素周期表实现方法
2015/08/05 Javascript
js判断手机号运营商的方法
2015/10/23 Javascript
每天一篇javascript学习小结(Boolean对象)
2015/11/12 Javascript
实例解析jQuery中proxy()函数的用法
2016/05/24 Javascript
JavaScript地理位置信息API
2016/06/11 Javascript
Node.js使用Koa搭建 基础项目
2018/01/08 Javascript
小程序:授权、登录、session_key、unionId的详解
2019/05/15 Javascript
详解Nuxt.js中使用Element-UI填坑
2019/09/06 Javascript
vue实现简单跑马灯效果
2020/05/25 Javascript
详谈vue中router-link和传统a链接的区别
2020/07/22 Javascript
JavaScript实现与web通信的方法详解
2020/08/07 Javascript
Vue双向数据绑定(MVVM)的原理
2020/10/03 Javascript
python网络编程实例简析
2014/09/26 Python
Python中pip安装非PyPI官网第三方库的方法
2015/06/02 Python
Python脚本暴力破解栅栏密码
2015/10/19 Python
python操作MySQL 模拟简单银行转账操作
2017/09/27 Python
利用python如何处理nc数据详解
2018/05/23 Python
mac下给python3安装requests库和scrapy库的实例
2018/06/13 Python
pandas DataFrame 删除重复的行的实现方法
2019/01/29 Python
如何用Python提取10000份log中的产品信息
2021/01/14 Python
巴西婴儿用品商店:Bebe Store
2017/11/23 全球购物
护理学中专毕业生求职信
2013/11/11 职场文书
协议书与合同的区别
2014/04/18 职场文书
网站创业计划书
2014/04/30 职场文书
个人党性分析材料
2014/12/19 职场文书
道歉信怎么写
2015/05/12 职场文书
听证会主持词
2015/07/03 职场文书
2015年圣诞节寄语
2015/08/17 职场文书
如何制定一份可行的计划!
2019/06/21 职场文书
Mysql数据库索引面试题(程序员基础技能)
2021/05/31 MySQL
Java 实现限流器处理Rest接口请求详解流程
2021/11/02 Java/Android
JavaScript实例 ODO List分析
2022/01/22 Javascript