浅谈es6 javascript的map数据结构

本文介绍了es6 javascript的map数据结构，分享给大家，具体如下：

Map 结构的目的和基本用法

JavaScript 的对象（ Object）， 本质上是键值对的集合（ Hash 结构）， 但是传统上只能用字符串当作键。 这给它的使用带来了很大的限制。

var data = {};
var element = document.getElementById('myDiv');
data[element] = 'metadata';
data['[object HTMLDivElement]'] // "metadata"

上面代码原意是将一个 DOM 节点作为对象data的键， 但是由于对象只接受字符串作为键名， 所以element被自动转为字符串[object HTMLDivElement]。

为了解决这个问题， ES6 提供了 Map 数据结构。 它类似于对象， 也是键值对的集合， 但是“ 键” 的范围不限于字符串， 各种类型的值（ 包括对象） 都可以当作键。 也就是说， Object 结构提供了“ 字符串— 值” 的对应， Map 结构提供了“ 值— 值” 的对应， 是一种更完善的 Hash 结构实现。 如果你需要“ 键值对” 的数据结构， Map 比 Object 更合适。

var m = new Map();
var o = {
 p: 'Hello World'
};
m.set(o, 'content')
m.get(o) // "content"
m.has(o) // true
m.delete(o) // true
m.has(o) // false

上面代码使用set方法， 将对象o当作m的一个键， 然后又使用get方法读取这个键， 接着使用delete方法删除了这个键。
作为构造函数， Map 也可以接受一个数组作为参数。 该数组的成员是一个个表示键值对的数组。

var map = new Map([
 ['name', ' 张三 '],
 ['title', 'Author']
]);
map.size // 2
map.has('name') // true
map.get('name') // " 张三 "
map.has('title') // true
map.get('title') // "Author"

上面代码在新建 Map 实例时， 就指定了两个键name和title。

Map 构造函数接受数组作为参数， 实际上执行的是下面的算法。

var items = [
 ['name', ' 张三 '],
 ['title', 'Author']
];
var map = new Map();
items.forEach(([key, value]) => map.set(key, value));

下面的例子中， 字符串true和布尔值true是两个不同的键。

var m = new Map([
 [true, 'foo'],
 ['true', 'bar']
]);
m.get(true) // 'foo'
m.get('true') // 'bar'

如果对同一个键多次赋值， 后面的值将覆盖前面的值。

let map = new Map();
map
 .set(1, 'aaa')
 .set(1, 'bbb');
map.get(1) // "bbb"

上面代码对键1连续赋值两次， 后一次的值覆盖前一次的值。

如果读取一个未知的键， 则返回undefined。

new Map().get('asfddfsasadf')
 // undefined

注意， 只有对同一个对象的引用， Map 结构才将其视为同一个键。 这一点要非常小心。

var map = new Map();
map.set(['a'], 555);
map.get(['a']) // undefined

上面代码的set和get方法， 表面是针对同一个键， 但实际上这是两个值， 内存地址是不一样的， 因此get方法无法读取该键， 返回undefined。

同理， 同样的值的两个实例， 在 Map 结构中被视为两个键。

var map = new Map();
var k1 = ['a'];
var k2 = ['a'];
map
 .set(k1, 111)
 .set(k2, 222);
map.get(k1) // 111
map.get(k2) // 222

上面代码中， 变量k1和k2的值是一样的， 但是它们在 Map 结构中被视为两个键。

由上可知， Map 的键实际上是跟内存地址绑定的， 只要内存地址不一样， 就视为两个键。 这就解决了同名属性碰撞（ clash） 的问题， 我们扩展别人的库的时候， 如果使用对象作为键名， 就不用担心自己的属性与原作者的属性同名。

如果 Map 的键是一个简单类型的值（ 数字、 字符串、 布尔值）， 则只要两个值严格相等， Map 将其视为一个键， 包括0和 - 0。 另外， 虽然NaN不严格相等于自身， 但 Map 将其视为同一个键。

