多个相同元素的数据合并

最近的项目需求是要将定位周边的拍卖数据,拍卖数据会有“一拍”、“二拍”等,但都是同一条数据,也就是坐标会相同,此时在地图上添加坐标点时,会出现覆盖的情况,也就是一个坐标点下面其实是有两条数据的。

此时就需要在坐标点上标上对应的数字表现出来(如图),但后台返回的数据都是单独的,并没有将坐标相同的整合返回到前端。

按照以前的思路,可能会将数据循环之后,将坐标单独提炼出来进行循环判断,然后写三五个 for 循环和 if 语句。

在ES6中可以使用Map进行数据的合并,也是将坐标单独提炼出来,不过是将坐标用作KEY,其他数据用作VALUE。

      let opt = [
        {id: 1, geoPoint: {lon: 121.12, lat: 31.31}},
        {id: 2, geoPoint: {lon: 121.13, lat: 31.32}},
        {id: 3, geoPoint: {lon: 121.14, lat: 31.33}},
        {id: 4, geoPoint: {lon: 121.13, lat: 31.32}}
      ]
      let map = new Map();
      for (let item of opt) {
        let { geoPoint } = item;
        let _item = [];
        if (map.has(geoPoint)) {
          _item = map.get(geoPoint);
          map.set(geoPoint, [..._item, item]);
        } else {
          map.set(geoPoint, [item]);
        }
      }

但是这样返回的数据如下:并没有将坐标一致的放在一起

这个时候就涉及到Map的一个知识点,使用对象作为KEY,表面是针对同一个键,但实际上这是两个值,内存地址是不一样的。

更改代码如下:将存储的对象转换成字符串

      let opt = [
        {id: 1, geoPoint: {lon: 121.12, lat: 31.31}},
        {id: 2, geoPoint: {lon: 121.13, lat: 31.32}},
        {id: 3, geoPoint: {lon: 121.14, lat: 31.33}},
        {id: 4, geoPoint: {lon: 121.13, lat: 31.32}}
      ]
      let map = new Map();
      for (let item of opt) {
        let { geoPoint } = item;
        let _item = [];
        if (map.has(JSON.stringify(geoPoint))) {
          _item = map.get(JSON.stringify(geoPoint));
          map.set(JSON.stringify(geoPoint), [..._item, item]);
        } else {
          map.set(JSON.stringify(geoPoint), [item]);
        }
      }

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值