一、创建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的更多相关文章

  1. 在TypeScript中扩展JavaScript基础对象的功能

    最近工作中用到,记录一下:假设我们需要一个功能,把一个数字比如10000输出为下面的字符串格式“10,000”,一般是写一个方法,那么我希望更方便一点,直接向Number类型添加一个格式化方法,比如叫 ...

  2. JavaScript基础-对象<2>

    2.浏览器环境提供对象 (1) document对象 doucument对象属性: title:文本标题.doucument.title="Welcome"; lastModifi ...

  3. JavaScript基础-对象<1>

    1.JavaScript内部对象属性和方法 (1)内置String对象 String 对象是JavaScript的核心对象之一. 创建一个sting对象: var a="this defin ...

  4. JavaScript基础对象---Number

    一.创建Number实例对象 /** * new Number(value); * value 被创建对象的数字值 * * Number 对象主要用于: 如果参数无法被转换为数字,则返回 NaN. 在 ...

  5. JavaScript基础对象创建模式之单体/单例模式(Singleton)

    首先,单例模式是对象的创建模式之一,此外还包括工厂模式.单例模式的三个特点: 1,该类只有一个实例 2,该类自行创建该实例(在该类内部创建自身的实例对象) 3,向整个系统公开这个实例接口 Java中大 ...

  6. JavaScript基础对象创建模式之链式调用模式(Chaining Pattern)(029)

    链式调用模式允许一个接一个地调用对象的方法.这种模式不考虑保存函数的返回值,所以整个调用可以在同一行内完成: myobj.method1("hello").method2().me ...

  7. JavaScript基础对象创建模式之对象的常量(028)

    虽然许多编程语言提供了const关键字来支持常量的声明,但JavaScript里没有表示常量的语义.我们可以用全大写的方式来声明变量,表明它实际上是个常量: Math.PI; // 3.1415926 ...

  8. JavaScript基础对象创建模式之静态成员(027)

    在支持“类”的面向对象语言中,静态成员指的是那些所有实例对象共有的类成员.静态成员实际是是“类”的成员,而非“对象”的成员.所以如果 MathUtils类中有个叫 max()的静态成员方法,那么调用这 ...

  9. JavaScript基础对象创建模式之模块模式(Module Pattern)(025)

    模块模式可以提供软件架构,为不断增长的代码提供组织形式.JavaScript没有提供package的语言表示,但我们可以通过模块模式来分解并组织 代码块,这些黑盒的代码块内的功能可以根据不断变化的软件 ...

随机推荐

  1. pycharm 添加个人信息

    2. 可以使用搜索快速找到"File and Code Templates", 右侧菜单选择"Python Script",对模板进行编辑 格式为: ${< ...

  2. UOJ #35 后缀排序 哈希做法

    题面 http://uoj.ac/problem/35 题解 后缀数组当然可以 这里用哈希做 首先排序的问题在哪里 在于比较两个后缀的复杂度是O(length)的 但是我们可以通过找LCP来优化比较 ...

  3. 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( ...

  4. JAVA常用知识总结(三)——JAVA虚拟机

    先附一张JAVA虚拟机内存结构图: 其中JAVA虚拟机的线程问题<为什么JAVA虚拟机分为线程共享和非线程共享?>一文中已经有详细介绍,本文从面试中常问的一些JAVA虚拟机问题出发,主要从 ...

  5. 为RecyclerView打造通用Adapter 让RecyclerView更加好用

    原文出处: 张鸿洋 (Granker,@鸿洋_ ) 一.概述 记得好久以前针对ListView类控件写过一篇打造万能的ListView GridView 适配器,如今RecyclerView异军突起, ...

  6. 关于ES6的Promise的使用深入理解

    ES6的promise对象研究 什么叫promise? Promise对象可以理解为一次执行的异步操作,使用promise对象之后可以使用一种链式调用的方式来组织代码:让代码更加的直观. 那我们为什么 ...

  7. 序列化pickle模块

    1.pickle模块 pickle.dumps() 和pickle.loads() import pickle f = open('112.pkl','w') a = {'name':2,2:3,3: ...

  8. 微信小程序 图片加载失败处理方案

    小程序端展示网络资源图片可能会失败,下面介绍一种自己的处理方法 1. js文件中判断图片 url 是否存在,存在则正常显示,不存在则替换url为本地默认图片 2. 当图片 url 存在,但是加载失败时 ...

  9. 【学习笔记】深入理解js原型和闭包(10)——this

    接着上一节讲的话,应该轮到“执行上下文栈”了,但是这里不得不插入一节,把this说一下.因为this很重要,js的面试题如果不出几个与this有关的,那出题者都不合格. 其实,this的取值,分四种情 ...

  10. Bootstrap基本理论

    Bootstrap,来自 Twitter,是目前最受欢迎的前段框架.Bootstrap是基于HTML.CSS.JAVASCRIPT的,它简洁灵活,使得Web开发更加快捷 Bootstrap特点:优雅, ...