vue中数组去重复数据

最新推荐文章于 2024-04-24 19:02:49 发布
最新推荐文章于 2024-04-24 19:02:49 发布
阅读量1.3w 收藏 12
点赞数
分类专栏： VUE学习笔记 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44433499/article/details/107041767
版权

数组数据调用unique方法去除重复数据。

let newarr= this.unique(arr);

unique(newarr) {
 const res = new Map();
 return arr.filter((arr) => !res.has(arr.id) && res.set(arr.id, 1));
}
前端学习007
关注
  • 0
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 对象数组中，根据相同属性的数据合并，重组新的数组对象
01-20
在Vue.js开发中，处理对象数组并根据特定属性进行数据合并和重组是常见的需求。本问题探讨了如何根据`TYPE`和`REMARK`两个属性的值来决定是否合并对象，并生成新的数组对象。首先，我们需要理解源数据的结构，然后...
vue实现将一个数组内的相同数据进行合并
12-13
获取服务器传来的数组数据进行，找出其中价格相同的进行数量相加，合并该段数据： /** 先将传来的订单列表进行四舍五入，再将价格相同的订单进行合并 * @param {Object} orderList :要进行操作的订单 */ async ...
vue中对象数组去重的实现
10-15
主要介绍了vue中对象数组去重的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue数组去重
weixin_60842212的博客
03-10 2375
vue数组去重 最近在开发中遇到了需要对数组进行去重操作，在这里记录一下基本的去重方法 数组去重 对于简单的数组进行去重，可以使用Set集合，基本上可以对所有数据类型进行去重 test() { const arr = [true, 1, 'str', 's', 2, false, true, {}, [], function() {}, {}, [1], [2], { obj: 1 }, 2, 'str'] const qc = [...new Set(arr)] ......
【前端】vue数组去重的3种方法
最新发布
weixin_43366051的博客
04-24 2486
前端使用场景中，经常会遇到数组去重的场景，本文主要介绍了vue常见的几种数组去重方法。
vue中v-for重复数据处理||element下拉框去除重复
qq_43476358的博客
06-29 2179
前端去重方法有多种,只说三种常用的(新老方法都有)1-使用常规双for循环(暴力算法)遍历比较的方式对值进行比较2-使用js方法sort排序（只针对数组），但是经常在vue等新框架中提示TypeError: arr.sort is not a function3-使用reduce方法(>_
vue 列表数据操作（去重、筛选、赋值）
weixin_43937851的博客
07-27 5718
vue 列表数据操作（去重、筛选、赋值）
Vue中数组进行去重的几种常用方法
beyond520lin的博客
07-05 7536
1、使用Set数据结构：这是ES6中引入的新数据结构，它只能存储唯一的值。你可以将数组转换为Set，然后再将Set转换回数组。2、使用filter()方法：通过使用indexOf方法来保留首次出现的元素，去掉重复的元素。3、使用reduce()方法：通过使用一个空数组和includes()方法来添加不重复的元素。
vue数据去重
weixin_53339757的博客
01-11 503
vue数组去重
删除数组中重复的元素vue
gyz15731998001的博客
09-26 2236
vue如何删除数组中重复的元素
Vue中如何对数组进行去重？
SR003的博客
07-31 3428
Vue中对包含多个对象的数组，或普通数组进行去重！
Vue.js在数组中插入重复数据的实现代码
01-19
1、在默认的情况下，Vue.js...2、不使用track-by=”$index”的数组插入，数组不支持重复数据的插入  2.1 JavaScript代码 [removed][removed] [removed] [removed] = function() { vm = new Vue({ el: '#app', d
vue数组去重2种方法
IT博客技术分享
09-29 4万+
方法一： 用2个for循环，判断每一项的id， 案列： // that.positions.map(train=>{ // that.new_Positions.push( train.trainId) // ...
js数组去重的10种有效方法 vue 数组去重，手把手教你写前端项目文档
2401_84002339的博客
04-01 877
方法7: 利用数组原型对象上的 forEach 和 includes方法。方法6: 利用数组原型对象上的 filter 和 includes方法。// 结果是[1, 2, 3, 5, 6, 7, 4]// 结果是[1, 2, 3, 5, 6, 7, 4]方法 5: 利用数组原型对象上的includes方法。// 结果是[1, 2, 3, 5, 6, 7, 4]// 结果是[1, 2, 3, 5, 6, 7, 4]// 结果是[1, 2, 3, 4, 5, 6, 7]作为window对象属性的文档元素。
数组去重主要的5种方法，
热门推荐
qq_42957741的博客
01-06 5万+
数组去重的方法 一、利用ES6 Set去重（ES6中最常用） var arr = [1,1,8,8,12,12,15,15,16,16]; function unique (arr) { return Array.from(new Set(arr)) } console.log(unique(arr)) //[1,8,12,15,16] 不考虑兼容性，这种去重的方法代码最少。这种方法还无...
vue中对数组进行去重
HouMengFei_的博客
11-29 2858
vue中对数组进行过滤 去重
vue中删除数组元素
qq_41838435的博客
02-22 1万+
vue中删除数组元素 let arr = [ { name: 'aa', id: 11 }, { name: 'bb', id: 12 } ] 1、filter arr = arr.filter(t => t.id !== 11) // [{ name: 'bb',id: 12 }] 2、splice arr = arr.map((item,index) => { if (it
vue中数组去重
weixin_35756637的博客
01-12 1869
在 Vue 中，可以使用 JavaScript 的 Array.prototype.filter() 方法来过滤数组中重复的元素，得到一个新数组。 例如，对于以下数组： var arr = [1, 2, 3, 4, 5, 1, 2, 3]; 可以使用以下代码进行去重: var newArr = arr.filter(function (item, index, self) { retur...
uni-app 打开外部网页地址 web url
weixin_44433499的博客
07-07 1万+
1、App平台可以使用 plus.runtime.openURL或web-view组件； 2、H5平台使用 window.open； <view class="example-body"> <uni-link href="https://uniapp.dcloud.io/" text="https://uniapp.dcloud.io/"> </uni-link> </view> uni-link组件 <template> <text st
vue修改 数组对象重复值
06-06
如果你想在 Vue 中修改数组对象中的重复值，可以按照以下步骤： 1. 找到数组中所有重复的值 - 可以使用 `reduce()` 方法来创建一个新的数组，只包含重复的值 - 也可以使用 `filter()` 方法来过滤出重复的值 2. 对于每个重复的值，进行修改 - 可以使用 `map()` 方法来修改每个重复的值 - 可以使用 `Vue.set()` 方法来更新 Vue 数据响应式 以下是一个示例代码，演示如何在 Vue 中修改数组对象中的重复值： ```vue <template> <div> <ul> <li v-for="(item, index) in modifiedArr" :key="index">{{ item.name }}</li> </ul> </div> </template> <script> export default { data() { return { arr: [ { id: 1, name: "John" }, { id: 2, name: "Jane" }, { id: 3, name: "John" }, { id: 4, name: "Peter" }, { id: 5, name: "Jane" }, ], }; }, computed: { duplicates() { return this.arr.reduce((acc, curr, index, array) => { if (array.findIndex((item) => item.name === curr.name) !== index && acc.indexOf(curr.name) === -1) { acc.push(curr.name); } return acc; }, []); }, modifiedArr() { return this.arr.map((item) => { if (this.duplicates.indexOf(item.name) !== -1) { const newItem = { ...item, name: `${item.name} (modified)` }; Vue.set(this.arr, this.arr.indexOf(item), newItem); return newItem; } return item; }); }, }, }; </script> ``` 在上面的示例中，我们使用 `computed` 计算属性来获取修改后的数组对象。首先，我们使用 `reduce()` 方法找到了所有重复的值，然后使用 `map()` 方法对每个重复的值进行了修改。在修改的过程中，我们使用了 `Vue.set()` 方法来更新 Vue 数据响应式。最终输出的结果是： ```html <div> <ul> <li>John</li> <li>Jane</li> <li>John (modified)</li> <li>Peter</li> <li>Jane (modified)</li> </ul> </div> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值