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


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

    […map]

    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()//商品总金额

原创:https://www.panoramacn.com
源码网提供WordPress源码,帝国CMS源码discuz源码,微信小程序,小说源码,杰奇源码,thinkphp源码,ecshop模板源码,微擎模板源码,dede源码,织梦源码等。

专业搭建小说网站,小说程序,杰奇系列,微信小说系列,app系列小说

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

免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。

您必须遵守我们的协议,如果您下载了该资源行为将被视为对《免责声明》全部内容的认可-> 联系客服 投诉资源
www.panoramacn.com资源全部来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系站长并出示版权证明以便删除。 敬请谅解! 侵权删帖/违法举报/投稿等事物联系邮箱:2640602276@qq.com
未经允许不得转载:书荒源码源码网每日更新网站源码模板! » javascript(es6)Map对象基本概念以及在购物车订单中的应用
关注我们小说电影免费看
关注我们,获取更多的全网素材资源,有趣有料!
120000+人已关注
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

您的打赏就是我分享的动力!

支付宝扫一扫打赏

微信扫一扫打赏