需求
- 将数据处理后产生的code相同的数据去除后返回给后端
解决
- 处理后产生的重复数据
// 处理后产生的重复数据
let tableList = [
{ code: '001', name: 'aaa', age: '18', other: 'abc' },
{ code: '002', name: 'bdfd', age: '28', other: 'abc' },
{ code: '002', name: 'aasdf', age: '98', other: 'abc' },
{ code: '003', name: 'aadfa', age: '26', other: 'abc' },
{ code: '004', name: 'afsa', age: '18', other: 'abc' }
]
- 封装去重方法
has
方法可以判断Map对象中是否存在指定元素,有则返回true,否则返回falseset
方法可以向Map对象添加新元素map.set(key, value)
values
方法可以返回Map对象值的遍历器对象- 使用
for-of
循环
// 封装去重方法
function removalRepeat (arr) {
let map = new Map()
for (let i of arr) {
if (!map.has(i.code)) {
map.set(i.code, i)
}
}
arr = [...map.values()]
console.log(arr)
}
也可以将唯一值作为map的键(这里的code),键不会重复
set (key,value) 设置 如果之前有过key值就修改,没有就增加 返回新的map实例
// 封装去重方法
function removalRepeat (arr) {
let map = new Map()
for (let i of arr) {
map.set(i.code, i)
}
arr = [...map.values()]
console.log(arr)
}
- 结果
removalRepeat(tableList)
// 打印的数据
[
{ code: '001', name: 'aaa', age: '18', other: 'abc' },
{ code: '002', name: 'bdfd', age: '28', other: 'abc' },
{ code: '003', name: 'aadfa', age: '26', other: 'abc' },
{ code: '004', name: 'afsa', age: '18', other: 'abc' }
]
- 在Vue中使用
/**
* @description:
* @param {Array} arr 要去重的数组
* @param {String} uniqueKey 唯一标识
* @return: arr 去重后的数组
*/
// 封装去重方法
removalRepeat (arr, uniqueKey) {
let map = new Map()
for (let i of arr) {
if (!map.has(i[uniqueKey])) {
map.set(i[uniqueKey], i)
}
}
arr = [...map.values()]
// console.log(arr)
return arr
}