一、Map

  Map类似于Object(对象),可用来存储键值对,但需要通过SameValueZero算法保持键的唯一性。与Set一样,在使用之前也得要实例化,如下代码所示,构造函数Map()中的参数也是一个可选的可迭代对象,但此对象得是键值对的集合或两列的二维数组。

new Map();                                //Map(0) {}
new Map([["name", "strick"], ["age", 28]]); //Map(2) {"name" => "strick", "age" => 28}

1)属性和方法

  Map比Set多一个读取方法:get(),并且写入方法改成了set(),其它的属性和方法在功能上基本都一致,只是有些参数在含义上略有不同,例如delete()的参数表示键而不是值。方法的具体使用,可参加下面的代码。

var people = new Map();
//写入和读取
people.set("name", "strick").set("age", 28);  //Map(2) {"name" => "strick", "age" => 28}
people.get("name");                 //"strick"
people.size;                     //
//遍历
[...people.keys()]; //["name", "age"]
[...people.values()]; //["strick", 28]
[...people.entries()]; //[["name", "strick"], ["age", 28]]
/*
"strick" "name" Map(2) {"name" => "strick", "age" => 28}
28 "age" Map(2) {"name" => "strick", "age" => 28}
*/
people.forEach(function(value, index, map) {
console.log(value, index, map);
});
//移除
people.delete("name")
people.has("name"); //false
people.clear();
people.has("age"); //false

2)比较对象

  本节开篇就提到Map和Object很类似,但其实两者之间还是有一些很重要的区别,具体如表10所列。

表10  Map和Object的对比

不同点 Map Object
所有类型,甚至包括NaN 字符串或Symbol类型
可迭代对象
尺寸 通过size属性得到 需要手动计算
原型
写入 set()方法 等号运算符
读取 get()方法 成员访问运算符(点号或方括号)
移除 delete()或clear()方法 delete运算符
枚举顺序 根据键值对的添加顺序 依照ES6的新规则

二、WeakMap

  WeakMap是Map的变体,也是键值对的集合,但它的键必须是弱引用的对象,并且不可枚举,而值没有限制,还是保持任意类型。当WeakMap的键所指的对象不再被引用时,其键和值将被GC自动回收。

1)创建和方法

  WeakSet也需要像Map那样实例化(如下代码所示),但没有Map的size属性,并且只包含Map中的四个方法:set()、get()、has()和delete(),诸如清空和遍历相关的方法都是不存在的。

var weak = new WeakMap(),
arr = [1];
weak.set(arr, 10); //WeakMap {Array(1) => 10}
weak.get(arr); //
weak.has(arr); //true
weak.delete(arr);
weak.has(arr); //false

2)用途

  WeakMap的主要优势在于不干扰垃圾收集,从而能够有效的防止内存泄漏。它适用于隐藏信息、存储DOM节点等场景。下面是一个隐藏信息的示例,privates变量是一个WeakMap,它的键是当前实例化的People对象,存储的私有数据是一个对象,两个原型方法分别用于写入和读取name属性。

var people = (function() {
var privates = new WeakMap();
function People() {
privates.set(this, {}); //初始化私有数据
}
People.prototype.setName = function(name) {
privates.get(this).name = name; //写入
};
People.prototype.getName = function() {
return privates.get(this).name; //读取
};
return new People();
})();
people.setName("strick");
people.getName();   //"strick"

  这种存储方式不仅能让数据保持私有状态,并且当与之关联的对象实例被销毁后,这些私有数据将被GC一并删除,从而释放内存。

  下面是另一个存储DOM节点的示例,node变量是一个WeakMap,它的键是文档中的<div>元素(即DOM的一个节点),在该元素的事件处理程序中可更新digit属性。当从文档中移除该元素时,与之关联的数据也会随之被删除。

<div id="container"></div>
<script>
var container = document.getElementById("container");
var node = new WeakMap();
node.set(container, { digit: 0 });
container.addEventListener("click", function() {
var current = node.get(this);
current.digit++;
node.set(this, current);
},
false
);
</script>

