javascript(es6)Map对象基本概念以及在购物车订单中的应用

   日期:2020-08-26     浏览:150    评论:0    
核心提示:Map描述Map 对象保存键值对,并且能够记住键的原始插入顺序。任何值(对象或者原始值) 都可以作为一个键或一个值。 一个Map对象在迭代时会根据对象中元素的插入顺序来进行 — 一个 for…of 循环在每次迭代后会返回一个形式为[key,value]的数组。1 实例化 new Map([iterable]) let map=new Map(); let map=new Map([[name,jxw],[age,12]]);

Map描述

Map 对象保存键值对,并且能够记住键的原始插入顺序。任何值(对象或者原始值) 都可以作为一个键或一个值。
一个Map对象在迭代时会根据对象中元素的插入顺序来进行 — 一个 for…of 循环在每次迭代后会返回一个形式为[key,value]的数组。

1 实例化

        new Map([iterable])
			let map=new Map();
            let map=new Map([["name","jxw"],["age",12]]);
        Iterable 可以是一个数组或者其他 iterable 对象,其元素为键值对(两个元素的数组,
            例如: [[ 1, 'one' ],[ 2, 'two' ]])。 每个键值对都会添加到新的 Map。null 会被当做 undefined。
				//以下代码在node环境下执行
				>let map=new Map([["a",null],[]])
                undefined
                >map
                Map { 'a' => null, undefined => undefined }

2 Map=>Array

  1. […map]

  2. Array.from(map)

             1、2结果都为二维数组
    

3 注意事项

	1 任何值(对象或者原始值) 都可以作为一个键或一个值。
	2 set(key,val)   key值如果相同  后者覆盖前者
	3 keys() 、 values()  、 entries()方法都返回值为迭代器对象
	4 NaN 是与 NaN 相等的(虽然 NaN !== NaN),剩下所有其它的值是根据 === 运算符的结果判断是否相等。

4 迭代器遍历

let map=new Map([["name","jxw"],["age",12]]);
//迭代方法:
//1) 手动调用
			var iterator=map.entries();
            let item;
            while(!(item=iterator.next()).done){
                console.log(item.value)
            }
            //["name","jxw"]
            //["age",12]
//2)使用for-of协助
             var iterator=map.entries();
             for(let item of iterator){
                 console.log(item)
             }
             //["name","jxw"]
             //["age",12]
//3)使用for-of直接遍历可迭代的对象
            for(let item of map){
                console.log(item);
            }
            //["name","jxw"]
            //["age",12]
            //下面for-of更方便
            for (let [key, value] of map) {
	        console.log(key + " = " + value);
	        }
//4)使用forEach()
            map.forEach((value,key)=>{
            	console.log(key+":"+value)
            })

5 在购物车功能中的应用

		let shopcar={
                car:new Map(),
                添加商品或者商品数量
                add(line){
                    if(this.car.has(line.id)){
                        let value=this.car.get(line.id);
                        value.number+=1;
                    }else{
                        this.car.set(line.id,line);
                    }
                },
                //删除商品
                delete(id){
                    this.car.delete(id);
                },
                //商品总金额
                jiezhang(){
                    let allprice=0;
                    let keys=this.car.keys();//直接使用values()更快捷
                    for(let key of keys){
                            let value=this.car.get(key);
                            let price=(value.price)*(value.number);
                            allprice+=price;
                    }
                    console.log(allprice);
                }
            };

            shopcar.add({id:1,name:"可口可乐",price:2.5,number:1});
            shopcar.add({id:1,name:"可口可乐",price:2.5,number:1});
            shopcar.add({id:2,name:"牛奶",price:2.5,number:1});
            console.log(shopcar.car)
            //shopcar.delete(2);
            shopcar.jiezhang()//商品总金额
 
打赏
 本文转载自:网络 
所有权利归属于原作者,如文章来源标示错误或侵犯了您的权利请联系微信13520258486
更多>最近资讯中心
更多>最新资讯中心
0相关评论

推荐图文
推荐资讯中心
点击排行
最新信息
新手指南
采购商服务
供应商服务
交易安全
关注我们
手机网站:
新浪微博:
微信关注:

13520258486

周一至周五 9:00-18:00
(其他时间联系在线客服)

24小时在线客服