Vue 数组对象去重(去掉之前数据,去掉之后数据)

前言

  • 数据去重是对数据的一种处理使用,对于前端来说有时候需要自己操作数据来简化操作

  • 数组去重情况,保留第一次加入数据(去重后面),保留最后一次加入数据(去重前面)

  • 保留第一次的数据,是判断下一次加入数据的id在数组是否存在,存在过滤抛弃

  • 保留最后一次加入数据,是判断加入时候数组存在要加入数据id,把数组里面数据删除

  • 不管是哪一种情况都是通过数组方法可以实现的,但建议用写好的,不容易出错,代码简洁

使用场景

1.保留第一次加入数据,去重后面加入重复数据

  • 添加同一种数据或类型时,只希望保留第一次加入数据,后面提示信息

2.保留最后一次加入数据,去除掉前面加入重复数据

  • 类似考试题目答案,无法判断它先选哪一题,但是可以根据id把后面选中数据覆盖前面相同数据

代码实现

数据格式

data () {
   return {
      ceshi:[
        {
           id:1,
           name:'测试1'
        },
        {
           id:2,
           name:'测试二'
        }
      ]
   }
}

1.保留第一次加入数据,去重后面加入重复数据-注意id是你的数据格式(根据实际数据更改)

// 根据唯一标识id来对数组进行过滤
unique(arr) {
            const res = new Map(); //定义常量 res,值为一个Map对象实例
            //返回arr数组过滤后的结果,结果为一个数组   过滤条件是,如果res中没有某个键,就设置这                  个键的值为1
            return arr.filter((arr) => !res.has(arr.id) && res.set(arr.id, 1))
        },

调用

// 加入数据
this.ceshi.push('数据')
// 处理数据-每加入一次处理一次
this.ceshi = this.unique(this.ceshi)

2.保留最后一次加入数据,去除掉前面加入重复数据-第二个参数是你数据id(调用这个方法是传入'id')

arrayUnique(arr, name) {
                let hash = {}
                return arr.reduce((acc, cru, index) => {
                    if (!hash[cru[name]]) {
                        hash[cru[name]] = {
                            index: acc.length
                        }
                        acc.push(cru)
                    } else {
                        acc.splice(hash[cru[name]]['index'], 1, cru)
                    }
                    return acc;
                }, [])
},

调用

// 加入数据
this.ceshi.push('数据')
// 处理数据-每加入一次处理一次
// 这个传入实际情况真实数据标识比如'id'字符串即可(name是形参可以随意写)
this.ceshi = this.arrayUnique(this.ceshi,'id')

总结:

经过这一趟流程下来相信你也对 Vue 数组对象去重(去掉之前数据,去掉之后数据) 有了初步的深刻印象,但在实际开发中我 们遇到的情况肯定是不一样的,所以我们要理解它的原理,万变不离其宗。加油,打工人!

什么不足的地方请大家指出谢谢 -- 風过无痕

你可能感兴趣的:(实际开发-问题解决,前端,javascript,数组去重,保留情况)