多个相同元素的数据合并

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

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

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

 

### JavaScript 中合并数组或其他数据结构中的重复元素 在 JavaScript 中处理数组或复杂数据结构时,可以通过多种方法来识别并合并其中的重复项。对于简单的数组而言,可以利用 `Set` 对象去除重复值;而对于更复杂的对象数组,则可能需要自定义逻辑来进行比较。 #### 使用 Set 去除简单类型的重复项 当面对的是由基本类型(如字符串、数字)组的数组时,最简便的方式就是借助 ES6 的新特性——`Set` 来实现去重: ```javascript const numbers = [1, 2, 3, 4, 5, 3, 2]; const uniqueNumbers = [...new Set(numbers)]; console.log(uniqueNumbers); // 输出: [1, 2, 3, 4, 5] ``` 这种方法的时间复杂度接近于线性时间 O(n),因为内部操作主要依赖哈希表机制[^1]。 #### 合并与计数相同属性的对象 如果目标是一个包含多个具有特定键名的对象数组,并希望不仅移除完全相同的条目还统计其出现次数的话,那么就需要编写稍微复杂的函数了: ```javascript function groupAndCountByProperty(arrayOfObjects, key) { const result = arrayOfObjects.reduce((acc, obj) => { acc[obj[key]] = (acc[obj[key]] || 0) + 1; return acc; }, {}); return Object.keys(result).map(keyValue => ({ [key]: keyValue, count: result[keyValue], })); } // 测试案例 const items = [ { id: 'apple', name: 'Apple' }, { id: 'banana', name: 'Banana' }, { id: 'apple', name: 'Apple' } ]; console.log(groupAndCountByProperty(items, "id")); /* 结果将是: [ {"id": "apple", "count": 2}, {"id": "banana", "count": 1} ] */ ``` 这段代码通过遍历输入数组并将每个项目的指定字段作为索引来构建一个新的映射关系,在此过程中完数量累加工作。最后再将这个映射转换回易于理解的形式返回给调用者。 #### 复杂情况下的深拷贝与对比 针对更加复杂的数据结构,比如嵌套多层的对象树形结构,通常会涉及到深层次节点之间的差异检测以及更新策略的选择。Vue.js 的虚拟DOM算法提供了一个很好的例子:它采用了一种高效的diffing技术用于最小化实际DOM变动量,从而提高了渲染效率。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值