Vue array object deduplication (remove the previous data, remove the after data)

foreword

• Data deduplication is a kind of processing and use of data. For the front end, sometimes it is necessary to operate the data by itself to simplify the operation.

• In the case of deduplication in an array, keep the data added for the first time (after deduplication), and keep the data added for the last time (before deduplication)

• Retaining the first data is to judge whether the id of the next added data exists in the array, and if it exists, it is filtered and discarded

• To keep the last added data, it is to judge the existence of the array at the time of joining and to add the data id, and delete the data in the array

• No matter what the situation is, it can be realized through the array method, but it is recommended to use well-written, not easy to make mistakes, and the code is concise

scenes to be used

1. Keep the data added for the first time, add duplicate data after deduplication

• When adding the same data or type, you only want to keep the data added for the first time, and you will be prompted later

2. Keep the last added data, remove the previous added duplicate data

• Similar to the answer to an exam question, it is impossible to judge which question it chooses first, but it can overwrite the same data in the front with the data selected later according to the id

Code

Data Format

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

1. Keep the data added for the first time, add duplicate data after deduplication - note that id is your data format (change according to actual data)

// 根据唯一标识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))
        },

transfer

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

2. Keep the last added data and remove the duplicate data added earlier - the second parameter is your data id (calling this method is to pass in '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;
                }, [])
},

transfer

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

---

Summarize:

After this process, I believe you also have a preliminary deep impression on the deduplication of Vue array objects (remove the previous data, remove the data after removal), but the situation we encounter in actual development must be different, so we have to Understand its principle, and it is always the same. Come on, hit the workers!

Please point out any deficiencies, thank you -- Fengguowuhen