很多东西就是要细细的品读然后做点读书笔记,心理才会踏实…

Javascript对象本质上就是键值对的集合(Hash结构),但是键只能是字符串,这有一定的限制。

  1. 1
    2
    3
    4
  1. var d = {}
    var ele = document.body
    d[ele] = 'This is body'
    console.log(d['[object HTMLBodyElement]'])

上段代码的原意是将DOM节点作为对象d的键,由于对象只接受字符串,所以ele被自动转为[object HTMLBodyElement]

为了解决这种限制,ES6提供了Map数据结构,类似于对象,但是键的范围不限制于字符串,各类数据类型(包括对象)都可以作为键。

Map基本用法

请看代码

  1. 1
    2
    3
    4
    5
    6
    7
    8
    9
  1. var m = new Map()
    m.set('hello', 'Hello guys').set(true, 'right').set({a: 1}, {a: 1})
  2.  
  3. m.size
  4.  
  5. m.get('hello')
    m.has(true)
    m.delete(true)
    m.has(true)

演示过程如下

Map构造函数可以接收数组作为参数,该数组的成员是一个个表示键值对的数组,如

  1. 1
    2
    3
    4
  1. var arr = [ ['name', 'liujiangbei'], ['title', '屌丝男'] ]
  2.  
  3. var map = new Map(arr)
    console.log(map) // Map { 'name' => 'liujiangbei', 'title' => '屌丝男' }

该过程就好比

  1. 1
    2
    3
  1. var map = new Map()
    var arr = [ ['name', 'liujiangbei'], ['title', '屌丝男'] ]
    arr.forEach(([key, value]) => map.set(key, value))

另外需要特别注意,只有对同一个对象的引用,Map结构才将其视为同一个key。一定是内存地址是一样的两个值。

对同一个key进行set,后面的值会覆盖前边的值。

  1. 1
    2
    3
    4
    5
  1. var m = new Map()
    m.set('123', '123')
    m.set('123', '3456')
    m.get('123')
    // 返回 3456

Map的键实际上跟内存地址绑定,只要内存不一样,就视为两个key,这就解决了同名属性碰撞的问题,

如果Map的键是简单类型(数字、字符串、布尔),则只要两个值严格相等,Map就将其视为同一个Key,虽然NaN === NaN为FALSE,但Map将其视为同一Key

  1. 1
    2
    3
    4
    5
    6
  1. let map = new Map()
    map.set(NaN, 123)
    map.get(NaN) // 123
  2.  
  3. map.set(-0, 'Zero')
    map.get(+0) // Zero

这个地方也要特别注意…

Map实例属性和方法

属性和方法

  1. size属性
  2. set(k, v)
  3. get(k)
  4. has(k)
  5. delete(k)
  6. clear()

遍历方法

  1. keys()
  2. values()
  3. entries()
  4. forEach()
  1. 1
  1. for (let [k, v] of map.entries) { console.log(k, v) }

等同于

  1. 1
  1. for (let [k, v] of map) { console.log(k, v) }

因为表示Map结构的默认遍历器结构(Symbol.iterator)就是entries方法

  1. 1
    2
  1. var map = new Map()
    console.log(map[Symbol.iterator] === map.entries)

forEach()方法

  1. 1
    2
    3
    4
    5
  1. var obj = {}
    map.forEach(function (key, value, map) {
    // do somethings
    // this 指向 obj 对象
    }, obj)

Map和Array等数据结构的化学反应

Map和Array

前边讲到Map的构造函数接收数组,所以Map和Array之间的转化比较方便,但是也有一些约束。

大专栏  ES6中Map数据结构学习笔记ap">Array转Map

  1. 1
    2
    3
  1. var arr = [[1, 'ext', '1'], ['2', 2], [3, '3', 'ext']]
    var map = new Map(arr)
    console.log(map)

可以看出数组转为Map需要满足,数组的元素为数组或者object。

Map转Array

利用扩展运算符...很容易实现

  1. 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
  1. var arr = [
    ['1', '111'],
    [2, [122, 122]],
    ['name', 'liujiangbei']
    ]
    var map = new Map(arr)
  2.  
  3. var keys = [...map.keys()]
    var values = [...map.values()]
    var entries = [...map.entries()]
    entries === [...map] // false


利用Array的map和filter方法实现Map的map和filter特性

Map本身并没有map和filter方法,由于数组和Map转换很方便所以利用数组的map的filter特性从而实现达到map和filter的特性。

  1. 1
    2
    3
    4
    5
  1. var arr = [[1, '1'], [2, '222'], [3, '333']]
    var map = new Map(arr)
  2.  
  3. new Map([...map].filter(([k, v]) => k >= 1))
    new Map([...map].map( ([k, v]) => [k * 2, `Map_${v}`] ))


Map和Object

Map转为Object

如果Map的键全为字符串、数字、bool,则其可以转为对象,键非字符串的会通过.toString()方法转化。

  1. 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
  1. function mapToObj (map) {
    var obj = Object.create(null)
    for (let [k, v] of map) {
    obj[k] = v
    }
    return obj
    }
  2.  
  3. var map = new Map( [[1, '1'], [true, true], ['111', '111'], [{1: 1}, 111] ])
    var obj = mapToObj(map)
    console.log(obj)
    console.log(typeof obj.true, obj.true)

Object转为Map

  1. 1
    2
    3
    4
    5
    6
    7
    8
    9
  1. function objToMap (obj) {
    let map = new Map()
    for (let k of Object.keys(obj)) {
    map.set(k, obj[k])
    }
    return map
    }
  2.  
  3. objToMap({yes: true, no: false, 1: 11})

Map和JSON

Map转为JSON

