es6-Set集合与Map集合


title: es6-Set集合与Map集合
date: 2018-02-08 21:55:41
tags: es6


2.jpg

前言

离回家的时间越来越近了,突然觉得自己很差劲,分享一首歌,道出心声啊

我的博客地址 :http://www.aymfx.cn/

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=518904754&auto=1&height=66"></iframe>

大概过去的就真的已过去
偶尔想起还有几分怀念气息
遇上快乐遇上心酸遇上分离
生活终究得让人继续
衣身太长遮住大半个身体
学不会平淡幸福无从说起
可到最后 原谅背叛原谅任性
其实该原谅眼里的自己
那年的自己讨厌的自己如今的自己
风一直不停
乱了旅行 残喘下去
我除了祝福你没有其他目的
但却害怕往事再重提

大概过去的就真的已过去
偶尔想起还有几分怀念气息
遇上快乐遇上心酸遇上分离
生活终究得让人继续
衣身太长遮住大半个身体
学不会平淡幸福无从说起
可到最后 原谅背叛原谅任性
其实该原谅眼里的自己
那年的自己讨厌的自己如今的自己
风一直不停
乱了旅行 残喘下去
我除了祝福你没有其他目的
但却害怕往事再重提
我安慰我自己 恨自己 伤感记忆
只能用意志慢慢的去抚平冬季
我除了祝福你没有其他目的
我也可以带着青涩 美好回忆

Set 对象允许你存储任何类型的唯一值,无论是原始值或者是对象引用

创建Set集合并添加元素,对于字符串和数字不会发生强制转换,因此时两个值


let set = new Set();

set.add(5)
set.add('5')

console.log(set.size) //2

对象如果做属性名的话,es5中会发生这种事

var set = Object.create(null);
var obj1 = {};
var obj2 = {};

set[obj1] = 'foo'

console.log(set[obj2])  //foo 因为不能识别对象他们全部转换成这个了 [object object]



let set = new Set(),
    key1 = {},
    key2 = {};

set.add(key1)
set.add(key2)

console.log(set.size) //2 说明不是调用tostring方法


set是会忽略重复值的

let set = new Set();
set.add(5)
set.add(5)
set.add('5')
set.add(5)

console.log(set.size) //2

利用has() 检查值是否存在 清除所有元素 clear()

let set = new Set();
set.add('5')
set.add('6')
set.add('7')
console.log(set.has('5')) // true
console.log(set.has(5)) //false


set.clear();
console.log(set.has('6')) false

移除元素

let set = new Set();
set.add('5')
set.add('6')
console.log(set.has('5')) // true
set.delete('5') //false
console.log(set.has('5')) //false

使用Foreach循环,他和数组的方式的基本一样,我们来看看栗子,他们的不同

var arr = new Array(1,2,3,4),
    set = new Set([1,2,3,4]);

let pocess = {
    output (value,index) {
        console.log(value,index);
    },
    
    arrObj (arr) {
        arr.forEach((value,index,own) => {
            this.output(value,index);
            console.log(arr === own);
        },this)
    },
    
    setObj (arr) {
        arr.forEach((value,index,own) => {
            this.output(value,index);
            console.log(arr === own);
        },this)
    }
}

pocess.arrObj(arr)
pocess.setObj(set)

//第一种结果

VM163:0 1 0
VM163:12 true
VM163:6 2 1
VM163:12 true
VM163:6 3 2
VM163:12 true
VM163:6 4 3
VM163:12 true

//第二种结果

VM173: 12 1 1
VM173:19 true
VM173:6 2 2
VM173:19 true
VM173:6 3 3
VM173:19 true
VM173:6 4 4
VM173:19 true


将Set集合转换成数组,下列演示去重

//第一种方式

let set = new Set([1,5,58,6,7,8,9,5]),
    arr = [...set];
console.log(arr); //[1, 5, 58, 6, 7, 8, 9]

//第二种

console.log(Array.from(new Set([1,5,58,6,7,8,9,5]))); // [1, 5, 58, 6, 7, 8, 9]


Weak Set集合

set 是一个强引用集合,不信看栗子

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

    
set.add(key);
console.log(set.size); //1
//移除原始引用
key = null;

console.log(set.size); //1

//重新取回引用

key = [...set][0]; //{}

这种情况会造成内存的泄露,所以我们可以用以下的方法,弱引用的Set集合

创建Weak Set集合

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

