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 ...
随机推荐
- Windows 7 Path环境变量255限制的解决办法,SUBST
C:\Users\xxx>subst /? Associates a path with a drive letter. SUBST [drive1: [drive2:]path] SUBST ...
- mysql操作及自动化运维
备份恢复工具:percona-xtrabackup-2.0.0-417.rhel6.x86_64.rpm mysql主从配置命令: 主: 1.编辑主MYSQL 服务器的MySQL配置文件my.cnf, ...
- 使用JSTL的xml:parse标签(或者说x:parse)出现异常NoSuchMethodError,找不到doc的setter method
症状: 如题 <c:import var="hz" url="/xyz/abc.xml" charEncoding="UTF-8"/& ...
- jquery $.each 和for 怎么跳出循环(终止本次循环)
1.for循环中我们使用continue:终止本次循环计入下一个循环,使用break终止整个循环. 2.而在jquery中 $.each则对应的使用return true 和return false ...
- linux 密码破解
(一)Linux 系统密码破解 1.在grub选项菜单按E进入编辑模式 2.编辑kernel那行 /init 1 (或/single) 3.按B重启 4.进入后执行下列命令 root@#passwd ...
- Delphi之Raise抛出异常
相关资料: http://blog.csdn.net/a20071426/article/details/10160171 实例代码: unit Unit1; interface uses Windo ...
- 基于CSS3 3D百叶窗图像过渡特效
你可能已经在网上看到过不少使用jQuery制作的百叶窗效果,我们可不可以使用纯CSS来完成这项工作呢?答案是肯定的.我们不仅可以制作出这种百叶窗效果,还可以使它具有响应性. 在线预览 源码下载 要 ...
- [i.MX6q]i.MX6q处理器,linux操作系统平台搭建 从SD卡启动系统
转自:http://www.07net01.com/linux/2016/02/1232094.html 参照1:http://blog.csdn.net/girlkoo/article/detail ...
- BlueZ--内核层+应用层
BlueZ 1.Kernel层实现: bluetooth协议栈有多层结构,最底层的硬件协议在硬件中就已经实现了.软件级别的协议实现,从HCI这一层开始实现. BlueZ对各层协议的实现是依托于Sock ...
- 在 Java 8 中获取日期
前言 前面一篇文章写了<SimpleDateFormat 如何安全的使用?>, 里面介绍了 SimpleDateFormat 如何处理日期/时间,以及如何保证线程安全,及其介绍了在 Jav ...