# [JavaScript] 解析：取得不重複陣列

###### tags: `JavaScript`

### 方法：使用new Set取得不重複資料

Set類似Array, 但其中元素的值都會是**唯一不重複**的
Set甚至可以搭配Array使用，例如將Array的值unique

const arr = [1, 2, 3, 4, 5, 5, 5]
const setArr2 = new Set(arr)
for (let i of setArr2) { 
   console.log(i)
}
// 1 2 3 4 5

var array = [1, 2, 2, 3, 3, 3];
var result = Array.from(new Set(array));
console.log(result); // [1, 2, 3]

var array = [{碗{....}}, {盤{....}} ,{碗{....}}];
var result = Array.from(new Set(array));
console.log(result); // ['碗', '盤'] 字串的形式

> 注意：如果是以陣列包物件的形式進行new Set，回傳的雖然也是陣列的形式，不過裡頭會是字串的形式呈現，而非是陣列包物件。

目的：透過API取得的未整理資料，因為要在select上顯示各個區域的縣市，將經由new Set公式取得不重複的縣市，順利顯示在選單上，供使用者選取特定縣市。

data: {
    datas: [],
    locations: [],
},
    
    
  methods: {
    getUniqueList() {
        const newlocations = new Set(); // 使用 ES6 中的 set() 取出唯一值
        this.data.forEach((item, i) => { // 取出Region全部的值，並回傳至locations
            newlocations.add(item.Region)
        })
        this.locations = Array.from(newlocations); //https://guahsu.io/2017/06/JavaScript-Duplicates-Array/
    } //讓set與array.from公式取出不重複的值
    //改名稱兩個都一樣分不清楚
  },

* 新增一個變數newlocations並帶入公式new Set
* 此時我們需要datas裡的區域資料，因此用forEach取得全部的區域，當然forEach是可以將取得的資料做下一步動作
* 這時是關鍵，我們用add將取得區域資料arrary放入變數newlocations(new Set裡面)
* 此時我們要將newlocation利用array.from轉成array匯入到data裡的location變數
* 最後location裡就是區域名稱的唯一值，可以大方的直接顯示在html頁面
* 可得知這裡使用new Set 、forEach、array.from 、 add()四個公式傳入，因此會有點混亂。

> 補充：new Set與add是同一組公式
> https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Set/add