前几天 有一个需求要做一个 勾选的按钮 ,用的前端框架时 extjs 。
需求是这样的:选择数据后点击勾选 会把数据 放到一个全局变量里,然后点击另外一个提交按钮 弹出一个窗口 加载这些已经勾选的数据,进行预览勾选的数据和提交。
隐藏的需求之一就是预览的时候不能看到重复的数据,或者说勾选的时候需要去重。
实现如下:
/** * 添加勾选的records 并去重 * @param value 勾选的records */ pushExternalTickedRecords(value: Ext.data.IModel[]) { let temp = this.ExternalTickedRecords; if (temp == null || temp == undefined) { temp = new Array<Ext.data.IModel>(); } temp.push(...value); temp.sort((a: Ext.data.IModel, b: Ext.data.IModel) => { let aId = a.getData().Id; let bId = b.getData().Id; if (aId > bId) { return 1; } else if (aId == bId) { return 0; } else { return -1; } }); let len = temp.length; let objId = 0; for (let i = 0; i < len; i++) { let curLen = temp.length; if (i >= curLen) { break; } let curId = temp[i].getData().Id; if (i != 0) { if (objId == curId) { temp.splice(i, 1); i--; continue; } } objId = curId; } this.ExternalTickedRecords = temp; }
注:这个方法是写在一个类里的,语言TSEditer支持的ES6标准。
简单解释一下:首先根据 数据Id进行sort,然后循环这个排序后的 array 使用 splice 和 i-- 进行高性能的去重。
注:splice 减少数组元素会影响其length 所以 要使用 len变量。如果不使用id 作为 key就要在objId里存储相应的key。objId 更准确的命名应该是 priorObj。
注:如果不是用 splice 而使用delete 的话 不能做i--并且后面要去除 undefined。
补充:
var ages = [3, 10, 18, 20,2,3,10,18,18,30,20,1,2]; ages.filter((m, index) => ages.findIndex(x => x == m) == index);
3,10,18,20,2,30,1