前言

前端ES6标准是在2015年6月份发布的,基本上所有的主流浏览器都支持ES6了,但是很多同事包括本人自己都不太会自己主动去使用ES6.在全球环境变得恶劣,国际开始着手低碳环保,作为程序员的我们,优化代码,节约性能从小事做起,为国家低碳行动贡献绵薄之力.

低碳之路启程

ES6中两个很有用但是很少看见使用的Set Map属性,首先先带大家熟悉下这两个方法的属性

Set

• Set是一个构造函数,可以用它生成一个类似数组的结构数据,但是它的成员值都是唯一的,没有重复值,那么我们可以用它做个简单的数组去重,使用方法很简单,同样Set还提供了正删改查等方法,作为一个类数组数据接口,很能很好的与数组转换,使用起来非常方便,具体的使用方法就不在这里一一讲解,不了解的可以去看看W3c文档.下面我们就来探索下Set在业务代码中能够如何很好的使用

如何使用

Set是一个很好的去重方法,避免了各种循环,Set数据能很好的与数组数据进行转换,这让去重节省了很多性能

var set = new Set([1,1,2,2,3,4,5,5])
// Set(5) {1, 2, 3, 4, 5}
var arr = [...set];
// (5) [1, 2, 3, 4, 5]

Map

• Map更像是一个对象,用中括号包裹,由键值对组成,与对象不同的是对象的键只能用字符串类型声明,而Map对象的key可以用任何类型,基础类型应用类型已经ES6支持的symbol,同样Map对象也有支持的增删改查方法,相比较对象方法会更加全面,同样这里不介绍具体使用方法,需要了解的可以去看看W3c文档

如何使用

这里结合业务举个例子

工厂需要对商品出库做一个统计,出库以箱为单位,每箱可以随机搭配不同的商品,商品数量也是随机的 比如有A B C D E F...很多类商品,可以每个箱子可以装100件商品,可以是5件A 10件B 8件C等等,同样也可以将已装好的箱子里的商品添加到其他箱里

根据上面的业务需求,我们可以将每个每个箱子作为一个数组,数组里每个商品就是一个对象,对象里描述的是商品的属性已经唯一id标识,当我们创建一个箱子,向箱子里添加商品时,需要判断箱子里是否已经存在这个商品,如果存在,找到这个对象,将数量加一,同样如果将箱子1里的一个商品转移到箱子2里,需要在箱子1里找到这个商品,计算数量,再到箱子2里找到这商品计算数量,这么操作每次的增加商品需要进行一次遍历,如果将一个箱子里的商品转移到另一个箱子里,需要各进行一次计算,如果商品数量很多的情况下,这些计算将是巨大的

如果使用Map对象,将箱子作为一个Map对象,将商品唯一标识Id作为键的话,每次添加商品只需要.has .set 修改商品.get .set就可以了,完全 不需要遍历数组就可以做到,即节省性能,又优化了操作时间,两全其美!