Vue中数组进行去重的几种常用方法

1、使用Set数据结构:这是ES6中引入的新数据结构,它只能存储唯一的值。你可以将数组转换为Set,然后再将Set转换回数组。

let arr = [1, 2, 3, 3, 4, 5, 5];
let uniqueArr = Array.from(new Set(arr));
console.log(uniqueArr); // [1, 2, 3, 4, 5]

2、使用filter()方法:通过使用indexOf方法来保留首次出现的元素,去掉重复的元素。

let arr = [1, 2, 3, 3, 4, 5, 5];
let uniqueArr = arr.filter((value, index, self) => {
  return self.indexOf(value) === index;
});
console.log(uniqueArr); // [1, 2, 3, 4, 5]

3、使用reduce()方法:通过使用一个空数组和includes()方法来添加不重复的元素。

let arr = [1, 2, 3, 3, 4, 5, 5];
let uniqueArr = arr.reduce((acc, currentValue) => {
  if (!acc.includes(currentValue)) {
    acc.push(currentValue);
  }
  return acc;
}, []);
console.log(uniqueArr); // [1, 2, 3, 4, 5]

  • 4
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue数组对象进行去重有多种方法。一种简单的方法是使用Set集合来去重,但是对于数组对象来说,这种方法并不适用。可以采取以下间接的方法来实现数组对象的去重。 一种方法是使用Map来进行去重。首先创建一个空的Map对象,然后使用filter方法数组进行筛选,只保留Map没有出现过的元素,并将新的元素添加到Map。最后返回筛选后的数组即可。例如: ``` elimination(arr) { const res = new Map(); return arr.filter((item) => !res.has(item.id) && res.set(item.id, 1)); }, ``` 在Vue使用该方法可以这样调用: ``` this.arr = this.elimination(this.arr); ``` 另一种方法是直接在Vue方法使用filter和Map来进行去重。例如: ``` quChong() { let arr = [ { id: 1, name: '111' }, { id: 1, name: '111' }, { id: 2, name: '222' }, { id: 3, name: '333' } ]; let arr1 = this.unique(arr); console.log(arr1); }, unique(arr) { const res = new Map(); return arr.filter((item) => !res.has(item.id) && res.set(item.id, 1)); }, ``` 以上代码,通过调用`unique`方法实现了数组对象的去重,并将结果打印输出。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [数组对象去重(vue)](https://blog.csdn.net/m0_58259728/article/details/120197737)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [vue数组去重数组对象去重](https://blog.csdn.net/snowflak/article/details/127653450)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值