vue根据数组对象中某个唯一标识去重
由于在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根据数组对象中某个唯一标识去重的更多相关文章
- JavaScript 获取数组对象中某一值封装为数组
1.获取数组对象中某一值封装为数组(一) data = [["2000-06-05",116],["2000-06-06",129]]; var dateLis ...
- js 向数组对象中添加属性和属性值
let resultList = [{"name":"a1"},{"name":"b1"}] resultList.fo ...
- problem: vue之数组元素中的数组类型值数据改变却无法在子组件视图更新问题
问题:给父组件上的一个数组中的某个元素中的数组类型值,添加值后,数据没有在子组件上更新. 对元素添加值之后,vue的数据其实已经更新了并传给了子组件,子组件中没有立即更新. 那么这里有个问题,在子组件 ...
- js中的数组对象中的方法解析
concat()方法: 合并两个数组,返回新对象的结果: join()方法 : 把数组内的所有元素加入到一个字符串中,传入的分隔符就是指定的分隔符 pop()方法: 删除数组并返回数组的最后一个元 ...
- js篇-判断数组对象中是否含有某个值,并返回该条数据
项目背景需求是: 已知: var a=[{name:'jenny',age:18},{name:'john',age:19},{name:'jack',age:20}] var b ='jenny' ...
- js根据数组对象中某个元素合并数组
一个数组,根据数组中某个元素,合并数组 // 需要被合并的数组,把Index相同的数组合并 const arr = [{id:0,name:'张三'}, {id:0,name:'李四'}, {id:1 ...
- js 去掉数组对象中的重复对象
export function deteleObject(obj) { var uniques = []; var stringify = {}; for (var i = 0; i < obj ...
- 从一个数组对象中取key 和value组成一个新的对象
const type = [ {key:'TimeWeiDu',value:'时间维度'}, {key:'TranType',value:'交易类型'}, {key:'OrderType',value ...
- javascrpit sort()数组对象中排序
/*ionic 调用 * @param attr 排序的属性 如number属性 * @param rev true表示升序排列,false降序排序 * */ commonSortMethod(att ...
随机推荐
- List<T>做数据源绑定的问题
List<C_Pinpai> lc;// = new List<C_Pinpai>(); private void BindGrid() { //if (lc.Count &g ...
- XCode5中新建工程后强制使用了ARC,如何去掉?
打开你的工程,点击目录的工程文件,最顶端蓝色的,然后选择project下你的工程,还是蓝色那项,然后build Settings,然后往下拉,在Apple LLVM 5.0 - Language - ...
- Windows下ADB默认的5037port被占用,解决方式。
Windows下可能会因为系统版本号不一样的原因导致有的系统5037port被系统进程占用.导致ADB无法使用5037port,从而导致ADB不能打开.在eclipse上跑Android程序的时候显示 ...
- 通过web界面查看hadoop集群运行日志的地址
通过web界面查看hadoop集群运行日志的地址: http://hostname:8088/logs/ SecurityAuth-root.audit 0 bytes Aug 27, 2016 5 ...
- Vim快捷键操作命令大全
Vim是一个超牛的编辑器,命令功能十分强大 .而且这些命令大都可以进行组合 ,比如,9yy命令表示复制9行内容,9表示要复制的行数,同样100dd表示删除100行,当数字和命令合作的时候,就比 ...
- PHP Global定义全局变量使用说明
Global是php中一个比较特殊的命令,大家直接叫他超级全局变量了,下面我来介绍我今天在使用Global定义全局学习笔记了 很不习惯PHP中的变量作用域,PHP中函数变量和全局是完全隔绝的,也就 ...
- 第二百五十三节,Bootstrap项目实战-资讯
Bootstrap项目实战-资讯 html <!DOCTYPE html> <html lang="zh-cn"> <head> <met ...
- Generator生成器函数
接触过Ajax请求的会遇到过异步调用的问题,为了保证调用顺序的正确性,一般我们会在回调函数中调用,也有用到一些新的解决方案如Promise相关的技术. 在异步编程中,还有一种常用的解决方案,它就是Ge ...
- 以上过程为实现equals的标准过程
以下为定义equal(加上这个定义,返回ture或false) public boolean equals(Object o){ student s=(student)o; if (s.name.eq ...
- ASP.NET MVC:Expression Trees 作为参数简化查询
ASP.NET MVC 引入了 ModelBinder 技术,让我们可以在 Action 中以强类型参数的形式接收 Request 中的数据,极大的方便了我们的编程,提高了生产力.在查询 Action ...