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中的面向对象
Nov 18 Javascript
jquery制作搜狐快站页面效果示例分享
Feb 21 Javascript
开发中可能会用到的jQuery小技巧
Mar 07 Javascript
JavaScript声明变量时为什么要加var关键字
Sep 29 Javascript
jQuery中addClass()方法用法实例
Jan 05 Javascript
ECMAScript6块级作用域及新变量声明(let)
Jun 12 Javascript
jQuery实现点击查看大图并以弹框的形式居中
Aug 08 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
Oct 07 Javascript
关于js函数解释(包括内嵌,对象等)
Nov 20 Javascript
基于JavaScript实现窗口拖动效果
Jan 18 Javascript
JavaScript内存泄漏的处理方式
Nov 20 Javascript
vue 使用外部JS与调用原生API操作示例
Dec 02 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
mysql建立外键
2006/11/25 PHP
PHP检测用户是否关闭浏览器的方法
2016/02/14 PHP
yii2实现根据时间搜索的方法
2016/05/25 PHP
基于jquery完美拖拽,可返回拖动轨迹
2012/03/29 Javascript
微信小程序 Button 组件详解及简单实例
2017/01/10 Javascript
jquery Ajax 全局调用封装实例详解
2017/01/16 Javascript
js 递归和定时器的实例解析
2017/02/03 Javascript
nodejs+express实现文件上传下载管理网站
2017/03/15 NodeJs
Angular.js中控制器之间的传值详解
2017/04/24 Javascript
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
2017/07/17 jQuery
js单页hash路由原理与应用实战详解
2017/08/14 Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
2017/11/22 Javascript
JavaScript闭包原理与用法实例分析
2018/08/10 Javascript
Vue请求JSON Server服务器数据的实现方法
2018/11/02 Javascript
[00:36]DOTA2上海特级锦标赛 Archon战队宣传片
2016/03/04 DOTA
[01:09:40]Newbee vs Pain 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
在Python中使用base64模块处理字符编码的教程
2015/04/28 Python
Python中使用ElementTree解析XML示例
2015/06/02 Python
Python实现控制台进度条功能
2016/01/04 Python
浅谈dataframe中更改列属性的方法
2018/07/10 Python
django中SMTP发送邮件配置详解
2019/07/19 Python
Python实现滑动平均(Moving Average)的例子
2019/08/24 Python
Python 函数list&read&seek详解
2019/08/28 Python
对python中return与yield的区别详解
2020/03/12 Python
pandas分组聚合详解
2020/04/10 Python
解决pycharm导入numpy包的和使用时报错:RuntimeError: The current Numpy installation (‘D:\\python3.6\\lib\\site-packa的问题
2020/12/08 Python
平面设计岗位职责
2013/12/14 职场文书
出纳员的岗位职责
2014/02/22 职场文书
局火灾防控工作方案
2014/05/25 职场文书
企业环保标语
2014/06/10 职场文书
质量提升方案
2014/06/16 职场文书
中秋晚会活动方案
2014/08/31 职场文书
2015年禁毒宣传活动总结
2015/03/25 职场文书
2015年班组长工作总结
2015/04/10 职场文书
springboot使用Redis作缓存使用入门教程
2021/07/25 Redis
Java+swing实现抖音上的表白程序详解
2022/06/25 Java/Android