基于ts,vue的数组内部判重且去重

工作的新需求,需要进行以下的操作:

出货日期是一组查询条件,来源单类型是另一组查询条件,而来源单类型又有三组不同的数据来源,两组查询条件查询出来的数据为交集,存在相同的数据,要将查询出来的数据推入下面的表格中,且要对数据进行去重处理。找了很多种方法,都不是很适用,给个参考思路或许这些方法在别的地方可以适用吧:

1.使用 New Set()去重

this.tableData = [...new Set(this.tableData)] // 将this.tableData转为newset类型,会自动判重并去除,再转换为array类型赋值

存在问题: 没有自动去重;

问题原因:首先set的去重是针对于内存中的地址做比较的,且似乎对于结构比较复杂的array适用性不是很好 - -  

如果是结构比较简单的数组或者字符串去重,是个很好用的内置方法

2.转为字符串两层for循环作比较

            let temp = res.data.data.list // 查询出来的数据
            temp.forEach((item) => {
              this.tableData.push(item) // 遍历并推入
//我这里还有些别的操作,没有特殊操作的可以用 this.tableData.concat(...temp)
            })
            for (let i = 0; i < this.tableData.length; i++) {
              const list = [...this.tableData] // 我这边的数据只有一层,进行深拷贝
              for (let a = i + 1; a < list.length; a++) {
//转为string做比较 
                if (JSON.toString(this.tableData[i]) === JSON.toString(this.tableData[a])){
//如果存在就踢出去
                  this.tableData.splice(a,1)
                }
              }
            }

先说结论: 可以简单达成array去重

再说问题: 如果后端传回的两条数据的键值对是相同的但是由于网络或者后台接口等问题返回的键值对排序顺序不同,也会被判定为是不相同的,所以对我的需求来说也还是差一点

最后解决方式: 让后端同事传回了三个组合起来可以确定唯一性的键值对用来做判断。。。

但是突然发现array去重觉得是一个很简单的问题,但是解决方案确实是比较一对一的,通用性不是太强,后续有新的使用方式继续补充

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在Vue中对数组对象进行去,可以使用以下方法: 引用:一般的数组可以直接用 new Set() 方法即可,但是数组对象的话,比较复杂,不能直接用,我们可以采取间接的方法来去。 引用:利用双for循环,然后splice去。可以定义一个函数unique(arr),通过两个for循环来遍历数组,如果发现相同的元素,则使用splice方法删除一个元素,并将下标递减。最后返回去后的数组。 引用:利用ES6的Set去。可以定义一个函数unique(arr),通过将数组转换为Set,然后再将Set转换为数组,即可实现去。 在Vue中,你可以选择其中一种方法来对数组对象进行去操作。例如,使用双for循环的方法: ``` function unique(arr) { for (var i = 0; i < arr.length; i++) { for (var j = i + 1; j < arr.length; j++) { if (arr[i == arr[j]) { arr.splice(j, 1); j--; } } } return arr; } ``` 这个函数将接受一个数组作为参数,并返回去后的数组。你可以调用这个函数来实现Vue中的数组对象去操作。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [数组对象去(vue)](https://blog.csdn.net/m0_58259728/article/details/120197737)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [vue数组 数组对象去](https://blog.csdn.net/z1010017573/article/details/110918943)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值