Map与Object的差异与选择

ES6以前，我们可以使用Object方便高效地完成“键/值”式的存储，但是这种实现并非没有问题。因此，TC39委员会专门为“键/值”存储定义了一个规范，即Map。它是一种新的集合类型，为这门语言带来了真正地键/值存储机制。

Object和Map的细微语法差异

1. 键的数据类型

与Object只能使用数值、字符串或符号作为键不同，Map可以使用任何JS的数据类型作为键。

Map内部使用严格对象相等的标准来检查键的匹配性。当然，与Object类似，映射的值是没有限制的。

2. 顺序与迭代

与Object类型的一个主要差异是，Map实例会维护键值对的插入顺序，这也就意味着可以根据插入顺序进行迭代操作。

迭代方式：

1）映射实例可以提供一个迭代器（Iterator），能以插入顺序生成 [key,value] 形式的数组。可以通过entries()方法（或者Symbol.iterator 属性，它引用 entries() 方法）取得这个迭代器。

const m = new Map([["key1","val1"],["key2","val2"],["key3","val3"]
]);//Symbol.iterator引用entries()方法
alert(m.entries === m[Symbol.iterator]);  //-> true//迭代，使用m[Symbol.iterator]一样可以
for(let pair of m.entries())  alert(pair);
//-> [key1,val1]
//-> [key2,val2]
//-> [key3,val3]

因为entries()是默认迭代器，所以可以直接对映射实例使用扩展操作，把映射转化为数组：

const m = new Map([["key1","val1"],["key2","val2"],["key3","val3"]
]);console.log([...m]);  //-> [[key1,val1],[ley2,val2],[key3,val3]]

2）不使用迭代器，而是用回调方式的话，可以调用映射的forEach() 方法并传入回调，依次迭代每个键值对。传入的回调接收可选的第二个参数，这个参数用于重写回调内部this的值：

const m = new Map([["key1","val1"],["key2","val2"],["key3","val3"]
]);m.forEach((val,key) => alert(`${key} -> ${val}`));
// key1 -> val1
// key2 -> val2
// key3 -> val3

3）keys() 和 values() 分别返回以插入顺序生成键和值的迭代器。

键和值在迭代器遍历时是可以修改的，但映射内部的引用无法修改。当然，这并不妨碍修改作为键或值的的对象内部的属性，因为这并不影响它们在映射实例中的身份。

选择Object还是Map

以下内容直接采用红宝书原话。结论直接看加粗文本。

对于多数 Web开发任务来说，选择Object还是Map只是个人偏好问题，影响不大。不过，对于在乎内存和性能的开发者来说，对象和映射之间确实存在显著的差别。

内存占用

Object和Map的工程级实现在不同浏览器间存在明显差异，但存储单个键值对所占用的内存数都会随键的数量线性增加。批量添加或删除键/值对则取决于各浏览器对该类型内存分配的工程实现不同浏览器的情况不同，但给定固定大小的内存，Map大约可以比Object多存储50%的键/值对。
插入性能

向Object和Map中插入新键/值对的消耗大致相当，不过插入Map在所有浏览器中一般会稍微快一点儿。对这两个类型来说，插入速度并不会随着键/值对数量而线性增加。如果代码涉及大量插入操作，那么显然Map的性能更佳。
查找速度

与插入不同，从大型Object和Map中查找键/值对的性能差异极小，但如果只包含少量键/值对，则Object有时候速度更快。在把object当成数组使用的情况下(比如使用连续整数作为属性)，浏览器引擎可以进行优化，在内存中使用更高效的布局。这对Map来说是不可能的。对这两个类型而言，查找速度不会随着键/值对数量增加而线性增加。如果代码涉及大量查找操作，那么某些情况下可能选择Object更好一些。
删除性能

使用delete删除Object属性的性能一直以来饱受诟病，目前在很多浏览器中仍然如此。为此，出现了一些伪删除对象属性的操作，包括把属性值设置为undefined或null。但很多时候，这都是一种讨厌的或不适宜的折中。而对大多数浏览器引擎来说，Map的 delete() 操作都比插入和查找更快。如果代码涉及大量删除操作，那么毫无疑问应该选择Map。

《JavaScript高级程序设计》笔记 - Map与Object的差异与选择相关推荐

javascript高级程序设计--笔记01
概述 JavaScript的实现包含三个部分: 1 核心(ECMAScript) 提供核心语言功能 2 文档对象模型(DOM) 一套提供了访问以及操作网页内容的API 3 浏览器对象模型( ...
JavaScript高级程序设计笔记01 | 第一章到第四章 | 关键字与保留字 | 数据类型 | 操作符 | 作用域
观前提示:大部分都是书上的内容,个人理解的部分的较少,看我的笔记还不如去看书第二章 async:可选.表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本.只对外部 ...
JavaScript高级程序设计笔记 - 第四章变量作用域内存问题
4.1 基本类型和引用类型的值基本类型: 简单的数据段引用类型: 指那些可能有多个值构成的对象, 指保存在内存中的对象 4.1.2 复制变量值除了保存的方式不同之外,在从一个变量向另一个变量复制 ...
javascript高级程序设计笔记
1.要讲一个值转换成其对应的Boolean类型 ,可以调用转型函数Boolean(). var message="hello world!"; var messageAsBoole ...
JavaScript高级程序设计笔记事件冒泡和事件捕获
1.事件冒泡要理解事件冒泡,就得先知道事件流.事件流描述的是从页面接收事件的顺序,比如如下的代码: <body><div> click me!</div> < ...
读书笔记(06) - 语法基础 - JavaScript高级程序设计
写在开头本篇是小红书笔记的第六篇,也许你会奇怪第六篇笔记才写语法基础,笔者是不是穿越了. 答案当然是没有,笔者在此分享自己的阅读心得,不少人翻书都是从头开始,结果永远就只在前几章. 对此,笔者换了随 ...
JavaScript高级程序设计学习笔记（三）
分享一下第五章(引用类型)的笔记,内容比较多,我拆成了两部分,今天这部分是关于Object.Array.Date和RegExp类型的. 以下的笔记是书上一些我以前学习的时候,没有太重视的js基础知识, ...
《javascript高级程序设计》笔记：变量对象与预解析
上一篇:<javascript高级程序设计>笔记:内存与执行环境上篇文章中说到: (1)当执行流进入函数时,对应的执行环境就会生成 (2)执行环境创建时会生成变量对象,确定作用域链,确定 ...
《Javascript高级程序设计》读书笔记之对象创建
<javascript高级程序设计>读过有两遍了,有些重要内容总是会忘记,写一下读书笔记备忘创建对象工厂模式工厂模式优点:有了封装的概念,解决了创建多个相似对象的问题缺点:没有解决 ...

《JavaScript高级程序设计》笔记 - Map与Object的差异与选择