Vue数组去重的多方面探究

小蓝 • 2024-11-19 00:40 • 编程

一、使用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方法等。不同的方法在不同的场景下具有不同的优缺点，我们需要根据实际情况进行选择。同时，我们还可以根据具体需要进行自定义的数组去重方法。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/158213.html