vue 实现数组对象去重

<template>
  <div class="hello">
    <div>{{daxian}}</div>
    <el-button type="primary" size="medium" @click="quChong()">点击</el-button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
    return{
     arr:[
      {
      id: 1,
      name: '逆天邪神'
     },
     {
      id: 1,
      name: '魁拔'
     },
     {
      id: 2,
      name: '魁拔'
     },
     {
      id: 3,
      name: '大耳朵图图'
     }
    ]
    }
  },
  computed:{
    daxian(){
     const res = new Map();
    return this.arr.filter((arr) => !res.has(arr.id) && res.set(arr.id, 1));   //过滤
    }
  },
  methods:{
    quChong(){
      console.log(this.arr,'原本的数组');
      console.log('————————————————————————————————————');
     console.log(this.daxian,'过滤的数组');
      
      
    }
  }

}
</script>

<style scoped lang="scss">
.hello{
  width: 100vw;
  height: 100vh;
  background: black;
}
</style>

运行效果