vue根据选择的对象替换数组对象中相同的属性对象，不存在时则在数组中新增
⼀个对象
vue根据选择的对象替换数组对象中相同的属性对象，不存在时则在数组中新增⼀个对象
项⽬中遇见了⼀个⽐较有意思的问题 ：选择的对象替换数组对象中相同的对象，不存在时则在数组中新增⼀个对象。
开始时把问题想得太简单了 准备⽤map（）或 foreach（）加上判断条件去替换或新增，结果就是 数组中不存在相同属性值的对象时，会根据数组的长度循环添加相同的对象。
百度发现别⼈是这样做的：
/**
* 判断数组对象中是否有某个对象，有则替换⽆则添加
* @param {*} initialArr 源数组
* @param {*} obj 判定的对象
* @param {*} pro 对象中的某个属性名（唯⼀，通常为id）
*/
export const formateArrObjData=(initialArr, obj, pro)=>{
// 判定数据是否为数组
if(!(initialArr instanceof Array)){
return'请传⼊正确格式的数组'
}
// 判定数据是否为对象
if(!(obj instanceof Object)){
return'请传⼊正确格式的对象'
}
if(!pro){
return'请传⼊正确格式的属性名'
}
let index = initialArr.findIndex((val)=> val[pro]=== obj[pro])
// 如果有就替换没有就添加
if(initialArr.findIndex((val)=> val[pro]=== obj[pro])!==-1){
tempArr.splice(index,1, obj);
}else{
tempArr.push(obj);
}
return tempArr
typeof array
}
使⽤：this.tableArr =formateArrObjData(this.tableArr, tempObj, tempId)
// 这⾥的源数组如果是⼀维的，可以⽤扩展运算符、Object.assign()拷贝
当然我是个杠精，于是乎⾃⼰写了个：
//数组如下
this.arr =[{name='a',value='1'},{name='b',value='2'}]
//调⽤选中⽅法
this.clickOn({name='a',value='2'})
//选中⽅法
clickOn(obj){
if(this.arr.length>0){
/
/find⽅法查询是否存在相同的数据
let isAdd =this.arr.find(item =>{
if(item.name == obj.name){
//存在相同的数据调⽤vue的$set⽅法替换value值
this.$set(item,'value', obj.val)
//数组中的元素在测试条件时返回 true 时, find()返回符合条件的元素
return true
}
//如果不存在find⽅法会返回⼀个undefined
})
// 判断isAdd是否为undefined
if(typeof(isAdd)=="undefined"){
//当isAdd为undefined添加新的对象到数组中
this.arr.push(obj);
}
}
暂时看来还能⽤，不知道两个⽐较起来有没有什么性能上的差异，⼤家就选择性的⽤吧！如果有问题欢迎留⾔…

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。