ES6躬行记(17)——Map的更多相关文章

  1. ES6躬行记(1)——let和const

    古语云:“纸上得来终觉浅,绝知此事要躬行”.的确,不管看了多少本书,如果自己不实践,那么就很难领会其中的精髓.自己研读过许多ES6相关的书籍和资料,平时工作中也会用到,但在用到时经常需要上搜索引擎中查 ...

  2. ES6躬行记 笔记

    ES6躬行记(18)--迭代器 要实现以下接口## next() ,return,throw 可以用for-of保证迭代对象的正确性 例如 var str = "向

  3. ES6躬行记(21)——类的继承

    ES6的继承依然是基于原型的继承,但语法更为简洁清晰.通过一个extends关键字,就能描述两个类之间的继承关系(如下代码所示),在此关键字之前的Man是子类(即派生类),而在其之后的People是父 ...

  4. ES6躬行记(18)——迭代器

    ES6将迭代器和生成器内置到语言中,不仅简化了数据处理和集合操作,还弥补了for.while等普通循环的不足,例如难以遍历无穷集合或自定义的树结构等. 迭代器(Iterator)是一种用于迭代的对象, ...

  5. ES6躬行记(16)——Set

    ES6引入了两种新的数据结构:Set和Map.Set是一组值的集合,其中值不能重复:Map(也叫字典)是一组键值对的集合,其中键不能重复.Set和Map都由哈希表(Hash Table)实现,并可按添 ...

  6. ES6躬行记(13)——类型化数组

    类型化数组(Typed Array)是一种处理二进制数据的特殊数组,它可像C语言那样直接操纵字节,不过得先用ArrayBuffer对象创建数组缓冲区(Array Buffer),再映射到指定格式的视图 ...

  7. ES6躬行记(3)——解构

    解构(destructuring)是一种赋值语法,可从数组中提取元素或从对象中提取属性,将其值赋给对应的变量或另一个对象的属性.解构地目的是简化提取数据的过程,增强代码的可读性.有两种解构语法,分别是 ...

  8. ES6躬行记(9)——字符串

    在介绍字符串之前,有必要先了解一点Unicode的基础知识,有助于理解ES6提供的新功能和新特性. 一.Unicode Unicode是一种字符集(即多个字符的集合),它的目标是涵盖世界上的所有字符, ...

  9. ES6躬行记(7)——代码模块化

    在ES6之前,由于ECMAScript不具备模块化管理的能力,因此往往需要借助第三方类库(例如遵守AMD规范的RequireJS或遵循CMD规范的SeaJS等)才能实现模块加载.而自从ES6引入了模块 ...

随机推荐

  1. Unity-修改Debug日志文本颜色

    Unity开发过程中Debug信息是非常重要的,但是千篇一律的白色字符不能迅速找出想要的信息,添加些字体颜色是个很好的办法,比如: AppDebug.Log("<color=#ff84 ...

  2. python学习:字符串

    字符串 #字符串操作# 对应操作:# 1.重复输出字符串# print('hello'*2)# 2.[],[:]通过索引获取字符串中字符,这里和列表的切片操作是相同的,具体内容见列表#print('h ...

  3. .NET题目(收集来自网络)

    1: .NET和c#有什么区别? 答: .NET一般是指.NET FrameWork框架,是一种平台,一种技术 c#是一种编程语言,是可以基于.NET平台的应用 2: c#中的委托是什么?事件是不是一 ...

  4. 纯css修改单选、复选按钮样式

    只支持IE9及以上 html <label><input class="radio" type="radio" name="radi ...

  5. numpy地址

    pip安装  http://zhidao.baidu.com/link?url=nkRwDOZ1ALMjRsWHGMR1nLSIyuVycoD4j-mhGDsYptPwDRGYcE8u4_B9VvYk ...

  6. Java语法细节 - synchronized和volatile

    目录 synchronized关键字 关键字volatile synchronized关键字 synchronized关键字锁住方法和this的不同之处: public synchronized vo ...

  7. 压力测试工具 ab

    ab 是Apache 自带的一个压力测试工具,命令行,是 ApacheBench 命令的缩写. ab的原理:ab命令会创建多个并发访问线程,模拟多个访问者同时对某一URL地址进行访问.它的测试目标是基 ...

  8. 长沙学院APP之校园模块设计

    一.简单回顾 在上次的scrum冲刺中,我将整个长沙学院的APP做了一个基本的架构设计以及框架设计,确定好了APP的功能结构以及实现时所要达到的效果,并且做了一个简单的用户登录界面,由于所学知识有限, ...

  9. MongoDB 分片键的选择与案例

    MongoDB版本:3.6 一.分片键类别 1.升序片键 升序片键例如:日期时间字段.自增字段. 2.随机分发片键 随机分发片键例如:用户名.邮件名.UUID.MD5值或者是其它的一些没有规律的值的列 ...

  10. APP测试工具与技术

    AndroidDevTools Android Dev Tools官网地址:www.androiddevtools.cn 收集整理Android开发所需的Android SDK.开发中用到的工具.An ...