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

时间:2020-8-26 作者:admin


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()//商品总金额
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。