es6新出的数据容器技术-Map和Set

一、Map

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

• Map和Object的区别：

- 一个 Object 的键只能是字符串或者 Symbols，但一个 Map 的键可以是任意值。
- Map 中的键值是有序的（FIFO 原则），而添加到对象中的键则不是。
- Map 的键值对个数可以从 size 属性获取，而 Object 的键值对个数只能手动计算。
- Object 都有自己的原型，原型链上的键名有可能和你自己在对象上的设置的键名产生冲突。

• 没有创建的语法糖

  var a=["key"]
  			var m1=new Map([["age",100],[20,"hello"],[a,90]])

•  取数据

  var re1=m1.get("age")
  			var re2=m1.get(20)
  			var re3=m1.get(["key"])
  			var re4=m1.get(a)
  			console.log(re1,re2,re3,re4)

•  存数据

  m1.set("life",1)
  			m1.set("age",1)
  			console.log(m1)
  		 console.log(m1.size)//m1.size,查看有多少个数据

• 删除数据

  m1.delete(20)
  			var re5=m1.delete("age")
  			var re6=m1.delete("age")
  		 console.log(m1,re5,re6)

   
• 清空数据 

  m1.clear()
  			console.log(m1)

2、购物车案例

 

	var mycar = {
				data: new Map(),
				clear:function(){
					this.data.clear()
				},
				jianshao:function(id){
					let obj=this.data.get(id)
					if(obj){
						obj.count--
						if(obj.count<=0){
							this.data.delete(id)
						}
					}
				},
				add: function(id) {
					let obj = this.data.get(id)
					if (obj) {
						// console.log(obj)
						obj.count++
						this.data.set(id, obj)
					}
				},
				total: function() {
					var result = 0;
					this.data.forEach(function(el) {
						console.log(el)
						result += el.count * el.price
					})
					return result
				},
				network: function() {
					var jiashuju = [{
						id: 435123,
						title: "鱼香肉丝",
						price: 18,
						count: 1
					}, {
						id: 435124,
						title: "东坡肉",
						price: 28,
						count: 1
					}, {
						id: 435125,
						title: "米饭",
						price: 2,
						count: 2
					}];
					// this.data.set(jiashuju[0].id,jiashuju[0])
					// this.data.set(jiashuju[1].id,jiashuju[1])
					// this.data.set(jiashuju[2].id,jiashuju[2])
					var self = this
					jiashuju.map(function(el) {
						self.data.set(el.id, el)
					})
				}
			}
			mycar.network()
			mycar.add(435123)
			mycar.add(435125)
			mycar.add(435125)
			mycar.add(435125)
			mycar.add(435125)
			mycar.add(435125)
			mycar.jianshao(435124)
			console.log(mycar.data)
			var re1 = mycar.total()
			console.log(re1)
			mycar.clear()
			console.log(mycar.data)

二、Set

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

Set中的特殊值

Set 对象存储的值总是唯一的，所以需要判断两个值是否恒等。有几个特殊值需要特殊对待：

+0 与 -0 在存储判断唯一性的时候是恒等的，所以不重复；undefined 与 undefined 是恒等的，所以不重复；
NaN 与 NaN 是不恒等的，但是在 Set 中只能存一个，不重复

•  创建

  var arr=[11,22,33,11]
  			var s1=new Set(arr)//遍历的数组 然后把数组的元素们调用s1.add添加进集合中
  			var arr2=Array.from(s1)//取出了数据容器中的所有数据 然后存入新数组返回值
  			console.log(arr2)
  

• 并集

  var arr = [10, 20, 30, 10,{}]
  			var arr2 = [100, 200,30,10]
  			var s1 = new Set([...arr,...arr2])
  			console.log(s1)

   
• 交集

  var arr = [10, 20, 30, 10,{}]
  			var arr2 = [100, 200,30,10]
  			var s2 = new Set(arr.filter(function(el) {
  				if (arr2.includes(el)) {
  					return el
  				}
  			}))
  			console.log(s2)

   
• 差集 

var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var difference = new Set([...a].filter(x => !b.has(x))); // {1}

三、08-arr-map-set的转换

1. 数组转map:必须是二维数组

     var arr=[[1,"hello"],[2,"h5"],[3,{name:"karen"}]]
   
               var m1=new Map(arr)
   
               

   2、map转数组: Array.from()静态方法 

        var arr2=Array.from(m1)
   
               console.log(arr,m1,arr2,arr==arr2,arr[2][1]==arr2[2][1])
   
               var arr=[100,200,100,{age:20},{age:20}]

   3、数组转集合

               var s1=new Set(arr)
   
          console.log(s1,s1.size)

   4、集合转数组

             

     var arr2=Array.from(s1)
   
               console.log(arr,s1,arr2,arr[4]==arr2[3])
   
               

      

     5、多个数组转集合和map:用 ...

        var arr1=[10,20]
   
               var arr2=[100,20]
   
               var arr3=[200,{name:"karen"}]
   
               var s1=new Set([...arr1,...arr2,arr3])
   
               var m1=new Map([arr1,arr2,arr3])
   
               var m2=new Map(m1)
   
               console.log(m1,m2,m1==m2,m1.get(200)==m2.get(200))
   
               var mySet=new Set(" hel  lo 监控死\n")
   
               console.log(mySet);