vue3把后端发来的数据去重

在 Vue3 中处理后端返回的数据并实现去重功能，可以采用多种方法。以下是基于提供的引用内容以及 ES6 的特性来完成这一目标的具体方式。 ### 数据去重的实现 #### 方法一：使用 `Map` 进行去重 通过创建一个 `Map` 来存储唯一键值对的方式去除重复项。此方法适用于具有唯一标识符的对象数组。 ```javascript <script setup> import { ref, onMounted } from 'vue'; const uniqueResults = ref([]); onMounted(async () => { // 假设这是从后端接收到的数据 const data = [ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 1, name: 'Alice' }, { id: 3, name: 'Charlie' }, { id: 2, name: 'Bob' } ]; // 创建 Map 并根据 id 去重 const map = new Map(); data.forEach(item => { if (!map.has(item.id)) { map.set(item.id, item); } }); // 将 Map 转换回数组 uniqueResults.value = Array.from(map.values()); }); </script> <template> <div> <h2>去重后的结果:</h2> <ul> <li v-for="item in uniqueResults" :key="item.id">{{ item.name }}</li> </ul> </div> </template> ``` 这种方法利用了 `Map` 的特点——键的唯一性[^1]。 --- #### 方法二：使用 `reduce` 和对象辅助去重 另一种常见的做法是借助 JavaScript 的 `reduce` 函数配合临时对象记录已存在的条目。 ```javascript <script setup> import { ref, onMounted } from 'vue'; const uniqueResults = ref([]); onMounted(async () => { // 假设这是从后端接收到的数据 const data = [ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 1, name: 'Alice' }, { id: 3, name: 'Charlie' }, { id: 2, name: 'Bob' } ]; // 使用 reduce 配合对象辅助去重 const obj = {}; uniqueResults.value = data.reduce((acc, curr) => { if (!obj[curr.id]) { acc.push(curr); obj[curr.id] = true; } return acc; }, []); }); </script> <template> <div> <h2>去重后的结果:</h2> <ul> <li v-for="item in uniqueResults" :key="item.id">{{ item.name }}</li> </ul> </div> </template> ``` 这种方式的核心在于维护了一个中间状态对象 `obj`，用于标记已经加入最终结果集中的元素[^2]。 --- #### 方法三：针对特定字段提取与去重 如果只需要保留某些字段而忽略其他部分，则可以通过先提取这些字段再重新构建新数组的方式来达到目的。 ```javascript <script setup> import { ref, onMounted } from 'vue'; const checkBasisListYear = ref([]); const checkBasisList = ref([]); onMounted(async () => { // 模拟从后端获取数据 const responseData = [ { year: '2023-05-01', title: 'Document A' }, { year: '2023-05-01', title: 'Duplicate Document B' }, { year: '2024-06-15', title: 'Document C' } ]; checkBasisList.value = responseData; // 提取年份并去重 const yearsSet = new Set(checkBasisList.value.map(item => new Date(item.year).getFullYear())); checkBasisListYear.value = [...yearsSet]; }); </script> <template> <div> <h2>提取并去重后的年份列表：</h2> <ul> <li v-for="(year, index) in checkBasisListYear" :key="index">{{ year }}</li> </ul> </div> </template> ``` 上述代码展示了如何将日期类型的字段转化为具体的年份，并对其进行去重操作[^3]。 --- ### 性能对比分析 当面对大规模数据时，不同算法的时间复杂度会直接影响性能表现： - **`Map` 方式** 时间复杂度接近 O(n)，因为每次插入或查找都只需常数时间。 - **`reduce` 结合法** 类似于双重循环结构，在最坏情况下可能退化至 O(n²)。 - 如果仅需简单字符串或者数值型数据的过滤，可以直接运用集合类工具如 `Set` 达到线性的效率。 因此推荐优先考虑基于哈希表原理的技术方案（即前两种），它们能够提供更优的整体运行速度[^4]。