JavaScript基础对象---Map
一、创建Map对象
Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值
1.构造函数
语法:new Map([iterable])
参数:
iterable 可以是一个数组或者其他 iterable 对象,其元素或为键值对,或为两个元素的数组;每个键值对都会添加到新的 Map,null 会被当做 undefined
let arr = [1,2,3];
let myMap = new Map(arr.entries());
console.log(myMap.get(0)); // 1
二、Map实例属性
1.myMap.size 可访问属性返回 Map 对象的元素数量
size 属性的值是一个整数,表示 Map 对象有多少个键值对。size 是只读属性,它对应的 set 方法是 undefined,即不能改变它的值
let myMap = new Map();
myMap.set("a", "alpha");
myMap.set("b", "beta");
myMap.set("g", "gamma");
console.log(myMap.size); // 3
三、Map实例方法
1.set()
语法:myMap.set(key, value)
参数:
key 必填,添加到Map对象的元素的key值
value 必填,添加到Map对象的元素的value值
let myMap = new Map();
myMap.set("bar", "foo");
myMap.set(1, "foobar");
// 在Map对象中更新一个新元素
myMap.set("bar", "baz");
2.get()
语法:myMap.get(key)
参数:
key 想要获取的元素的键
返回值:返回一个Map对象中与指定键相关联的值,如果找不到这个键则返回undefined
let myMap = new Map();
myMap.set("bar", "foo");
console.log(myMap.get("bar")); // "foo"
console.log(myMap.get("baz")); // undefined
3.has()
语法:myMap.has(key)
参数:
key 必填,用来检测是否存在指定元素的键值
返回值:如果指定元素存在于Map中,则返回true。其他情况返回false
let myMap = new Map();
myMap.set("bar", "foo");
console.log(myMap.has("bar")); // returns true
console.log(myMap.has("baz")); // returns false
4.delete() 方法用于移除 Map 对象中指定的元素
语法:myMap.delete(key)
参数:
key 必须,从 Map 对象中移除的元素的键(key)
返回值:如果 Map 对象中存在该元素,则移除它并返回 true;否则如果该元素不存在则返回 false
let myMap = new Map();
myMap.set("bar", "foo");
myMap.delete("bar"); // 返回 true。成功地移除元素
console.log(myMap.size); // 0
5.clear()方法会移除Map对象中的所有元素
语法:myMap.clear()
let myMap = new Map();
myMap.set("bar","baz");
myMap.set(1,"foo");
console.log(myMap.size); // 2
myMap.clear();
6.entries()
语法:myMap.entries()
返回值:返回一个新的包含[key, value]对的Iterator对象,返回的迭代器的迭代顺序与Map对象的插入顺序相同
let myMap = new Map();
myMap.set("0", "foo");
myMap.set(1, "bar");
myMap.set({}, "baz");
let mapIter = myMap.entries();
console.log(mapIter.next().value); // ["0", "foo"]
console.log(mapIter.next().value); // [1, "bar"]
console.log(mapIter.next().value); // [Object, "baz"]
7.keys() 返回一个新的 Iterator 对象。它包含按照顺序插入Map对象中每个元素的key值
语法:myMap.keys()
let myMap = new Map();
myMap.set("0", "foo");
myMap.set(1, "bar");
myMap.set({}, "baz");
let mapIter = myMap.keys();
console.log(mapIter.next().value); // "0"
console.log(mapIter.next().value); // 1
console.log(mapIter.next().value); // Object
8.values() 方法返回一个新的Iterator对象。它包含按顺序插入Map对象中每个元素的value值
语法:myMap.values()
let myMap = new Map();
myMap.set("0", "foo");
myMap.set(1, "bar");
myMap.set({}, "baz");
let mapIter = myMap.values();
console.log(mapIter.next().value); // "foo"
console.log(mapIter.next().value); // "bar"
console.log(mapIter.next().value); // "baz"
9.forEach()
语法:myMap.forEach(callback[, thisArg])
参数:
callback 必要,每个元素所要执行的函数
thisArg 可选,callback 执行时其 this 的值
let myMap = new Map([["foo", 3], ["bar", {}], ["baz", undefined]]);
myMap.forEach((value,key,map) => {
console.log("key =",key,",value =",value); //key = foo ,value = 3
});
原文地址:https://segmentfault.com/a/1190000016724865
JavaScript基础对象---Map的更多相关文章
- 在TypeScript中扩展JavaScript基础对象的功能
最近工作中用到,记录一下:假设我们需要一个功能,把一个数字比如10000输出为下面的字符串格式“10,000”,一般是写一个方法,那么我希望更方便一点,直接向Number类型添加一个格式化方法,比如叫 ...
- JavaScript基础-对象<2>
2.浏览器环境提供对象 (1) document对象 doucument对象属性: title:文本标题.doucument.title="Welcome"; lastModifi ...
- JavaScript基础-对象<1>
1.JavaScript内部对象属性和方法 (1)内置String对象 String 对象是JavaScript的核心对象之一. 创建一个sting对象: var a="this defin ...
- JavaScript基础对象---Number
一.创建Number实例对象 /** * new Number(value); * value 被创建对象的数字值 * * Number 对象主要用于: 如果参数无法被转换为数字,则返回 NaN. 在 ...
- JavaScript基础对象创建模式之单体/单例模式(Singleton)
首先,单例模式是对象的创建模式之一,此外还包括工厂模式.单例模式的三个特点: 1,该类只有一个实例 2,该类自行创建该实例(在该类内部创建自身的实例对象) 3,向整个系统公开这个实例接口 Java中大 ...
- JavaScript基础对象创建模式之链式调用模式(Chaining Pattern)(029)
链式调用模式允许一个接一个地调用对象的方法.这种模式不考虑保存函数的返回值,所以整个调用可以在同一行内完成: myobj.method1("hello").method2().me ...
- JavaScript基础对象创建模式之对象的常量(028)
虽然许多编程语言提供了const关键字来支持常量的声明,但JavaScript里没有表示常量的语义.我们可以用全大写的方式来声明变量,表明它实际上是个常量: Math.PI; // 3.1415926 ...
- JavaScript基础对象创建模式之静态成员(027)
在支持“类”的面向对象语言中,静态成员指的是那些所有实例对象共有的类成员.静态成员实际是是“类”的成员,而非“对象”的成员.所以如果 MathUtils类中有个叫 max()的静态成员方法,那么调用这 ...
- JavaScript基础对象创建模式之模块模式(Module Pattern)(025)
模块模式可以提供软件架构,为不断增长的代码提供组织形式.JavaScript没有提供package的语言表示,但我们可以通过模块模式来分解并组织 代码块,这些黑盒的代码块内的功能可以根据不断变化的软件 ...
随机推荐
- pycharm 添加个人信息
2. 可以使用搜索快速找到"File and Code Templates", 右侧菜单选择"Python Script",对模板进行编辑 格式为: ${< ...
- UOJ #35 后缀排序 哈希做法
题面 http://uoj.ac/problem/35 题解 后缀数组当然可以 这里用哈希做 首先排序的问题在哪里 在于比较两个后缀的复杂度是O(length)的 但是我们可以通过找LCP来优化比较 ...
- java中常用到的math方法(Math.PI、Math.random()、Math.abs(double)、Math.floor(double)、Math.ceil(double)、Math.round(double))
public class MathDemo { public static void main(String args[]){ /** * abs求绝对值 */ System.out.println( ...
- JAVA常用知识总结(三)——JAVA虚拟机
先附一张JAVA虚拟机内存结构图: 其中JAVA虚拟机的线程问题<为什么JAVA虚拟机分为线程共享和非线程共享?>一文中已经有详细介绍,本文从面试中常问的一些JAVA虚拟机问题出发,主要从 ...
- 为RecyclerView打造通用Adapter 让RecyclerView更加好用
原文出处: 张鸿洋 (Granker,@鸿洋_ ) 一.概述 记得好久以前针对ListView类控件写过一篇打造万能的ListView GridView 适配器,如今RecyclerView异军突起, ...
- 关于ES6的Promise的使用深入理解
ES6的promise对象研究 什么叫promise? Promise对象可以理解为一次执行的异步操作,使用promise对象之后可以使用一种链式调用的方式来组织代码:让代码更加的直观. 那我们为什么 ...
- 序列化pickle模块
1.pickle模块 pickle.dumps() 和pickle.loads() import pickle f = open('112.pkl','w') a = {'name':2,2:3,3: ...
- 微信小程序 图片加载失败处理方案
小程序端展示网络资源图片可能会失败,下面介绍一种自己的处理方法 1. js文件中判断图片 url 是否存在,存在则正常显示,不存在则替换url为本地默认图片 2. 当图片 url 存在,但是加载失败时 ...
- 【学习笔记】深入理解js原型和闭包(10)——this
接着上一节讲的话,应该轮到“执行上下文栈”了,但是这里不得不插入一节,把this说一下.因为this很重要,js的面试题如果不出几个与this有关的,那出题者都不合格. 其实,this的取值,分四种情 ...
- Bootstrap基本理论
Bootstrap,来自 Twitter,是目前最受欢迎的前段框架.Bootstrap是基于HTML.CSS.JAVASCRIPT的,它简洁灵活,使得Web开发更加快捷 Bootstrap特点:优雅, ...