由于在vue中,会自动在数组和对象中加入_obser__观察者模式的一些属性,所以直接用数组的filter去重(下面这种),indexOf不能准确识别

var arr = [1, 2, 2, 3, 4, 5, 5, 6, 7, 7];
var arr2 = arr.filter(function(x, index,self) {
return self.indexOf(x)===index;
});
console.log(arr2); //[1, 2, 3, 4, 5, 6 ,7]

或者用ES6的一句简单去重

var nerarr = Array.from(new Set(arr))

只能用于普通的数组去重,在vue中这个不管用,

vue中可以,写一个去重的方法

methods:{
unique(arr) { // 根据唯一标识orderId来对数组进行过滤
      const res = new Map(); //定义常量 res,值为一个Map对象实例
      //返回arr数组过滤后的结果,结果为一个数组 过滤条件是,如果res中没有某个键,就设置这个键的值为1
      return arr.filter((arr) => !res.has(arr.OrderId) && res.set(arr.OrderId, 1))
},
}

使用

this.arr = this.unique(this.arr);

vue根据数组对象中某个唯一标识去重的更多相关文章

  1. JavaScript 获取数组对象中某一值封装为数组

    1.获取数组对象中某一值封装为数组(一) data = [["2000-06-05",116],["2000-06-06",129]]; var dateLis ...

  2. js 向数组对象中添加属性和属性值

    let resultList = [{"name":"a1"},{"name":"b1"}] resultList.fo ...

  3. problem: vue之数组元素中的数组类型值数据改变却无法在子组件视图更新问题

    问题:给父组件上的一个数组中的某个元素中的数组类型值,添加值后,数据没有在子组件上更新. 对元素添加值之后,vue的数据其实已经更新了并传给了子组件,子组件中没有立即更新. 那么这里有个问题,在子组件 ...

  4. js中的数组对象中的方法解析

    concat()方法:  合并两个数组,返回新对象的结果: join()方法 :  把数组内的所有元素加入到一个字符串中,传入的分隔符就是指定的分隔符 pop()方法: 删除数组并返回数组的最后一个元 ...

  5. js篇-判断数组对象中是否含有某个值,并返回该条数据

    项目背景需求是: 已知: var a=[{name:'jenny',age:18},{name:'john',age:19},{name:'jack',age:20}] var b ='jenny' ...

  6. js根据数组对象中某个元素合并数组

    一个数组,根据数组中某个元素,合并数组 // 需要被合并的数组,把Index相同的数组合并 const arr = [{id:0,name:'张三'}, {id:0,name:'李四'}, {id:1 ...

  7. js 去掉数组对象中的重复对象

    export function deteleObject(obj) { var uniques = []; var stringify = {}; for (var i = 0; i < obj ...

  8. 从一个数组对象中取key 和value组成一个新的对象

    const type = [ {key:'TimeWeiDu',value:'时间维度'}, {key:'TranType',value:'交易类型'}, {key:'OrderType',value ...

  9. javascrpit sort()数组对象中排序

    /*ionic 调用 * @param attr 排序的属性 如number属性 * @param rev true表示升序排列,false降序排序 * */ commonSortMethod(att ...

随机推荐

  1. java开发中国际化

    1 静态文本的国际化,就是比如页面中中文显示用户名就是用户名,用于显示就是 username. 其中静态文件命名遵循:基础名_语言简称_国家简称.properties 需要使用的类是 1)import ...

  2. 自己工作之余做的OSX小软件

    ShareSDK是为iOS.Android.WindowsPhone提供社会功能的一个组件,开发者只需10分钟即可集成到自己的APP中,它不仅支持分享给QQ好友.微信好友.微信朋友圈.新浪微博.腾迅微 ...

  3. atitit.产品console 日志的aticonsole 方案处理总结

    atitit.产品console 日志的aticonsole 方案处理总结 1. 主要原理流程 1 2. 调用代码 1 3. 内部主要实现 1 3.1. 放入消息 1 3.2. 读取消息 2 默认可以 ...

  4. atitit.Oracle 9 10 11 12新特性attilax总结

    atitit.Oracle 9  10 11  12新特性 1. ORACLE 11G新特性 1 1.1. oracle11G新特性 1 1.2. 审计 1 1.3. 1.   审计简介 1 1.4. ...

  5. Elastic_Terms 内容分类统计

    Terms 按字段的值进行分类,并计算出doc_count, bucket聚合 类似于 group by 常用统计 分类并出现频率高的,并进一步挖出,计算出想要的数据. 参考资料 https://ww ...

  6. Xcode常见问题

    今天真机测试的时候,突然出现了这个错误:  not have an architecture that “Administrator”的 iPhone (3) can execute. 原因是我刚刚修 ...

  7. CSS学习笔记(4)--选择器(w3school)

    CSS3 选择器 在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素. "CSS" 列指示该属性是在哪个 CSS 版本中定义的.(CSS1.CSS2 还是 CSS3.) ...

  8. 转:Linux下随机10字符病毒的清除

    病毒表现:网络流量暴满,疯狂地向香港的一个IP发数据,同时在top里面表现为随机的10位字母的进程,看/proc里面的信息,则为ls,cd之类常见的命令,CPU利用率也在top之首.杀死该进程后,会再 ...

  9. PHP——投票

    要求: 选择第一个页面的复选框值,点击提交则提交数据,点击查看结果在同一页面覆盖显示结果的投票人数,百分比和进度条,点击返回,返回第一页面 数据库为 投票 表格为diaoyanxx 表格内容为: zh ...

  10. 三分 - HNU 13409 Flowers

    Flowers Problem's Link: http://acm.hnu.cn/online/?action=problem&type=show&id=13409&cour ...