前几天 有一个需求要做一个 勾选的按钮 ,用的前端框架时 extjs   。

需求是这样的:选择数据后点击勾选 会把数据 放到一个全局变量里,然后点击另外一个提交按钮 弹出一个窗口 加载这些已经勾选的数据,进行预览勾选的数据和提交。

  隐藏的需求之一就是预览的时候不能看到重复的数据,或者说勾选的时候需要去重。

实现如下:

  1. /**
  2. * 添加勾选的records 并去重
  3. * @param value 勾选的records
  4. */
  5. pushExternalTickedRecords(value: Ext.data.IModel[]) {
  6. let temp = this.ExternalTickedRecords;
  7. if (temp == null || temp == undefined) {
  8. temp = new Array<Ext.data.IModel>();
  9. }
  10. temp.push(...value);
  11. temp.sort((a: Ext.data.IModel, b: Ext.data.IModel) => {
  12. let aId = a.getData().Id;
  13. let bId = b.getData().Id;
  14. if (aId > bId) {
  15. return 1;
  16. } else if (aId == bId) {
  17. return 0;
  18. } else {
  19. return -1;
  20. }
  21. });
  22. let len = temp.length;
  23. let objId = 0;
  24. for (let i = 0; i < len; i++) {
  25. let curLen = temp.length;
  26. if (i >= curLen) {
  27. break;
  28. }
  29. let curId = temp[i].getData().Id;
  30. if (i != 0) {
  31. if (objId == curId) {
  32. temp.splice(i, 1);
  33. i--;
  34. continue;
  35. }
  36. }
  37. objId = curId;
  38. }
  39. this.ExternalTickedRecords = temp;
  40. }

  注:这个方法是写在一个类里的,语言TSEditer支持的ES6标准。

简单解释一下:首先根据 数据Id进行sort,然后循环这个排序后的 array 使用 splice 和 i-- 进行高性能的去重。

  注:splice 减少数组元素会影响其length 所以 要使用 len变量。如果不使用id 作为 key就要在objId里存储相应的key。objId 更准确的命名应该是 priorObj。

  注:如果不是用 splice 而使用delete 的话 不能做i--并且后面要去除 undefined。

补充:

  1. var ages = [, , , ,,,,,,,,,];
  2.  
  3. ages.filter((m, index) => ages.findIndex(x => x == m) == index);

3,10,18,20,2,30,1

js 排序,去重的更多相关文章

  1. js数组去重的4种方法

    js数组去重,老生长谈,今天对其进行一番归纳,总结出来4种方法 贴入代码前 ,先对浏览器Array对象进行支持indexOf和forEach的polyfill Array.prototype.inde ...

  2. 排序图解:js排序算法实现

    之前写过js实现数组去重, 今天继续研究数组: 排序算法实现. 排序是数据结构主要内容,并不限于语言主要在于思想:大学曾经用C语言研究过一段时间的排序实现, 这段时间有空用JS再将排序知识点熟悉一遍. ...

  3. JS数组去重的几种常见方法

    JS数组去重的几种常见方法 一.简单的去重方法 // 最简单数组去重法 /* * 新建一新数组,遍历传入数组,值不在新数组就push进该新数组中 * IE8以下不支持数组的indexOf方法 * */ ...

  4. js数组去重五种方法

    今天来聊一聊JS数组去重的一些方法,包括一些网上看到的和自己总结的,总共5种方法(ES5). 第一种:遍历数组法 这种方法最简单最直观,也最容易理解,代码如下: var arr = [2, 8, 5, ...

  5. js数组去重的方法(转)

    JS数组去重的几种常见方法 一.简单的去重方法 // 最简单数组去重法 /* * 新建一新数组,遍历传入数组,值不在新数组就push进该新数组中 * IE8以下不支持数组的indexOf方法 * */ ...

  6. JS数组去重的6种算法实现

    1.遍历数组法 最简单的去重方法,实现思路:新建一新数组,遍历传入数组,值不在新数组就加入该新数组中:注意点:判断值是否在数组的方法"indexOf"是ECMAScript5 方法 ...

  7. js数组去重解决方案

    js数组去重是前端面试中经常被问的题目,考察了面试者对js的掌握,解决问题的思路,以及是否具有专研精神.曾经一位前端界大神告诉我,解决问题的方式有很多种,解决问题时多问问自己还有没有其他的方法,探求最 ...

  8. 前端面试手写代码——JS数组去重

    目录 1 测试用例 2 JS 数组去重4大类型 2.1 元素比较型 2.1.1 双层 for 循环逐一比较(es5常用) 2.1.2 排序相邻比较 2.2 查找元素位置型 2.2.1 indexOf ...

  9. JS 数组去重(数组元素是对象的情况)

    js数组去重有经典的 几种方法 但当数组元素是对象时,就不能简单地比较了,需要以某种方式遍历各值再判断是否已出现. 因为: 1.如果是哈希判断法,对象作哈希表的下标,就会自动转换成字符型类型,从而导致 ...

  10. 利用js排序html表格

    在web前端开发中会遇到排序等功能,当然也可以用服务器端来排序,今天我做一个笔记,怎么用js来实现这些复杂的功能呢. 在学习这个之前一定得用html dom jquery 的知识,要不没有办法看明白的 ...

随机推荐

  1. 第一次项目上Linux服务器(三:安装Tomcat及相关命令)

    一.下载Tomcat 去官网:http://tomcat.apache.org/ 找到要下载的Tomcat 本人下载的是apache-tomcat-8.5.29.tar.gz,百度云资源链接:链接:h ...

  2. shell命令——cut

    功能:把行分成域 默认限定符为tab, -d:改变限定符 -f:指定输出力包含的域

  3. 网络之AFNetworking

    Json.Xml解析第三方库多了去,就不一一说明,现在开始进入AFNetworking.由于AFNetworking支持ARC,ASI不支持ARC,现在越来越多的开始使用AFNetworking. h ...

  4. vue实用组件——页面公共头部

    可伸缩自适应的页面头部,屏幕适应范围更广泛 效果如下: 代码如下: <template> <div class="site-header"> <div ...

  5. C++虚析构函数解析

    当派生类对象从内存中撤销时一般先运行派生类的析构函数,然后再调用基类的析构函数. 如果用new运算符建立的派生类的临时对象,对指向基类的指针指向这个临时对象当用delete运算符撤销对象时,系统执行的 ...

  6. Mybatis之SessionFactory原理

    Mybatis在使用前需进行初始化,下面就针对Mybatis的初始化过程进行介绍.Mybatis的初始化过程有两种:基于XML和基于Java API两种方式,下面就针对基于XML的方式进行展开. 一. ...

  7. ApplicationListener用法

    ApplicationListener是spring提供的接口,作用是在web服务器启动时去加载某些程序. 用法: 1.实现ApplicationListener接口,并重写onApplication ...

  8. ubuntu16.04安装ssh服务,并实现远程访问

    一.查看是否安装了ssh服务 apt-cache policy openssh-client openssh-server ubuntu默认安装了openssh-client,openssh-serv ...

  9. python3.8 新特性

    https://docs.python.org/3.8/whatsnew/3.8.html python 3.8的新功能本文解释了与3.7相比,python 3.8中的新特性. 有关完整的详细信息,请 ...

  10. 【 js 基础 】【读书笔记】Javascript “继承”

    是时候写一写 “继承”了,为什么加引号,因为当你阅读完这篇文章,你会知道,说是 继承 其实是不准确的. 一.类1.传统的面向类的语言中的类:类/继承 描述了一种代码的组织结构形式.举个例子:“汽车”可 ...