//向集合set添加对象
set.add(key);
console.log(set.has(key)); //true

set.delete(key)
console.log(set.has(key)); //false

我们试试这个

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

    
set.add(key);
console.log(set.has(key)); //true set.size不能用在weakset
//移除原始引用
key = null;

console.log(set.has(key)); //false


两者的不同

WeakSet 对象中只能存放对象引用, 不能存放值, 而 Set 对象都可以.

WeakSet 对象中存储的对象值都是被弱引用的, 如果没有其他的变量或属性引用这个对象值, 则这个对象值会被当成垃圾回收掉. 正因为这样, WeakSet 对象是无法被枚举的, 没有办法拿到它包含的所有元素

WeakSet 不可迭代 于是 for of foreach keys() values() 方法都没有

Map集合 Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。

基本用法

let map = new Map(),
    key1 = {},
    key2 = {};

map.set('name','ly')
map.set(key1,"ly1")
map.set(key2,'2')

console.log(map.get('name'),map.get(key1),map.get(key2)); //ly ly1 2

Map集合支持的方法

let map = new Map(),
    key1 = {},
    key2 = {};

map.set('name','ly')
map.set(key1,"ly1")
map.set(key2,'2')

console.log(map.size);  //3

console.log(map.has(key2)); //true
console.log(map.get(key2));2

map.delete(key2)
console.log(map.has(key2)); //false

map.clear()
console.log(map.has(key1)); //false
console.log(map.size);  //0


Map集合的初始化方法,可以传一个数组,数组包含一个个子数组,子数组包含两个值,键和值

let map = new Map([["name",'ly'],["age",'18']]);

console.log(map.has('name')); //true
console.log(map.get('name')); //ly
console.log(map.size);  //2

可以使用ForEach()

let map = new Map([["name",'ly'],["age",'18']]);

map.forEach((value,key,own) => {
    console.log(value,key,own);
})

//ly name Map(2) {"name" => "ly", "age" => "18"}

18 age Map(2) {"name" => "ly", "age" => "18"}

WeakMap 对象是一组键/值对的集合,其中的键是弱引用的。其键必须是对象,而值可以是任意的。

适用场景 保存dom元素对象,便于销毁和创建

let map = new WeakMap(),
    ele = document.querySelector('div')[0];

map.set(ele,'Original');

let value = map.get('ele') 

console.log(value); //Original


ele.parentNode.removeChild(ele);

ele = null;

WeakMap支持的方法

let key1 = {},
    key2 = {},
    map = new WeakMap([[key1,'ly'],[key2,'18']]);
    
    console.log(map.has(key1)); //true
    console.log(map.get(key1)); //ly
    map.delete(key1)
    console.log(map.has(key1)); //false
    console.log(map.get(key1)); //undefined

私有对象数据

es5创建接近有私有数据的对象

var Person = (function(){
    var privateData = {},
        privateId = 0;
    function Person(name){
        Object.defineProperty(this,"_id",{value:privateId++})
        privateData[this._id] = {
            name:name
        }
    }
    
    Person.prototype.getName = function(){
        return privateData[this._id].name
    }
    
    return Person
}())

这种方式的弊端就是对象数据永远不会消失,而WeakUp可以处理这种情况

let Person = (function(){
    let privateData = new WeakMap();
    function Person(name){
        privateData.set(this,{name:name})
    }
    
    Person.prototype.getName = function(){
        return privateData.get(this).name
    }
    
    return Person
}())


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

推荐阅读更多精彩内容

  • 1.Set 基本用法 ES6提供了新的数据结构Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。Set本...
    雨飞飞雨阅读 1,804评论 0 7
  • Set集合是一种无重复元素大的列表,开发者一般不会逐一读取数组中的元素,也不太可能逐一访问Set集合的每一个元素,...
    厂厂哥阅读 539评论 0 1
  • 基本用法 es6提供了新的数据结构Set,它类似于数组,但是他的成员值是唯一的,没有重复的值。Set本身就是一个构...
    曼珠沙华_521b阅读 323评论 0 0
  • 秋雨绵绵 好似对夏热的惩罚 一场场的 还在淅淅沥沥的下着 朦朦胧胧的天色 好似生气于夏热的沉闷 左边右边都是湿漉漉...
    白丰阁阅读 230评论 0 3
  • 发现这小工具真好用. diff 效果惊人. git 的配置: 启动 vimdiff: cheatsheet: zc...
    district10阅读 466评论 0 0