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 相关文章推荐
关于图片验证码设计的思考
Jan 29 Javascript
jQuery取id有.的值的方法
May 21 Javascript
jQuery Ajax()方法使用指南
Nov 19 Javascript
浅谈jQuery构造函数分析
May 11 Javascript
基于jQuery实现美观且实用的倒计时实例代码
Dec 30 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
May 10 Javascript
浅谈Node异步编程的机制
Oct 18 Javascript
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
利用Javascript开发一个二维周视图日历
Dec 14 Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
Nov 01 Javascript
javaScript把其它类型转换为Number类型
Oct 13 Javascript
微信小程序实现底部弹出模态框
Nov 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
php连接mysql数据库代码
2009/03/10 PHP
利用Memcached在php下实现session机制 替换PHP的原生session支持
2010/08/21 PHP
用来解析.htgroup文件的PHP类
2012/09/05 PHP
php-cli简介(不会Shell语言一样用Shell)
2013/06/03 PHP
解析php中session的实现原理以及大网站应用应注意的问题
2013/06/17 PHP
php实现基于openssl的加密解密方法
2016/09/30 PHP
PHP迭代与递归实现无限级分类
2017/08/28 PHP
Yii框架核心组件类实例详解
2019/08/06 PHP
Laravel 集成微信用户登录和绑定的实现
2019/12/27 PHP
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
2013/07/10 Javascript
jquery删除提示框弹出是否删除对话框
2014/01/07 Javascript
css与javascript跨浏览器兼容性总结
2014/09/15 Javascript
js获取UserControl内容为拼html时提供方便
2014/11/02 Javascript
jquery 设置style:display的方法
2015/01/29 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
2015/04/12 Javascript
Angular 4 指令快速入门教程
2017/06/07 Javascript
你应该知道的几类npm依赖包管理详解
2017/10/06 Javascript
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
2017/12/25 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
2018/02/05 Javascript
在 Angular中 使用 Lodash 的方法
2018/02/11 Javascript
用Axios Element实现全局的请求loading的方法
2018/03/15 Javascript
layui实现数据表格点击搜索功能
2020/03/26 Javascript
解决vant中 tab栏遇到的坑 van-tabs
2020/11/04 Javascript
Python使用bs4获取58同城城市分类的方法
2015/07/08 Python
TensorFlow如何实现反向传播
2018/02/06 Python
Python中%是什么意思?python中百分号如何使用?
2018/03/20 Python
python多进程提取处理大量文本的关键词方法
2018/06/05 Python
CSS3,线性渐变(linear-gradient)的使用总结
2017/01/09 HTML / CSS
超30万乐谱下载:Musicnotes.com
2016/09/24 全球购物
宝信软件JAVA工程师面试经历
2012/08/19 面试题
经典c++面试题六
2012/01/18 面试题
投标邀请书范文
2014/01/31 职场文书
机械专业毕业生自我鉴定2014
2014/10/04 职场文书
2015大学自主招生自荐信范文
2015/03/04 职场文书
如何利用JavaScript实现二叉搜索树
2021/04/02 Javascript
SQL SERVER中常用日期函数的具体使用
2021/04/08 SQL Server