let map = new Map();
map.set(NaN, 123);
map.get(NaN) // 123
map.set(-0, 123);
map.get(+0) // 123

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • ES6学习笔记之Set和Map数据结构详解

    本文实例讲述了ES6学习笔记之Set和Map数据结构.分享给大家供大家参考,具体如下: 一.Set ES6提供了新的数据结构Set.类似于数组,只不过其成员值都是唯一的,没有重复的值. Set本身是一个构造函数,用来生成Set数据结构. 1 . Set函数可以接受一个数组(或类似数组的对象)作为参数,用来初始化. var s = new Set(); var set = new Set([1, 2, 3, 4, 4]); [...set] // [1, 2, 3, 4] var items =

  • ES6新数据结构Map功能与用法示例

    本文实例讲述了ES6新数据结构Map功能与用法.分享给大家供大家参考,具体如下: 新数据结构Map JavaScript中对象的本质是键值对的集合,但是键只能是字符串.为了弥补这种缺憾,ES6带来了一种新的数据结构Map.Map也是键值对的集合,只是键不仅可以是字符串还可以是其他数据类型,比如:对象(是不是很神奇).请看下面例子. var m = new Map(); var ul = document.getElementsByTagName('ul'); m.set(ul,'hi'); co

  • ES6新特性五：Set与Map的数据结构实例分析

    本文实例讲述了ES6新特性五之Set与Map的数据结构.分享给大家供大家参考,具体如下: 1. Set ① 定义:它类似于数组,但是成员的值都是唯一的,没有重复的值.Set本身是一个构造函数,用来生成Set数据结构. var s = new Set(); [2,3,5,4,5,2,2].map(x => s.add(x)) console.log(s); //Set { 2, 3, 5, 4 } ② 属性和方法 Set结构有以下属性. Set.prototype.constructor:构造函数

  • 浅谈es6 javascript的map数据结构

    本文介绍了es6 javascript的map数据结构,分享给大家,具体如下: Map 结构的目的和基本用法 JavaScript 的对象( Object), 本质上是键值对的集合( Hash 结构), 但是传统上只能用字符串当作键. 这给它的使用带来了很大的限制. var data = {}; var element = document.getElementById('myDiv'); data[element] = 'metadata'; data['[object HTMLDivElem

  • 浅谈ES6新增的数组方法和对象

    es6新增的遍历数组的方法,后面都会用这个方法来遍历数组,或者对象,还有set,map let arr=[1,2,3,4,3,2,1,2]; 遍历数组最简洁直接的方法 for (let value of arr) { console.log(value);//输出1,2,3,4,3,2,1,2 } 1. 数组.map() 返回一个新的数组,es5要复制一个新的数组我们一般用循环,现在直接用map let arr=[1,2,3,4,3,2,1,2]; let newArr=arr.map((val

  • 浅谈es6中export和export default的作用及区别

    作用: export和export default实现的功能相同,即:可用于导出(暴露)常量.函数.文件.模块等,以便其他文件调用. 区别: 1.export导出多个对象,export default只能导出一个对象 2.export导出对象需要用{ },export default不需要{ },如: export {A,B,C}; export default A; 3.在其他文件引用export default导出的对象时不一定使用导出时的名字.因为这种方式实际上是将该导出对象设置为默认导出

  • 浅谈es6语法 (Proxy和Reflect的对比)

    如下所示: { //原始对象 let obj={ time:'2017-03-11', name:'net', _r:123 }; //(代理商)第一个参数代理对象,第二个参数真正代理的东西 let monitor=new Proxy(obj,{ // 拦截对象属性的读取 get(target,key){ return target[key].replace('2017','2018') }, // 拦截对象设置属性 set(target,key,value){ if(key==='name')

  • 浅谈c++ vector和map的遍历和删除对象

    示例如下: // Aa.cpp : Defines the entry point for the console application. #include "stdafx.h" #include <vector> #include <map> #include <iostream> using namespace std; int main(int argc, char* argv[]) { printf("Hello World!\n

  • 浅谈鸿蒙 JavaScript GUI 技术栈

    作者:doodlewind 链接:https://juejin.im/post/6872154561574862855 众所周知,刚刚开源的「鸿蒙 2.0」以 JavaScript 作为 IoT 应用开发的框架语言.这标志着继 SpaceX 上天之后,JavaScript 再一次蹭到了新闻联播级的热点.这么好的机会,只拿来阴阳怪气实在太可惜了.作为科普,这篇文章不会拿着放大镜找出代码中的槽点来吹毛求疵,而是希望通俗地讲清楚它所支持的 GUI 到底是怎么一回事.只要对计算机基础有个大概的了解,应该

  • 浅谈es6中的元编程

    何为元编程? 「编写能改变语言语法特性或者运行时特性的程序」.换言之,一种语言本来做不到的事情,通过你编程来修改它,使得它可以做到了,这就是元编程. meta-programming元编程中的 元 的概念可以理解为 程序 本身."元编程能让你拥有可以扩展程序自身能力 举个例子: if (a == 1 && a == 2 && a == 3) { console.log("done"); } 怎样才能让这个条件满足,输出done.按照正常的逻辑是

  • 浅谈关于JavaScript API设计的一些建议和准则

    浅谈关于JavaScript API设计的一些建议和准则

    设计是一个很普遍的概念,一般是可以理解为为即将做的某件事先形成一个计划或框架. (牛津英语词典)中,设计是一种将艺术,体系,硬件或者更多的东西编织到一块的主线.软件设计,特别是作为软件设计的次类的API设计,也是一样的.但是API设计常常很少关注软件发展,因为为其他程序员写代码的重要性要次于应用UI设计和最终用户体验. 但是API设计,作为我们自己写的库中提供的公共接口,能够向调用我们代码的开发者表现出我们库的一些特点和功能,所以API设计和UI设计一样重要.事实上,两者都是为应用可以提供更好的

  • 浅谈ES6 模板字符串的具体使用方法

    写在前面 关于 ES6, 也终于在 2015 年的 7 月 18 号尘埃落定了.虽然说各大浏览器还没有全面的支持,不过这并不妨碍我们一颗想要撸一把的心.在后端,可以使用 Node.js(0.12+)或 io.js, 前端的话,也可以使用Babel 或Traceur 进行语法预转义成 ES5使用 . 关于该系列(不知道能不能成为一个系列,总是各种懒),会没有规律的挑选一些内容来学习.欢迎大家积极纠错,留言探讨. 模板字符串(template strings) 用法 // 普通字符串 `In Jav

  • 浅谈利用JavaScript进行的DDoS攻击原理与防御

    浅谈利用JavaScript进行的DDoS攻击原理与防御

    分布式拒绝服务攻击(DDoS)攻击是一种针对网站发起的最古老最普遍的攻击.Nick Sullivan是网站加速和安全服务提供商CloudFlare的一名系统工程师.近日,他撰文介绍了攻击者如何利用恶意网站.服务器劫持和中间人攻击发起DDoS攻击,并说明了如何使用HTTPS以及即将到来的名为"子资源一致性(Subresource Integrity,简称SRI)"的Web新技术保护网站免受攻击. 现代网站的大部分交互都来自于JavaScript.网站通过直接向HTML中添加JavaScr

随机推荐