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 new Date().valueOf()的作用与时间戳由来详解
Apr 24 Javascript
javascript处理表单示例(javascript提交表单)
Apr 28 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
May 04 Javascript
JS实现的随机排序功能算法示例
Jun 09 Javascript
node使用UEditor富文本编辑器的方法实例
Jul 11 Javascript
深入理解Vuex 模块化(module)
Sep 26 Javascript
详解Vue中组件传值的多重实现方式
Aug 16 Javascript
Angular8路由守卫原理和使用方法
Aug 29 Javascript
jQuery 选择方法及$(this)用法实例分析
May 19 jQuery
解决vant中 tab栏遇到的坑 van-tabs
Nov 04 Javascript
js加减乘除精确运算方法实例代码
Jan 17 Javascript
javascript函数式编程基础
Sep 15 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 Warning: PHP Startup: Unable to load dynamic library \ D:/php5/ext/php_mysqli.dll\
2012/06/17 PHP
php安装ssh2扩展的方法【Linux平台】
2016/07/20 PHP
PHP程序员简单的开展服务治理架构操作详解(二)
2020/05/14 PHP
DOM下的节点属性和操作小结
2009/05/14 Javascript
jQuery 淡出一个图像到另一个图像的实现代码
2013/06/12 Javascript
jQuery操作Select的Option上下移动及移除添加等等
2013/11/18 Javascript
javascript正则匹配汉字、数字、字母、下划线
2014/04/10 Javascript
javascript中clone对象详解
2014/12/03 Javascript
深入理解JavaScript系列(19):求值策略(Evaluation strategy)详解
2015/03/05 Javascript
jQuery解析XML与传统JavaScript方法的差别实例分析
2015/03/05 Javascript
vue-cli开发环境实现跨域请求的方法
2018/04/07 Javascript
微信小程序下拉框功能的实例代码
2018/11/06 Javascript
Angular 实现输入框中显示文章标签的实例代码
2018/11/07 Javascript
JavaScript禁用右键单击优缺点分析
2019/01/20 Javascript
Python简单进程锁代码实例
2015/04/27 Python
Python脚本处理空格的方法
2016/08/08 Python
Python实现简单的四则运算计算器
2016/11/02 Python
浅谈配置OpenCV3 + Python3的简易方法(macOS)
2018/04/02 Python
pandas 取出表中一列数据所有的值并转换为array类型的方法
2018/04/11 Python
Python中if elif else及缩进的使用简述
2018/05/31 Python
python 实时得到cpu和内存的使用情况方法
2018/06/11 Python
python3应用windows api对后台程序窗口及桌面截图并保存的方法
2019/08/27 Python
python同时遍历两个list用法说明
2020/05/02 Python
Python获取指定网段正在使用的IP
2020/12/14 Python
is_file和file_exists效率比较
2021/03/14 PHP
巴西体育用品商店:Lojão dos Esportes
2018/07/21 全球购物
Charlotte Tilbury澳大利亚官网:英国美妆品牌
2018/10/05 全球购物
北京SQL新华信咨询
2016/09/30 面试题
毕业生实习鉴定
2013/12/11 职场文书
民族团结演讲稿范文
2014/08/27 职场文书
软件研发工程师岗位职责
2014/09/30 职场文书
县级领导干部开展党的群众路线教育实践活动工作汇报
2014/10/25 职场文书
爱心助学感谢信
2015/01/21 职场文书
2016年“七一建党节”广播稿
2015/12/18 职场文书
CSS实现漂亮的时钟动画效果的实例代码
2021/03/30 HTML / CSS
Python&Matlab实现樱花的绘制
2022/04/07 Python