【ES6】使用map针对多个相同元素的数据合并

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第26天，点击查看活动详情

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

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

按照以前的思路，可能会将数据循环之后，将坐标单独提炼出来进行循环判断，然后写三五个 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]);
        }
      }

总结

这是以前还不理解ES6时候写的一篇文章，主要是针对map的新知识点做一个归纳。