时间戳

首页 > 解决方案 > 使用 set 存储唯一值但是如果我的数组中有更多数据怎么办

vue.js - 使用 set 存储唯一值但是如果我的数组中有更多数据怎么办

问题描述

我正在阅读我可以使用“SET”作为删除数组中重复值的解决方案。这适用于一个基本示例，但是如果我的数组中有更多数据并且还希望在我的 vue 模型中找到这些数据而不是外部 const，我该如何使其工作。我有 2 个用户拥有牙医职位，它应该带回 2 个唯一值而不是全部 3 个，我错过了什么？

//const numbers = [2, 3, 4, 4, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 5, 32, 3, 4, 5]
  const People =[{Name:"Adam", Age:"22",Job:"Dentist"},{Name:"Bill", Age:"32",Job:"Teacher"},{Name:"Peter", Age:"42",Job:"Dentist"}]
new Vue({
  el: "#app",
  data: {
  
    numbers:[2, 3, 4, 4, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 5, 32, 3, 4, 5],
    People:[{Name:"Adam", Age:"22",Job:"Dentist"},{Name:"Bill", Age:"32",Job:"Teacher"},{Name:"Peter", Age:"42",Job:"Dentist"}]
    
  },
  methods: {
  	toggle: function(){
    alert("this");
   console.log([new Set(People)]);
   
    },
    mounted:function(){
    this.toggle();
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h2>Todos:</h2>
  <button v-on:click="toggle">
  Click
  </button>
</div>

标签： vue.js

解决方案

从每个对象中提取Job属性然后应用Set，即[...new Set(People.map(p => p.Job))]

const People =[{Name:"Adam", Age:"22",Job:"Dentist"},{Name:"Bill", Age:"32",Job:"Teacher"},{Name:"Peter", Age:"42",Job:"Dentist"}]

uniqueJobs = [...new Set(People.map(p => p.Job))]

console.log(uniqueJobs)

演示vue.js：

new Vue({
  el: "#app",
  data: {
    numbers:[2, 3, 4, 4, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 5, 32, 3, 4, 5],
    People:[{Name:"Adam", Age:"22",Job:"Dentist"},{Name:"Bill", Age:"32",Job:"Teacher"},{Name:"Peter", Age:"42",Job:"Dentist"}]
  },
  methods: {
    toggle: function(){
      console.log([...new Set(this.People.map(p => p.Job))]);
    },
    mounted:function(){
      this.toggle();
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h2>Todos:</h2>
  <button v-on:click="toggle">
  Click
  </button>
</div>

推荐阅读