JS数组对象合并之后去重

我会带着你远行 2024-04-19 10:55 89阅读 0赞

需求：这是预提交所有挑拨设备页面，点击选择设备打开条件筛选设备。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsaXNhX2xpc2E_size_16_color_FFFFFF_t_70]  
在选择设备页面，选择出需要挑拨的设备，再把已经选择的设备批量添加到预备调拨的列表中，每次批量添加的时候，需要去掉之前已经选择过的设备，避免重复项。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsaXNhX2xpc2E_size_16_color_FFFFFF_t_70 1]

#### 解决思路一： ####

连个数组双重循环对比，如果出现相同设备ID就删除掉，然后再连接两个数组，但是觉得麻烦，所以不推荐。

#### 解决思路二： ####

先合两个数组，再对数组进行去重。

/* * 确认已选择放入预备调拨的设备列表 * */
        confirm () { 
        //连接两个数组
          let data = this.tableParams.totalData.concat(
            this.tableChoseParams
          );
          //删除重复选择的设备
          let hash = { }
          data = data.reduce((item, next) => { 
            if (!hash[next.id]) { 
              hash[next.id] = true
              item.push(next)
            }
            return item
          }, [])
          this.tableParams.totalData = data
          
    		//前端分页处理
          this.tableParams.data = this.tableParams.totalData.slice(0, 10)
          this.dialogDeviceVisible = false;
        }

*  concat() 方法用于连接两个或多个数组。

arrayObject.concat(arrayX,arrayX,......,arrayX)

该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

*  reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsaXNhX2xpc2E_size_16_color_FFFFFF_t_70 2]

reduce一些用法：

1.  常用于数组求和，求乘积
2.  计算数组中每个元素出现的次数
3.  对象里的属性求和
4.  数组去重

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsaXNhX2xpc2E_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/5c7fcffddca146fc848e09738b4f8496.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsaXNhX2xpc2E_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/a7309682a9734f1b991d3948f12fd05f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsaXNhX2xpc2E_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/4017b18816d64e7f8e5dd541e0db70e6.png