vue数组对象去重
vue数组对象合并去重;Es6的Map
·
vue项目中有很多场景是关于数组对象合并、合并去重的,下面这个方法是其中一种,欢迎参考
1.定义两个数组对象,两个数组中的对象都有唯一标识(id)
var arr1 = [
{ id: "1", name: "小明", age: 12, fav: "篮球" },
{ id: "2", name: "小红", age: 16, fav: "芭蕾" },
{ id: "3", name: "小张", age: 13, fav: "游泳" }
];
var arr2 = [
{ id: "1", name: "小明", age: 12, fav: "篮球" },
{ id: "4", name: "小李", age: 16, fav: "排球" },
{ id: "3", name: "小张", age: 13, fav: "游泳" },
{ id: "5", name: "小王", age: 15, fav: "唱歌" }
];
2.定义去重方法
methods:{
fn2(arr) {
const res = new Map();
return arr.filter(arr => !res.has(arr.id) && res.set(arr.id, arr.id));
},
}
3.合并两个数组,合并数组的方法有很多,不一一列举,此处采用了扩展运算符。将合并后的数组去重
let newArr = [...arr1, ...arr2];
console.log(newArr);
// [
// { id: "1", name: "小明", age: 12, fav: "篮球" },
// { id: "2", name: "小红", age: 16, fav: "芭蕾" },
// { id: "3", name: "小张", age: 13, fav: "游泳" },
// { id: "1", name: "小明", age: 12, fav: "篮球" },
// { id: "4", name: "小李", age: 16, fav: "排球" },
// { id: "3", name: "小张", age: 13, fav: "游泳" },
// { id: "5", name: "小王", age: 15, fav: "唱歌" }
// ];
let uniqueArr = this.fn2(newArr)
console.log(uniqueArr);
// [
// { id: "1", name: "小明", age: 12, fav: "篮球" },
// { id: "2", name: "小红", age: 16, fav: "芭蕾" },
// { id: "3", name: "小张", age: 13, fav: "游泳" },
// { id: "4", name: "小李", age: 16, fav: "排球" },
// { id: "5", name: "小王", age: 15, fav: "唱歌" }
// ];
此时已经成功将数组对象去重
上面的去重方法中使用到了ES6的数据结构Map。它类似于对象,也是键值对的集合,但是键的范围相对比较广泛。其中has和set都是Map的方法
(1)set
set方法是设置key和value,然后返回整个Map结构。如果key不存在,会生成新的,存在则会更新
let obj =new Map()
obj.set("name", "小明")
obj.set("age",12)
(2)has
has方法返回一个布尔值,表示某个键是否存在
let obj =new Map()
obj.set("name", "小明")
obj.set("age",12)
obj.has("name") //true
obj.has("fav") //false
上面的数组去重用到了Map两个方法就介绍到这里
更多推荐
已为社区贡献3条内容
所有评论(0)