一个常见的需求就是，对于一些能够添加数据的表格，当我们往里面添加数据的时候往往会校验此时表格中是否与我们选中的数据相同。比如说：添加物资，我们判断是不是相同数据大多数时候是根据物资的ID去辨别的，即是说当我们选中的物资他的ID与表格中存在的物资ID相同的时候我们就需要告知用户他已经添加过这条物资了，并且自动将这条物资过滤掉，只将不重复的物资添加进表格。这样的功能其实也就是一个对象数组的去重问题。
举个栗子吧：
data(){
return{
tableList:[ //这是表格中已有的数据
{id:'111',num:0,title:'苹果'},
{id:'222',num:4,title:'梨'},
{id:'333',num:6,title:'香蕉'}
]
selectList:[ //这是从物资中选择的数据
{id:'111',num:0,title:'苹果'},
{id:'444',num:0,title:'西瓜'},
{id:'666',num:0,title:'榴莲'}
]
}
},
methods:{
unique(){
//创建一个表格数据ID的数组
const arr1 = this.tableList.map(row => {
return {
id: row.id
}
})
//变量用于提示框使用
let a = true
this.selectList.forEach(row => {
//遍历选择的数据，将遍历出的id作为对象属性保存
const obj = {
id: row.id
}
//将从表格中取出来的ID对象数组拿出来，在数组里查找是否包含当前对象
//因为对象无法直接比较，所以要将对象序列化 ，JSON.stringify(obj)
const compRes = JSON.stringify(arr1).indexOf(JSON.stringify(obj))
//如果结果===-1，就说明没有重复值，就将当前正在遍历的值push进表格中，否则就有重复值
if (compRes === -1) {
this.tableList.push(row)
} else {
//如果有重复值
a = false
}
})
//如果有重复就提示用户
if (a === false) {
this.$message({
message: '不允许重复添加相同物资',
type: 'warning'
})
}
}
}
解题思路：
大致思路呢？就是：
- 首先要知道当前表格中存在哪些数据，简言之，就是存在哪些ID
- 将这些ID单独存成一个对象数组[{id:'111'},{id:'222'}]这样的
- 然后开始遍历选择的数据，遍历时将ID拿出来存成和上面一样的结构，拟一个对象，将ID存进去，此时我们就拿到一个标识，可以去数组里查找的标识
- 将由表格得来的ID对象数组拿过来在里面找是否有和当前循环体相同对象的数据，如果没有就将当前row放进表格中，否则就....
这个解题的关键在于不能去动数组本身，而是从数组中拿一些东西出来去组成新的元素再去比较！
顺便分享一下另一种情况，就是只保留不重复的数据，简简单单，就一行代码
let result=this.tableList.filter(row=>!this.selectList.some(item=>item.id===row.id))
console.log(result) //[{id:'222',num:4,title:'梨'},{id:'333',num:6,title:'香蕉'},{id:'444',num:0,title:'西瓜'},{id:'666',num:0,title:'榴莲'}]
就这就这！！！
