ES6--symbol( )与Map( )

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

• 目录

  文章目录

  1.symbol()

  2.Map

   （1）取数据

   （2）存数据

   （3）删除数据

   （4）清除数据

   （5）利用Map写购物车的程序

  ---

1.symbol()

        es6新增的基本数据: Symbol

        symbol()它是一个内置全局函数,生成一个独一无二的数据

        symbol的实例是唯一的不可变的, 用于确保对象的属性不重复

        使用方式 : 调用 Symbol( 标识 ) 函数 返回一个符号

例如：

            var a=new Number(200)
			var b=100
			b.age=20                //new Number(100) 
			console.log(b.age)      //new Number(100)

运行结果：

这里的a是引用数据、对象；b是基本数据

symbol()案例：

           	let s1=Symbol(100)
			let s2=Symbol(100)
			console.log(s1,s2,s1==s2)

运行结果：

举例：

//1.新的基本数据

            var s1=Symbol(100)

            var s2=Symbol(100)

            console.log(s1,s2,s1==s2,typeof(s1))

运行结果：

 

2.Map

        es6出的新数据容器技术

        map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

        map() 方法按照原始数组元素顺序依次处理元素。

注意： map() 不会对空数组进行检测。

注意： map() 不会改变原始数组。

数组的存取数据

            var  arr=[100,200]                //new Array(100,200)        //初始化数据

            arr.push(300)                       //添加

            var b=arr[0]                         //取数据

            arr.map(function(el){})         //取数据

（1）取数据

            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)

运行结果：

（2）存数据

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

            //存数据
			m1.set("life",1)
			m1.set("age",1)
			console.log(m1)
			console.log(m1.size)

运行结果：

 （3）删除数据

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

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

运行结果：

 （4）清除数据

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

           	m1.clear()
			console.log(m1)

运行结果：

 （5）利用Map写购物车的程序

                后端取出来的额数据 要先解析然后保存到前端的某个数据容器中

            var mycar = {
				data: new Map(),    //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: 1,
						title: "番茄炒蛋",
						price: 10,
						count: 1
					}, {
						id: 2,
						title: "烤鱼",
						price: 38,
						count: 1
					}, {
						id:3,
						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(3)
			mycar.add(2)
			mycar.add(2)
			mycar.add(1)
			mycar.add(1)
			mycar.add(2)

			mycar.jianshao(2)
			console.log(mycar.data)

			var re1 = mycar.total()
			console.log(re1)

			mycar.clear()
			console.log(mycar.data)

运行结果：