vue前端循环中去重的重要性，以及去重方法

 最近在做项目的时候发生了一个问题，那就是代码运行很慢，我们检查了很长时间，结果发现是后端在处理数据的时候使用了循环方法，循环没毛病，有毛病的是数据没有去重，那么这个数据有会重复的被循环被处理，从而拖慢了程序的运行速度。

我也检查了一下前端的代码，你看看咋地，前端的去重也很重要啊，除了正常的循环渲染，去重真的很重要，而且我们自己前端在代码中也减少判断，在数据量庞大的情况下，判断渲染，循环处理都会拖慢程序的，

以下为整理的循环去重方法，

分为两种：一种为使用循环得到不重复数据，一种是在循环进行中进行重复数据筛选以不影响后续的数据操作，节省代码量 

一、获得去重后的数组

1.使用计算属性（Computed Property）和 Set 数据结构：

data() {
  return {
    array: [1, 2, 2, 3, 4, 4, 5]
  }
},
computed: {
  uniqueArray() {
    return Array.from(new Set(this.array));
  }
}

2.使用计算属性和 Array 的 filter() 方法：

data() {
  return {
    array: [1, 2, 2, 3, 4, 4, 5]
  }
},
computed: {
  uniqueArray() {
    return this.array.filter((value, index, self) => {
      return self.indexOf(value) === index;
    });
  }
}

 二、循环中去重操作

const array = [1, 2, 2, 3, 4, 4, 5];
let visited = []; // 用于保存已访问的数字

for (let i = 0; i < array.length; i++) {
  const currentNumber = array[i];
  
  // 检查当前数字是否已经存在于 visited 数组中
  if (visited.includes(currentNumber)) {
    // 如果是重复数据，跳过继续循环
    continue;
  }
  
  // 执行操作（在此替换为你的实际操作）
  console.log(currentNumber);
  
  // 将当前数字添加到 visited 数组中
  visited.push(currentNumber);
}