vue中对象数组去重的实现

其实很简单，一般的数组去重可以直接用 new Set() 方法即可，但是数组对象的话，比较复杂，不能直接用，我们可以采取间接的方法来去重

unique(arr) {
 const res = new Map();
 return arr.filter((arr) => !res.has(arr.id) && res.set(arr.id, 1))
}

下面有一个示例，根据对象的id作为去重的依据：

 <el-button type="primary" size="medium" @click="quChong()">点击</el-button>
quChong() {
    let arr = [
     {
      id: 1,
      name: '111'
     },
     {
      id: 1,
      name: '111'
     },
     {
      id: 2,
      name: '222'
     },
     {
      id: 3,
      name: '333'
     }
    ];
    console.log(arr);
    console.log('--------------------');
    let arr1 = this.unique(arr);
    console.log(arr1);
   },
   unique(arr) {
    const res = new Map();
    return arr.filter((arr) => !res.has(arr.id) && res.set(arr.id, 1));
   },

这样就很简单的去重了

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue代码整洁之去重方法整理

    在开始本篇的主题之前,让我们把上次遗留下来的问题都清理一下: 将其他组件中 axios 请求的地方封装起来. 这里就不把代码放在开头了,相关代码都放在文末,有兴趣了解的童鞋可以先往下翻. 好了, 我们现在把上篇剩下的任务给完成了,接下来我们来正式开始本篇内容吧. 去重是什么 字面上意思:去除重复,在项目中,不可避免的会出现重复代码.但是如果不好好去处理这些重复代码,那很有可能就会给你很多"惊喜". 如何为"重复" 下一个定义呢? 从最浅显的层次来看, 相同即是重复.

  • vue中对象数组去重的实现

    vue中对象数组去重的实现

    其实很简单,一般的数组去重可以直接用 new Set() 方法即可,但是数组对象的话,比较复杂,不能直接用,我们可以采取间接的方法来去重 unique(arr) { const res = new Map(); return arr.filter((arr) => !res.has(arr.id) && res.set(arr.id, 1)) } 下面有一个示例,根据对象的id作为去重的依据: <el-button type="primary" size=&

  • Vue中遍历数组的新方法实例详解

    1.foreach foreach循环对不能使用return来停止循环 search(keyword){ var newList = [] this.urls.forEach(item =>{ if(item.name.indexOf(keyword) != -1){ newList.push(item) } }) return newList } 2.filter item对象就是遍历数组中的一个元素,includes是es6中的新方法,在search方法中直接返回新数组 search(key

  • Vue中foreach数组与js中遍历数组的写法说明

    Vue foreach数组与js中遍历数组的写法 场景 Vue中使用Axios发送get或者post请求,发送请求时需要在js中 对请求参数进行遍历并处理. 接收响应时需要对响应结果进行遍历和处理. 注意区分在vue和js中foreach数组的区别. 实现 在js中遍历数组 //定义班次详细数组 var bcglxiangxiList = new Array(); //定义班次详细对象 var bcxiangxi = {}; //循环传递的参数 bcglXiangXiListParam.forE

  • vue 绑定对象,数组之数据无法动态渲染案例详解

    vue 绑定对象,数组之数据无法动态渲染案例详解

    项目场景: 黑马vue项目管理实战,获取商品分类,展开栏的标签页中修改修改数据属性 问题描述: 在本该点击+new tag这个标签页时弹出一个input框让用户输入需要添加的属性 结果点击时却不能立马渲染 async getParametersList() { this.cat_id = this.currentSelect[this.currentSelect.length - 1]; const { data: res } = await this.$http.get( `categorie

  • Vue中构造数组数据之map和forEach方法实现

    目录 一.手写实现 二.二者区别 三.使用场景 数组操作是前端最重要的数据操作,构造数组数据,又是数组操作中很常见的.本文将梳理下map和forEach方法在Vue项目中的使用. 想要深入理解这两个方法,一定要手写几次简易的实现,理解其中的要义.这里只考虑核心部分,一些边界问题就忽略了. 一.手写实现 简易map方法: Array.prototype.myMap = function(callback) { const res = []; for (let i = 0; i < this.len

  • 解决vue中对象属性改变视图不更新的问题

    常规情况下我们在vue实例的data中设置响应数据.但当数据为对象,我们增加或删除对象属性值时,视图并不触发更新,如何解决这个问题呢? 实例代码如下: let vm = new Vue{ el: '#app', data: { obj: { k: 'v' } }, ... } 有三种解决方案: 方案一:利用Vue.set(object,key,val) 例:Vue.set(vm.obj,'k1','v1') 方案二:利用this.$set(this.obj,key,val) 例:this.$se

  • Java中对象数组的使用方法详解

    本文实例讲述了Java中对象数组的使用方法.分享给大家供大家参考,具体如下: 一 点睛 对象可以用数组来存放,通过下面两个步骤来实现. 1 声明以类为数据类型的数组变量,并用new分配内存空间给数组. 2 用new产生新的对象,并分配内存空间给它. 下面介绍4种方式来定义对象数组 方式一:静态方式 Person p1[] = { new Person(), new Person(), new Person() }; 方式二:动态初始化化 Person p2[]; p2 = new Person[

  • vue中更改数组中属性,在页面中不生效的解决方法

    问题描述: 使用vue的方法获取了数组数据,获取数据后为每个数据增加edit属性,初始值均为false,其目的是为了当点击列表中的编辑按钮时,控制保存与不保存的按钮的出现与消失,结果当更改数组中的edit属性后,页面并没有如预期的那样当edit为true时页面显示更改状态,当edit为false时为不更改状态 解决方案: edit是在通过post方法获取数据后增加到vue的data数据中的属性,一开始我的做法先将接收到的数据赋值到vue的data中,再对vue的data中的数据增加edit属性,

  • JS对象数组去重的3种方法示例及对比

    JS对象数组去重的3种方法示例及对比

    目录 一.去重前后数据对比 二.使用方法 1.使用filter和Map 2.使用reduce 3.使用for循环 三.2400条数据,三种方法处理时间对比 总结 一.去重前后数据对比 // 原数据是这样的 // 去重后数据是这样的 [{ [{ "goodsId": "1", "goodsId": "1", "quota": 12, "quota": 12, "skuId&quo

  • 在vue中对数组值变化的监听与重新响应渲染操作

    在我们项目开发过程中,实例中的数据类型可以是对象.数组等.在对象中,某个属性值发生更改时,我们可以通过对象的深度监听,以达到重新渲染页面的需求.或者查阅这篇文章 例如: <script> export default { data(){ return { objVal: { name: 'obj', type: 'obj' } } }, watch:{ objVal:{ handler(val,oldval){ }, deep: true, } }, methods:{ changeObj()

随机推荐