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 关于# 和 void的区别分析
Oct 26 Javascript
jquery lazyload延迟加载技术的实现原理分析
Jan 24 Javascript
js中将具有数字属性名的对象转换为数组
Mar 06 Javascript
深入理解JavaScript是如何实现继承的
Dec 12 Javascript
javaScript基础语法介绍
Feb 28 Javascript
JavaScript探测CSS动画是否已经完成的方法
Aug 30 Javascript
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 jQuery
简述vue中的config配置
Jan 23 Javascript
AngularJS 事件发布机制
Aug 28 Javascript
Javascript查看大图功能代码实现
May 07 Javascript
JS数组索引检测中的数据类型问题详解
Jan 11 Javascript
JS数组去重详情
Nov 07 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
附件名前加网站名
2008/03/23 PHP
php 过滤危险html代码
2009/06/29 PHP
php三维数组去重(示例代码)
2013/11/26 PHP
thinkPHP5.0框架环境变量配置方法
2017/03/17 PHP
tp5.1 实现setInc字段自动加1
2019/10/18 PHP
PHP查找一列有序数组是否包含某值的方法
2020/02/07 PHP
可自定义速度的js图片无缝滚动示例分享
2014/01/20 Javascript
JS下载文件|无刷新下载文件示例代码
2014/04/17 Javascript
node.js中的fs.linkSync方法使用说明
2014/12/15 Javascript
JavaScript简单修改窗口大小的方法
2015/08/03 Javascript
Bootstrap CSS布局之表单
2016/12/17 Javascript
JavaScript callback回调函数用法实例分析
2018/05/08 Javascript
详解express使用vue-router的history踩坑
2019/06/05 Javascript
JavaScript设计模型Iterator实例解析
2020/01/22 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
2020/08/31 Javascript
利用JavaScript为句子加标题的3种方法示例
2021/01/05 Javascript
Python赋值语句后逗号的作用分析
2015/06/08 Python
python爬虫之xpath的基本使用详解
2018/04/18 Python
Python读写/追加excel文件Demo分享
2018/05/03 Python
python3实现名片管理系统
2020/11/29 Python
基于树莓派的语音对话机器人
2019/06/17 Python
解决Python安装时报缺少DLL问题【两种解决方法】
2019/07/15 Python
Python Tensor FLow简单使用方法实例详解
2020/01/14 Python
在pytorch中实现只让指定变量向后传播梯度
2020/02/29 Python
Python中使用threading.Event协调线程的运行详解
2020/05/02 Python
Python pip使用超时问题解决方案
2020/08/03 Python
python爬虫筛选工作实例讲解
2020/11/23 Python
python爬虫中抓取指数的实例讲解
2020/12/01 Python
纯CSS3单页切换导航菜单界面设计的简单实现
2016/08/16 HTML / CSS
东南亚排名第一的服务市场:kaodim
2019/03/28 全球购物
英国奢侈品牌时尚购物平台:Farfetch(支持中文)
2020/02/18 全球购物
贝佳斯官方网站:Borghese
2020/05/08 全球购物
会计电算化学生个人的自我评价
2014/02/08 职场文书
珍惜资源的建议书
2014/08/26 职场文书
毕业生就业推荐表导师评语
2014/12/31 职场文书
Python基础之Socket通信原理
2021/04/22 Python