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 相关文章推荐
让你的网站可编辑的实现js代码
Oct 19 Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
Jun 24 Javascript
Jquery 动态生成表格示例代码
Dec 24 Javascript
JavaScript中循环遍历Array与Map的方法小结
Mar 12 Javascript
javascript拖拽效果延伸学习
Apr 04 Javascript
使用vue构建一个上传图片表单
Jul 04 Javascript
Easyui和zTree两种方式分别实现树形下拉框
Aug 04 Javascript
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
express如何使用session与cookie的方法
Jan 30 Javascript
Node.js EventEmmitter事件监听器用法实例分析
Jan 07 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
Aug 07 Javascript
React中使用UMEditor的方法示例
Dec 27 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
css动画效果之animation的常用样式
2021/03/09 HTML / CSS
js tab效果的实现代码
2009/12/26 Javascript
为超链接加上disabled后的故事
2010/12/10 Javascript
模拟select的代码
2011/10/19 Javascript
各种页面定时跳转(倒计时跳转)代码总结
2013/10/24 Javascript
jquery垂直公告滚动实现代码
2013/12/08 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
2015/04/03 Javascript
用JavaScript实现页面重定向功能的教程
2015/06/04 Javascript
ECMAScript6块级作用域及新变量声明(let)
2015/06/12 Javascript
使用ngView配合AngularJS应用实现动画效果的方法
2015/06/19 Javascript
在JavaScript中call()与apply()区别
2016/01/22 Javascript
分享10个优化代码的CSS和JavaScript工具
2016/05/11 Javascript
利用jquery实现下拉框的禁用与启用
2016/12/07 Javascript
详解vue-cli + webpack 多页面实例配置优化方法
2017/07/13 Javascript
bootstrap可编辑下拉框jquery.editable-select
2017/10/12 jQuery
vue实现添加与删除图书功能
2018/10/07 Javascript
微信小程序select下拉框实现效果
2019/05/15 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
2020/09/08 Javascript
Python获取当前时间的方法
2014/01/14 Python
Python调用微信公众平台接口操作示例
2017/07/08 Python
python flask中静态文件的管理方法
2018/03/20 Python
解决python线程卡死的问题
2019/02/18 Python
python多项式拟合之np.polyfit 和 np.polyld详解
2020/02/18 Python
python初步实现word2vec操作
2020/06/09 Python
python对一个数向上取整的实例方法
2020/06/18 Python
美国最大的城市服装和运动鞋零售商:Jimmy Jazz
2016/11/19 全球购物
Agoda香港:全球特价酒店预订
2017/05/07 全球购物
美津浓美国官网:Mizuno美国
2018/08/07 全球购物
如何查询Oracle数据库中已经创建的索引
2013/10/11 面试题
工程造价管理专业大专生求职信
2013/10/06 职场文书
经典促销广告词大全
2014/03/19 职场文书
职业生涯规划书前言
2014/04/15 职场文书
工作简历自我评价
2015/03/11 职场文书
农业项目投资意向书
2015/05/09 职场文书
2016年五一促销广告语
2016/01/28 职场文书
实现AJAX异步调用和局部刷新的基本步骤
2022/03/17 Javascript