vue根据数组对象中某个唯一标识去重

Vue中数组去重技巧

最新推荐文章于 2023-11-14 15:42:30 发布

转载最新推荐文章于 2023-11-14 15:42:30 发布 · 749 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/leiting/p/9925665.html

文章标签：

#javascript #前端 #ViewUI

本文探讨了在Vue环境中，由于观察者模式的影响，常规数组去重方法失效的问题，并提供了一种基于Map对象的去重解决方案，适用于Vue项目中数组元素的高效过滤。

由于在vue中，会自动在数组和对象中加入_obser__观察者模式的一些属性，所以直接用数组的filter去重（下面这种），indexOf不能准确识别

var arr = [1, 2, 2, 3, 4, 5, 5, 6, 7, 7];
var arr2 = arr.filter(function(x, index,self) {
return self.indexOf(x)===index;
}); 
console.log(arr2); //[1, 2, 3, 4, 5, 6 ,7]

或者用ES6的一句简单去重

var nerarr = Array.from(new Set(arr))

只能用于普通的数组去重，在vue中这个不管用,

vue中可以，写一个去重的方法

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

使用