Vue數組去重的多方面探究

一、使用Set數據結構

Set是ES6引入的一種新的數據結構，它類似於數組，但成員的值都是唯一的，沒有重複的值。我們可以利用Set的這個特性來做Vue數組去重。

let arr = [1, 2, 2, 3, 4, 4, 5];
let uniqueArr = [...new Set(arr)];
console.log(uniqueArr);
// output: [1, 2, 3, 4, 5]

以上代碼中，我們首先聲明了一個普通的數組arr，然後利用ES6的擴展運算符(…)和Set的構造函數來去重，最終得到一個新數組uniqueArr。

當然，這種方法也適用於對象數組去重，只需要在Set構造函數中傳入一個回調函數即可。

let arr = [{name: 'Jack'}, {name: 'Rose'}, {name: 'Jack'}];
let uniqueArr = Array.from(new Set(arr.map(item => item.name))).map(name => {
  return arr.find(item => item.name === name);
});
console.log(uniqueArr);
// output: [{name: 'Jack'}, {name: 'Rose'}]

以上代碼中，我們利用了Array.from()和map()將對象數組進行轉換，然後進行去重。

二、使用for循環

除了ES6新特性之外，我們還可以使用老牌的for循環進行Vue數組去重。

let arr = [1, 2, 2, 3, 4, 4, 5];
for (let i = 0; i < arr.length; i++) {
  for (let j = i + 1; j < arr.length; j++) {
    if (arr[i] === arr[j]) {
      arr.splice(j, 1);
      j--;
    }
  }
}
console.log(arr);
// output: [1, 2, 3, 4, 5]

以上代碼中，我們使用了兩層循環遍曆數組，然後進行比對、刪除。這種方法適用於較小的數組，但在大型數組上效率會比較低。

三、使用filter方法

除了for循環之外，Vue數組去重還可以使用filter方法來進行篩選。

let arr = [1, 2, 2, 3, 4, 4, 5];
let uniqueArr = arr.filter((item, index) => {
  return arr.indexOf(item) === index;
});
console.log(uniqueArr);
// output: [1, 2, 3, 4, 5]

以上代碼中，我們使用了filter方法和indexOf方法來進行篩選和比對。由於indexOf方法返回的是第一個元素的下標，所以只要下標不等於當前下標，就說明出現了重複元素。

四、使用Map數據結構

除了Set之外，ES6還引入了另一種新的數據結構Map，它類似於對象，但鍵可以是任意類型（包括對象）。我們可以利用Map的這個特性來做Vue數組去重。

let arr = [1, 2, 2, 3, 4, 4, 5];
let uniqueArr = [];
let map = new Map();
for (let i = 0; i < arr.length; i++) {
  if (!map.has(arr[i])) {
    map.set(arr[i], true);
    uniqueArr.push(arr[i]);
  }
}
console.log(uniqueArr);
// output: [1, 2, 3, 4, 5]

以上代碼中，我們聲明了一個空數組uniqueArr和一個Map對象map。然後遍曆數組，如果當前元素不在Map中，就將其添加到Map中，並將該元素 push 到uniqueArr中。

五、總結

以上就是Vue數組去重的多種方法，包括使用Set/Map數據結構、for循環、filter方法等。不同的方法在不同的場景下具有不同的優缺點，我們需要根據實際情況進行選擇。同時，我們還可以根據具體需要進行自定義的數組去重方法。