当前位置: 首页 > news >正文

Vue3数组去重方法总结

在 Vue 3 中对数组去重,本质上是 JavaScript 数组操作问题。以下是几种常用方法,结合 Vue 3 的响应式特性实现数据更新:

方法 1:使用 Set(推荐)

javascript

import { ref } from 'vue';const list = ref([1, 2, 2, 3, 3, 3]);// 去重逻辑
const deduplicate = () => {list.value = [...new Set(list.value)];// 或使用 Array.from// list.value = Array.from(new Set(list.value));
};

方法 2:使用 filter

javascript

const deduplicate = () => {list.value = list.value.filter((item, index) => list.value.indexOf(item) === index);
};

方法 3:使用 reduce

javascript

const deduplicate = () => {list.value = list.value.reduce((unique, item) => unique.includes(item) ? unique : [...unique, item],[]);
};

完整组件示例

vue

<template><div><button @click="deduplicate">去重</button><ul><li v-for="(item, index) in list" :key="index">{{ item }}</li></ul></div>
</template><script setup>
import { ref } from 'vue';const list = ref(['apple', 'banana', 'apple', 'orange', 'banana']);const deduplicate = () => {// 任选一种去重方法list.value = [...new Set(list.value)];
};
</script>

对象数组去重(根据特定属性)

javascript

const users = ref([{ id: 1, name: 'Alice' },{ id: 2, name: 'Bob' },{ id: 1, name: 'Alice' } // 重复项
]);const deduplicateObjects = () => {const seen = new Map();users.value = users.value.filter(item => {return !seen.has(item.id) && seen.set(item.id, true);});
};

注意事项:

  1. 响应式更新:直接赋值新数组 (list.value = [...]) 才能触发视图更新

  2. 性能考虑:大数组推荐使用 Set 或 Map,时间复杂度 O(n)

  3. 对象数组:需根据唯一标识(如 id)去重

  4. 原始数组保护:如果需保留原数组,操作前可深拷贝:

    js

    const newList = [...new Set(originalArray)];

响应式原理说明:

Vue 3 使用 Proxy 实现响应式,直接修改数组元素 (list.value[0] = ...) 或使用 push() 等方法可触发更新,但去重操作需要生成新数组并整体替换才能确保视图正确更新。

选择方法时,简单数组用 Set 最简洁,对象数组推荐用 Map 实现高效去重。

http://www.dtcms.com/a/304206.html

相关文章:

  • 数据赋能(342)——技术平台——容错性
  • oneapi本地部署接口测试(curl命令方式+postman方式)
  • git中多仓库工作的常用命令
  • C 语言第 12 天学习笔记:函数进阶应用与变量特性解析
  • Accessibility Insights for Windows 使用教程
  • 【Nginx】Nginx进阶指南:解锁代理与负载均衡的多样玩法
  • Apache Ignite 的分布式锁Distributed Locks的介绍
  • VLA--Gemini Robotics On-Device: 将AI带到本地机器人设备上
  • SQL 怎么学?
  • 小程序发票合并功能升级!发票夹直接选,操作更便捷
  • Kafka——消费者组重平衡全流程解析
  • idea运行tomcat日志乱码问题
  • Vue El 基础
  • 考古学家 - 华为OD统一考试(JavaScript 题解)
  • npm : 无法加载文件 D:\Nodejs\node_global\npm.ps1,因为在此系统上禁止运行脚本
  • 复现cacti的RCE(CVE-2022-46169)
  • EM储能网关ZWS智慧储能云应用(17) — 动环监控
  • 鲸鱼小说分销系统v1.0.0公测版更新发布-完成了小说整体基础以及完整分销和数据看板
  • 应广MTP单片机在线烧录技巧
  • 嵌入式学习日志————TIM定时中断之定时器定时中断
  • git使用lfs解决大文件上传限制
  • 【PHP】Swoole:CentOS安装Composer+Hyperf
  • 【C++算法】76.优先级队列_前 K 个高频单词
  • 引领新一代 Web3 金融类应用开发,全景式探析 Injective 生态
  • 乳腺癌病理知识
  • 网络安全的变革:深入洞察 Web3 与传统网络模型
  • 黑客哲学之学习笔记系列(一)
  • 随机森林算法原理及优缺点
  • 华为光学设计面试题
  • 频谱周期性复制