第7章 Sets & Maps

Sets and Maps

      我们知道ES6之前,array是唯一的集合类型,数组是数字索引(numeric index)的键值对组合,当我们需要非数字索引的键值对时,必须使用非数组对象来模拟这种情况,ES6新添加了Sets和Maps这两种集合类型。

      Set是一系列值的集合,这些值不能重复,内部使用 Object.is() 来判断两个值是否相同,一般我们不访问set中的单个值,而是检查是否存在某个值;Map是一系列键(keys)和相对应值(values)的集合,多用于数据缓存,该数据稍后取回。下面从几个方面来介绍这两个新集合类型:

  1. ES6之前实现sets和maps的workaround;
  2. Set & WeakSet;
  3. Map & WeakMap;

一.模拟Sets,Maps

1.模拟set 和 map

使用对象属性来模拟set,然后判断该属性是否存在

var set = Object.create(null); // 使用null作为原型,确保没有继承的属性
set.foo = true;

// 检测存在性
if (set.foo) {
    // code to execute
}

一个对象用作set 还是 map 唯一的不同之处在于值得存储方式不同,模拟map

var map = Object.create(null);
map.foo = "bar";

// 取回值
var value = map.foo;

console.log(value); // "bar"

2.模拟会出现的问题

      我们知道对象只能使用字符串作为keys(ES6新添加symbols作为keys),所有的其他类型当作keys,都会被转换成字符串类型。

比如 5 转换成 "5", 所有的对象类型 都转换成 "[object Object]" (obj.toString()),这样很难使用对象当作keys

var map1 = Object.create(null);
map1[5] = "foo";

map1["5"]; // "foo" 数字键转换成字符串
-----------------

var map2 = Object.create(null);
var key1 = {};
var key2 = {};
map2[key1] = "foo";

map2[key2]; // "foo" 对象类型都转换成字符串"[object Object]"

set检测:

var set = Object.create(null);
set.count = 1;
if (set.count) { //检测count是否存在,还是 count===0 的情况,比较模糊
    // ...
}

二.Sets & WeakSets

集合中不存在重复的值(duplicate values),通过Object.is()判断两个值是否相同

1.Set方法属性

  1. add(value): 添加到set集合中
  2. delete(value): 删除value,删除成功返回true,否则false
  3. has(value): 判断是否存在该value值,存在返回true,不存在则返回false
  4. clear(): 清空set中所有值
  5. size: set集合中的值个数

eg:

var mySet = new Set();
mySet.add(5);
mySet.add("5");
var key1 = {};
var key2 = {};

// 引用类型通过Object.is()判断是否相同
mySet.size; // 4   Set {5, "5", Object {}, Object {}}
mySet.delete(5); // true
mySet.delete(10); // false
mySet.has("5"); // true
mySet.size; // 3   Set {"5", Object {}, Object {}}
mySet.clear(); // Set {}

2.创建set集合

Set构造器中可以传入一个可迭代对象作为参数(比如数组),重复的值将会被去除

var mySet = new Set([1, 2, 2, 4, 4, 5]);
mySet.size; // 4  Set {1, 2, 4, 5}

可以利用这一特性将数组中重复的值去除

var arr = [1, 2, 2, 4, 4, 5];
var set = new Set(arr); // Set {1, 2, 4, 5}
// 利用rest items将set集合转变为新数组
var arr1 = [...set]; // arr1 [1, 2, 4, 5]

可以封装这个方法

function eliminateDuplicates(arr) {
    return [...new Set(arr)];
}

3.forEach方法

forEach方法一般有3个参数

  1. value
  2. key(set中我们将键和值等同起来,即值同时也是键)
  3. 集合自身set

set中没有键,将键和值等同起来,是为了与其他使用forEach的集合保持一直,如array, maps

var set = new Set([1, 2]);
set.forEach(function(value, key, ownerSet)) {
    console.log(key + ":" + value);
    console.log(ownerSet === set);
}

// output:
1:1
true
2:2
true

forEach中还可以接入第2个参数this,用于指定上下文

let set = new Set([1, 2]);

