es6-Map Set 等到树叶都泛了黄

等到树叶都泛了黄

      新生军训开始了，我和室友早早的来到了操场上，同学们也陆陆续续的来了，而我一直在人群中找寻她的影子，许久才看到她和她室友说笑着朝我们这走来，白嫩的皮肤，水灵的眼睛，军训的迷彩服也无法遮挡她的美，尤其是她笑起来的时候……
      我们班男女比例3比1，她站在第二排倒数第三个，我站在第三排中间，我一侧脸就能看到她，这位置挺不错的，军训的时候我总会时不时的瞟一下她，每瞟一下心都会砰砰的乱跳。那天下午，我正准备小心翼翼的偷看她时，她正好也把目光投向了我这边，那是我们第一次对视，我不知道该怎么形容那种感觉了，很奇妙，却无法言语形容，我本能的赶紧低下头去，她应该也发现了我在偷看她…… 当天晚上我就加她的qq，我实在等不了，虽然我深知自己配不上她，但每个人都有爱的权利，那时我已深深的沦陷了……
      信息我都是秒回的，她每次的回复很简短，经常等半天回复或者干脆不回复。她在干啥呀，咋还不回复我，焦虑，心烦。兄弟们可曾有过那种等待？直到她回复了我一句，哪怕一两个字，我的那种心情才会得到缓和，然而我还会很煞笔的问她你去干嘛了呀，咋这么久才回复我。军训一天一天进行着，向她表白的也越来越多，每次听说有人向她表白，我都会紧张要命，听到她没答应我才放下心来，这样的日子大约持续到了9月底，每一天对我来说简直就是煎熬，我终于忍受不了了，我决定要向她表白了……

      各位千万别学我这样聊天:
          你醒了吗？吃早饭了吗？
          这么晚吃早饭对胃不好，要早点吃。
          你中午吃的什么？现在在干啥？
          都11点了怎么还不睡啊？晚睡对身体不好的。
          那你早点休息，晚安。

Set WeakSet Map WeakMap 用法及手写Set，Map。看完即懂

Set 用法

此时的set得到的并不是一个数组，可以利用set=[...set] 和 set=Array.from([set])将它转成数组
add：添加 。clear：清空所有。 delete： 删除具体的一个。 has：判断是否存在。 size：长度
注意：keys 和values都是[1,'1'] 。forEach:遍历方法

Set WeakSet 到底有啥区别？

先看下 弱引用 WeakSet里面装了点啥

他只有add delete has方法，用法和set一样。
下图将展现弱引用WeakSet和set的区别，类似于浅拷贝和深拷贝

它为啥没有size属性？

JavaScript有自动垃圾收集机制，那么这个自动垃圾收集机制的原理是什么呢？其实很简单，就是找出那些不再继续使用的值，然后释放其占用的内存。垃圾收集器会每隔固定的时间段就执行一次释放操作
key1=null 后，set1 作为弱引用也会被垃圾回收，但具体回收时间是不确定的，所以他没有size

Map 和 WeakMap

普通对象键名只能是字符串

obj 的内部会把b对象 通过Object.prototype.toString.call(b) 进行转换

Map方法及与普通对象区别

Map的key可以为任意类型 ，但对象只能为字符串

下图是Map的方法及循环使用。get：取值 set：设置值

WeakMap 弱引用：当前内存泄漏不会造成风险的一种方式 。 让代码更优雅

先看看WeakMap的方法 不过多介绍使用，直接上重点

为了防止内存泄漏 ，会移除绑定的事件，如果追求更好会把整个dom以及dom相关联的属性干掉

使用WeakMap
这样就可以不用去清空 count了 当btn关联的属性太多时，无需手动去清除所有的关联属性

实现一个 简易版 Set

这个其实是存在问题的 对象的key是字符串 所以上图无法区分 1 和'1'

下图我借助Map改造 升级版Set

//这里有2个细节 NaN===NaN 是false的 所以要用es6 的Object.is处理，这里还有+0 和-0的处理，你们自己可以研究下，哈哈

class Set1{
		constructor(arr=[]){
			this.size=0
			this.obj=new Map()
			if(arr.length){
				arr.forEach(item=>this.add(item))
			}
		}

		add(val){
			if(this.has(val)) return false
			this.obj.set(val,val)
			this.size++
			return true
		}

		has(val){
			//这里有2个细节   NaN===NaN 是false的   所以要用es6 的Object.is处理，这里还有+0 和-0的处理，你们自己可以研究下，哈哈
			let flag=false
			for (let [key,item] of this.obj.entries()) {
			 	if(isNaN(val)){
			 		if(Object.is(val,item)){
                                            flag=true
			 		}
			 	}else{
			 	        if(val===item){
                                             flag=true
                                        }
                                 }
                       }
                       return flag
		}

		delete (val){
			if(this.has(val)){
				 this.obj.delete(val)
				this.size--
				return true
			}
			return false
		}

		clear (val){
			this.size=0
			this.obj={}
		}

		keys (){
			return this.obj.values()
		}

		values (){
			return this.obj.values()
		}

		forEach (fn,that=this){
			 for (let [key,item] of this.obj.entries()) {
                            fn.call(that, item, item, this.this.obj);
                        }
		}
	}

实现一个 简易版 Map

class Map1{
		constructor(){
			this.size=0
			this.obj={}
		}

		set(key, val){
			this.obj[key]=val
			this.size++;
		}

		get(key){
			return this.obj[key]
		}

		has(key){
 			return this.obj.hasOwnProperty(key);
		}

		delete (key){
 			if (this.has(key)) {
                            delete this.obj[key];
                            this.size--;
                            return true;
                        }
        		return false;
		}

		clear (){
			this.size=0
			this.obj={}
		}

		forEach (fn,that=this){
 			for (let i = 0; i < this.size; i++) {
                            let key = Object.keys(this.obj)[i];
                            let value = this.obj[key];
                            fn.call(that, value, key, this.obj);
                        }
		}

		values (){
			return Object.values(this.obj);
		}

		keys (){
		    return Object.keys(this.obj);
		}
	}

Map我就没咋改了，毕竟Set和Map的结构特殊，实现思想应该是差不多了。

总结

WeakSet WeakMap 都属于弱引用
弱引用：当前内存泄漏不会造成风险的一种方式 代码只是简易版的，有多地方需要优化，比如Map的传参可以是一个二维数组，它真实的Map结构我无法去模拟 你听了我的故事，学了技术，帮我点赞支持下吧。谢谢