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两个方法就介绍到这里

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