Map的键都是字符串,这是直接转为对象JSON

  1. 1
  1. JSON.stringify(mapToObj(obj))

Map的键有非字符串,这是可选择转为数组JSON

  1. 1
  1. JSON.stringify([...map])

JSON转Map

JSON都是字符串的方式,所以先通过JSON.parse(jsonStr)转为对象,然后通过上边的objToMap即可实现转化

有一种特殊情况,整个JSON就是一个数组,诶个数组成员又都是有两个成员的数组,他可以一一对应转为Map

  1. 1
  1. new Map(JSON.parse(jsonStr))

结束语

网络上这么多同类型的文章为何我还要多此一举?
看到的永远是别人的,写下来才是自己的,知易行难,日拱一卒,坚持比什么都重要!这句话送给大家也送给我自己…

ES6中Map数据结构学习笔记的更多相关文章

  1. ES6中map数据结构学习

    在项目中遇到一个很恶心的需求,然后发现ES6中的map可以解决,所以简单学习了一下map. Javascript的Object本身就是键值对的数据结构,但实际上属性和值构成的是“字符串-值”对,属性只 ...

  2. JavaSE中Map框架学习笔记

    前言:最近几天都在生病,退烧之后身体虚弱.头疼.在床上躺了几天,什么事情都干不了.接下来这段时间,要好好加快进度才好. 前面用了三篇文章的篇幅学习了Collection框架的相关内容,而Map框架相对 ...

  3. ES6-Set和Map数据结构学习笔记

    Set和Map数据结构 Set 基本用法 ES6提供了新的数据结构--Set,类似于数组,但是成员的值是唯一的,没有重复的值,Set本身是一种构造函数,用来生成Set数据结构 var s = new ...

  4. ES6中map数据结构

    key值可以任意值或对象,value值可以是任意值或对象 let json={ name:'eternity', skill:'java' }; let map=new Map(); map.set( ...

  5. ES6中map和set用法

    ES6中map和set用法 --转载自廖雪峰的官方网站 一.map Map是一组键值对的结构,具有极快的查找速度. 举个例子,假设要根据同学的名字查找对应的成绩,如果用Array实现,需要两个Arra ...

  6. C++中的ravalue学习笔记

    一.学习笔记 1. A a = 42; 会先以42为参数构造一个A类对象,然后调用拷贝构造函数来构造a,目前编译器优化掉了拷贝构造函数的调用,测试拷贝构造函数是没有被调用的,但是其权限不能为priva ...

  7. 我的Android进阶之旅------>Android中编解码学习笔记

    编解码学习笔记(一):基本概念 媒体业务是网络的主要业务之间.尤其移动互联网业务的兴起,在运营商和应用开发商中,媒体业务份量极重,其中媒体的编解码服务涉及需求分析.应用开发.释放license收费等等 ...

  8. ES6基础教程一 学习笔记

    一.变量的声明 1.var 声明全局变量 在ES6中var用来声明全局变量. 2.let 声明局部变量 3.const 声明常量 二.变量的解构赋值 //1.数组赋值 let [a,b,c]=[1,2 ...

  9. ES6中Map与其他数据结构的互相转换

    最近在学习ES6的基础知识,整理了一下Map与其他数据结构相互转换的写法. Map转为数组的方法 let myMap = new Map([[true, 7], [{foo: 3}, ['abc']] ...

随机推荐

  1. Django框架的安装与使用

    Django框架的安装与使用 在使用Django框架开发web应用程序时,开发阶段同样依赖wsgiref模块来实现Server的功能,我们使用Django框架是为了快速地开发application, ...

  2. httpsqs 源码修改(内部自动复制多队列)

    /* HTTP Simple Queue Service - httpsqs v1.7 Author: Zhang Yan (http://blog.s135.com), E-mail: net@s1 ...

  3. Less(7)

    1.先判断注入类型 (1)首先看到要求,要求传一个ID参数,并且要求是数字型的:?id=1 (2)再输入:?id=1 and 1=1 (3)输入:?id=1 and 1=2 因为(2)(3)没有变化, ...

  4. InsertionSort(插入排序)原理及C++代码实现

    插入排序是最常用的排序之一. 在输入规模较小的时候,插入排序的性能较好. 最好情况下插入排序的时间复杂度是O(n),平均情况则为O(n2). 插入排序是稳定的排序算法之一. 基本思路为从第二个元素开始 ...

  5. TPO3-1Architecture

    Much of the world's great architecture has been constructed of stone because of its beauty, permanen ...

  6. Canal —— 基本概念及使用

    参考文档 开源数据同步神器--canal [若泽大数据]大数据之实时数据源同步中间件--生产上Canal与Maxwell颠峰对决

  7. windows10使用npm安装vue、vue-cli

    从网上下载了一个免费的vue.js前端模板,准备和Django整合出一个项目出来,然后发现前端代码都是.vue文件,已经整合过.html,很容易,感觉这个.vue的前端稍微复杂一些 本文主要参考博客及 ...

  8. centos mysql无法删除数据库

    系统版本是CentOS Linux release 7.4.1708 (Core) 数据库版本mysql  Ver 14.14 Distrib 5.6.39 在执行drop database ga-s ...

  9. Nginx_安全1

    Nginx 安全 nginx隐藏版本号 # 在Nginx的配置文件中进行修改,增加下面这个. server_tokens on; nginx对IP和目录限速 # Nginx可以通过HTTPLimitZ ...

  10. Unable to cast object of type 'System.Int32' to type 'System.String'.

    最近在研究.netcore,尝试把前后端完全分离.但是在写接口的时候,Post参数是FromBody的时候报错了 Microsoft.AspNetCore.Diagnostics.DeveloperE ...