vue list去重

在Vue中，可以使用JavaScript的filter函数和findIndex方法来对包含多个对象的数组进行去重。具体步骤如下： 1. 首先，定义一个包含多个对象的数组，例如： ```javascript let list = [ { id: 1, name: 'John' }, { id: 2, name: 'Jane' }, { id: 1, name: 'John' }, { id: 3, name: 'Mike' } ]; ``` 2. 使用filter函数和findIndex方法对数组进行去重，代码如下： ```javascript let uniqueList = list.filter((item, index) => { return index === list.findIndex(obj => { return JSON.stringify(obj) === JSON.stringify(item); }); }); ``` 3. 最后，输出去重后的数组uniqueList，代码如下： ```javascript console.log(uniqueList); ``` 执行以上代码后，uniqueList数组将只包含具有唯一id字段的对象，重复的对象会被过滤掉。

### Vue 中对 List 进行去重的实现方法 在 Vue 开发过程中，对于 `list` 的去重操作可以通过多种方式来完成。以下是几种常见的实现方法： #### 方法一：使用 `Set` 集合 这是最简单的方式之一，适用于普通的数组去重场景。 ```javascript let list = [1, 2, 2, 3, 4, 4, 5]; let uniqueList = [...new Set(list)]; console.log(uniqueList); // 输出: [1, 2, 3, 4, 5] ``` 这种方法的核心在于利用 JavaScript 的 `Set` 数据结构自动去除重复值的功能[^2]。 --- #### 方法二：使用 `filter()` 和 `indexOf()` 此方法适合需要保留原始顺序的情况。 ```javascript let list = [1, 2, 2, 3, 4, 4, 5]; let uniqueList = list.filter((item, index, array) => { return array.indexOf(item) === index; }); console.log(uniqueList); // 输出: [1, 2, 3, 4, 5] ``` 这里通过 `filter()` 方法遍历数组，并借助 `indexOf()` 判断当前元素是否为首次出现[^1]。 --- #### 方法三：针对对象数组的去重 当列表中的每一项是一个对象时，可以根据特定字段（如 `id` 或其他唯一键）进行去重。 ##### 实现方案 1：使用 `Map` ```javascript let list = [ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 1, name: 'Charlie' } ]; let map = new Map(); let uniqueList = list.filter(item => !map.has(item.id) && map.set(item.id, true)); console.log(uniqueList); // 输出: [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }] ``` 这段代码通过 `Map` 来记录已经存在的 `id` 值，从而达到去重的目的[^2]。 ##### 实现方案 2：自定义函数封装 为了提高可复用性，可以将逻辑封装成一个通用函数。 ```javascript function eliminateDuplicates(arr, key) { const seen = new Set(); return arr.filter(item => { const k = item[key]; return seen.has(k) ? false : seen.add(k); }); } let list = [ { userId: 1, name: 'Alice' }, { userId: 2, name: 'Bob' }, { userId: 1, name: 'Charlie' } ]; let uniqueList = eliminateDuplicates(list, 'userId'); console.log(uniqueList); // 输出: [{ userId: 1, name: 'Alice' }, { userId: 2, name: 'Bob' }] ``` 这种方式更加灵活，允许指定任意字段作为去重依据[^3]。 --- #### 方法四：基于循环的手动去重 虽然效率较低，但在某些特殊情况下仍然适用。 ```javascript let list = [12, 23, 12, 15, 25, 23, 25, 14, 16]; for (let i = 0; i < list.length - 1; i++) { let current = list[i]; for (let j = i + 1; j < list.length; ) { if (current === list[j]) { list.splice(j, 1); // 删除重复项 } else { j++; } } } console.log(list); // 输出: [12, 23, 15, 25, 14, 16] ``` 这种手动处理的方式需要注意索引的变化以及性能问题[^4]。 --- ### 性能对比与注意事项 - **普通数组**：推荐优先使用 `Set` 方式，因为它简洁高效。 - **对象数组**：建议采用 `Map` 结构或封装好的工具函数，便于扩展和维护。 - 如果涉及大量数据，则需考虑算法的时间复杂度，避免因嵌套循环导致性能瓶颈。