vue根据选择的对象替换数组对象中相同的属性对象，不存在时则在数组中新增一个对象

遇见了一个比较有意思的问题 ：选择的对象替换数组对象中相同的对象，不存在时则在数组中新增一个对象。

开始时把问题想得太简单了 准备用map（）或 foreach（）加上判断条件去替换或新增，结果就是 数组中不存在相同属性值的对象时，会根据数组的长度循环添加相同的对象。

百度发现别人是这样做的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
/**

 * 判断数组对象中是否有某个对象，有则替换无则添加
 * @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
}

使用：this.tableArr = formateArrObjData(this.tableArr, tempObj, tempId)
// 这里的源数组如果是一维的，可以用扩展运算符、Object.assign()拷贝

当然我是个杠精，于是乎自己写了个：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//数组如下
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);
    }
    
}

暂时看来还能用，不知道两个比较起来有没有什么性能上的差异，大家就选择性的用吧！如果有问题欢迎留言…