Map以及常用api实例详解

ecmascript 6中的map类型是一种存储着许多键值对的有序列表。键值对支持所有的数据类型. 键 0 和 ‘0’会被当做两个不同的键,不会发生强制类型转换.本文主要为大家带来一篇es6系列教程_ map详解以及常用api介绍。

如何使用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' ) ); //ghostwuconsole.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 ) ); //ghostwuconsole.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' ) );//trueconsole.log( map.size ); //2map.delete( 'name' );console.log( map.has( 'name' ) );//falseconsole.log( map.size ); //1console.log( map.has( 'age' ) ); //truemap.clear();console.log( map.size ); //0console.log( map.has( 'age' ) ); //false

登录后复制

Map支持数组初始化,用一个二维数组,每个数组用键值对的方式

let map = new Map( [ [ 'name', 'ghostwu' ], [ 'age', 22 ] ] );console.log( map.has( 'name') ); //trueconsole.log( map.has( 'age') ); //trueconsole.log( map.size ); //2map.set( 'sex', 'man' );console.log( map.size );console.log( map.get( 'name' ) ); //ghostwumap.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 );

登录后复制

Map以及常用api实例详解

相关推荐:

javascript 常用api

详细介绍JavaScript操作DOM常用API总结

详解html5 canvas常用api总结(二)–绘图API

以上就是Map以及常用api实例详解的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2787852.html

(0)
上一篇 2025年3月8日 18:17:38
下一篇 2025年2月25日 04:06:57

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • JS中的BOM应用详解

    本文我们住要和大家分享js中的bom应用详解,我们曾经讲过js由三部分组成,其中一个部分就是bom,用于对浏览器进行操作。这节课我们主要就来介绍bom。 BOM基础 我们先来看一个BOM的最基础功能:打开、关闭窗口: 无标题文档 登录后复制…

    2025年3月8日
    200
  • React16.2的fiber架构详解

    本文主要和大家分享react16.2的fiber架构详解,希望能帮助到大家。insertupdateintofiber 会根据fiber的状态创建一个或两个列队对象,对象是长成这样的对象是长成这样的 //by 司徒正美, 加群:370262…

    2025年3月8日 编程技术
    200
  • js面向对象之继承知识详解

    说到这个继承,了解object-oriented的朋友都知道,大多oo语言都有两种,一种是接口继承(只继承方法签名);一种是实现继承(继承实际的方法)本文主要和大家介绍js面向对象之继承的相关知识,以及分享了读者弄明白这个知识点的学习心得,…

    2025年3月8日
    200
  • JS删除数组里的某个元素实例代码

    本文主要为大家分享一篇js删除数组里的某个元素方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧,希望能帮助到大家。 删除数组指定的某个元素 首先可以给JS的数组对象定义一个函数,用于查找指定的元素在数组中的位置,即索引,…

    编程技术 2025年3月8日
    200
  • js中promise实例解析

    大家都知道nodejs很快,为什么会这么快呢,原因就是node采用异步回调的方式来处理需要等待的事件,使得代码会继续往下执行不用在某个地方等待着。但是也有一个不好的地方,当我们有很多回调的时候,比如这个回调执行完需要去执行下个回调,然后接着…

    2025年3月8日
    200
  • vue构建多页面应用实例代码分享

    最近一直在研究使用vue做出来一些东西,但都是spa的单页面应用,但实际工作中,单页面并不一定符合业务需求,所以这篇我就来说说怎么开发多页面的vue应用,以及在这个过程会遇到的问题。本文主要和大家介绍用vue构建多页面应用的示例代码,小编觉…

    2025年3月8日
    200
  • vue之v-if和v-show的区别详解

    本文主要和大家介绍vue学习笔记之v-if和v-show的区别,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。 v-if vs v-show v-if 是“真正的”条件渲染,因为它会确保在切换…

    2025年3月8日
    200
  • vue基于Element构建自定义树实例方法

    做项目的时候要使用到一个自定义的树形控件来构建表格树,在github上搜了一下没有搜索到合适的(好看的)可以直接用的,查看element的组件说明时发现它的tree控件可以使用render来自定义节点样式,于是基于它封装了一个可以增、删、改…

    2025年3月8日
    200
  • jQuery UI日期选择器实例详解

    默认功能 日期选择器(Datepicker)绑定到一个标准的表单 input 字段上。把焦点移到 input 上(点击或者使用 tab 键),在一个小的覆盖层上打开一个交互日历。选择一个日期,点击页面上的任意地方(输入框即失去焦点),或者点…

    编程技术 2025年3月8日
    200
  • js的变量提升和函数提升详解

    本文为大家带来一篇基于js的变量提升和函数提升(详解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。 一、变量提升 在ES6之前,JavaScript没有块级作用域(一对花括号{}即为一个…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论