let processor = {
    output(value) {
        console.log(value);
    },
    process(dataSet) {
        dataSet.forEach(function(value) {
            this.output(value);
        }, this)
    }
};

processor.process(set); // 1, 2

// 可以使用箭头函数
let processor = {
    output(value) {
        console.log(value);
    },
    process(dataSet) {
        dataSet.forEach(value => this.output(value));
    }
};

4.WeakSet

WeakSet是用于系统GC, 消除不再引用的对象,主要是性能方面的关系,和Set比较起来主要有以下几个方面区别:

  1. WeakSet中只能存储对象, 不能存储primitive类型值
  2. add(), delete(), has()参数中只能传入引用类型参数,传入原始类型会抛出异常;
  3. WeakSet没有暴露任何迭代器,for...of..., keys(), values(), forEach(), clear()方法均不能使用;
  4. WeakSet中不存在size属性,因此不能通过weakSet.size来判断weakSet中是否存在值

原始Set集合:

let set = new Set(),
    key = {};

set.add(key);
console.log(set.has(key)); // true

// 消除原始引用
key = null;

console.log(set.size); // 1 表明并没有GC set中的值

// 取回原始引用
key = [...set][0]; // {}

WeakSet集合:

let key1 = {},
    key2 = {},
    weakSet = new WeakSet([key1, key2]);
weakSet.has(key1); // true
weakSet.has(key2); // true

// 移除对key1,key2的引用,同时也会从 weak set中移除
key1 = null;
key2 = null;

Maps & WeakMaps

maps通过键值对来存储数据,键keys可以为任意类型

1.maps方法属性

  1. set(key, value): 添加键值对;
  2. get(key): 获取key对应的值, 若不存在返回undefined;
  3. delete(key): 删除键值对;
  4. has(key): 判断是否存在该键;
  5. clear(): 清空集合;
  6. size: 集合的长度

eg

let map = new Map();
map.set("name", "Nicholas");
map.set("age", 29);

map.size; // 2  Map {"name" => "Nicholas", "age" => 29}
map.get("name"); // "Nicholas"
map.has("age"); // true

map.delete("name"); // true
map.clear();
map.size; // 0

2.创建Map集合

和Set集合一样,Map构造函数可以添加一个可迭代的对象(比如数组)当作参数,快速创建集合

let map = new Map([["name", "james"], ["age", 27]]);

3.forEach方法

和Set中的forEach方法一样能加入3个参数(value, key, ownerMap)

let map = new Map([["name", "kobe"], ["age", 37]]);
map.forEach((v, k, m) => console.log(k + ":" + "v"));

// output
name:kobe
age:37

4.WeakMap

和Map的区别:

  1. 只能使用对象作为keys,使用其他类型会抛出错误;
  2. 不存在clear()方法,不具备可迭代的能力, forEach(), for...of...等不能使用;
  3. 不存在size属性,因此无法判断WeakMap是否为空
let key1 = {},
    key2 = {};
let weakMap = new WeakMap([[key1, "hello"], [key2, 42]]);
weakMap.has(key1); // true
weakMap.get(key1); // "hello"

weakMap.delete(key2); // true

什么时候使用WeakMap呢?

  1. 只使用对象作为键时(only using object keys),WeakMap是最好的选择;
  2. WeakMap能优化内存使用,避免内存泄漏,但当要使用forEach(), clear(), size等属性方法时,最后选择使用Map;
  3. 当要使用非对象键(nonobject keys), Map则是唯一的选择

总结

      通过这一章我们学习了ES6新添加的两个集合类型,Set多用于判断一个集合中是否存在某个值,而Map则多用于存储键值对数据,然后取回数据进行使用;
      同时介绍了WeakSet和WeakMap另外两个集合,这两个集合多用于优化内存,避免内存泄漏等,这两个集合相对于Set和Map,有些方法和属性不存在,使用时应当注意。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,509评论 6 504
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,806评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,875评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,441评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,488评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,365评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,190评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,062评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,500评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,706评论 3 335
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,834评论 1 347
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,559评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,167评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,779评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,912评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,958评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,779评论 2 354

推荐阅读更多精彩内容