这个老问题,网上普遍都有了,为什么要再写一遍呢,主要是为了记个笔记。。。

遍历时搜索结果数组

思路很明确,如下

  • 新建一个数组存放结果
  • 循环遍历原数组,对于每一个元素,在结果数组中搜索是否存在
  • 若不存在则存入结果数组中,返回第二步,直到循环结束

代码就不上了,网上一大把。

这是最直接的方法,但由于嵌套了循环,效率不高。

先排序后比较

  • 先将原数组进行排序
  • 新建一个结果数组
  • 遍历排序后的数组,比较第i个元素与结果数组的最后一个元素是否相等
  • 如果不相等则存入结果数组

同不上代码。

速度是快了些,但返回的是一个排序后的数组,并且有更快的方法。

使用对象记录已有元素

这个方法使用hashtable结构,避免了循环嵌套,而且返回的数组顺序没改变,效率也高。

主要思路是将原数组的元素作为对象的属性名来记录是否出现过:

  • 新建一个对象与结果数组
  • 遍历原数组,对于第i个元素,访问对象中属性名为i的属性
  • 如果属性不存在,则标记此属性为true,并将此元素存入结果数组中,返回第二步直到循环结束

但是这样做也有个问题,对象的属性名在访问时会被转换为字符串,因此不同类型的值也可能被去重,

比如数字0跟字符’0’

解决办法:将hashtable中的标记 true ,改为保存出现过的类型的数组,在判断元素是否出现时,多判断一步保存的类型数组中是否出现过此类型即可

Array.prototype.unique = function()
{
var n = {}, r = [], len = this.length, val, type;
for (var i = 0; i < this.length; i++) {
val = this[i]; //数组元素
type = typeof val; //数组元素的类型
if (!n[val]) { //如果没有记录
n[val] = [type]; //保存类型
r.push(val); //保存元素到结果数组
} else if (n[val].indexOf(type) < 0) { //如果有记录,判断其类型是否在记录数组中,如果没有
n[val].push(type); //将此类型添加到记录数组中
r.push(val); //保存元素到结果数组
}
}
return r;
}

此方法效率高,并且返回的数组元素顺序不变。

ES6

ES6的许多新特性让人眼前一亮,最近拜读阮一峰老师的ECMAScript 6入门,又皮卡了一种新的数组去重方法

就是利用扩展运算符(…)跟Set数据结构的不重复特性来达到给数组去重的目的。

Array.prototype.unique = function(){
return [...new Set(this)];
};

…就一行代码,简洁。

参考

JavaScript数组去重的几种方法的更多相关文章

  1. JavaScript数组去重的10种方法

    「数组去重」的确是个老生常谈的问题了,但是你真正的掌握了吗?平时开发中是不是用最简单粗暴的方法来去重?注意到它的性能问题了吗?当面试官对你回答的四个去重方法都不满意时你可以想出更简单且性能能更好的方法 ...

  2. JavaScript数组去重的四种方法

    今天,洗澡的想一个有趣的问题,使用js给数组去重,我想了四种方法,虽然今天的任务没有完成,5555: 不多说,po代码: //方法一:简单循环去重    Array.prototype.unique1 ...

  3. [转] JavaScript数组去重(12种方法)

    数组去重,一般都是在面试的时候才会碰到,一般是要求手写数组去重方法的代码.如果是被提问到,数组去重的方法有哪些?你能答出其中的10种,面试官很有可能对你刮目相看.在真实的项目中碰到的数组去重,一般都是 ...

  4. javascript数组去重的3种方法

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! javascript数组去重 <!DOCTYPE html> <html> < ...

  5. JavaScript数组去重(12种方法,史上最全)

    参考博客:https://segmentfault.com/a/1190000016418021?utm_source=tag-newest

  6. JavaScript中数组去重的几种方法

    JavaScript中数组去重的几种方法 正常情况下,数据去重的工作一般都是由后端同事来完成的,但是前端也要掌握好处理数据的能力,万一去重的工作交给我们大前端处理,我们也不能怂呀.现在我总结了一些去重 ...

  7. js中数组去重的几种方法

    js中数组去重的几种方法         1.遍历数组,一一比较,比较到相同的就删除后面的                 function unique(arr){                 ...

  8. JavaScript数组去重的7种方式

    1.利用额外数组 function unique(array) {    if (!Array.isArray(array)) return;     let newArray = [];    fo ...

  9. 关于数组去重的几种方法-------javascript描述

    第一种方法:借助json对象来实现,若json对象中无该属性则添加,否则不添加,最后返回json对象的属性,时间复杂度为O(n) function deleteArrayRepeat(arr) { v ...

随机推荐

  1. signalR selfhost 版本兼容问题

    一.异常简要说明 最近在学习signalR,i按照http://www.asp.net/signalr/overview/deployment/tutorial-signalr-self-host 这 ...

  2. Android带图片的Toast(自定义Toast)

    使用Android默认的Toast Toast简介: Toast是一个简单的消息显示框,能够短暂的出现在屏幕的某个位置,显示提示消息. 默认的位置是屏幕的下方正中,一般Toast的使用如下: Toas ...

  3. yii小细节

    1.main.php增加导航栏严格区分大小写,否则会出现404错误 2.增加'分页'功能---前后台的models里面的search.php 添加 public function search($pa ...

  4. 【转】Linux makefile 教程 非常详细,且易懂

    From: http://blog.csdn.net/liang13664759/article/details/1771246 最近在学习Linux下的C编程,买了一本叫<Linux环境下的C ...

  5. GroupJoin和Join的声明及调用

    public static IEnumerable<TResult> Join<TOuter, TInner, TKey, TResult>(this IEnumerable& ...

  6. WPF 变量转换的实现

    有时候,我们传入的是一个值,但是真正显示的需要是另一个值,这时候就需要转换.比如我们传入一个枚举值,而不同的枚举值对于的图片是不一样的. 这时候就需要一个转换规则.WPF里面给我们提供了一个接口IVa ...

  7. wpf 悬浮窗口的实现

    又到了写点东西的时候,因为有了新的收获,所以用随笔来记录下自己的成长.话不多说,正入主题. 最近又遇到一个新的需求,有一组控件,需要悬浮显示在面板的边缘上,刚开始的时候,是不显示的,点击后显示,然后再 ...

  8. H5(二)

    音视频处理   视频处理     基本内容       使用Flash技术处理HTML页面中的视频内容         包含音频.动画.网页游戏等  特点    浏览器原生不支持(IE浏览器要求安装A ...

  9. Win10 UI入门 圆形控件

    动态模版绑定 http://blog.csdn.net/XXChen2/article/details/4552554

  10. 基于Codeigniter框架实现的APNS批量推送—叮咚,查水表

    最近兼职公司已经众筹成功的无线门铃的消息推送出现了问题,导致有些用户接收不到推送的消息,真是吓死宝宝了,毕竟自己一手包办的后台服务,影响公司信誉是多么的尴尬,容我简单介绍一下我们的需求:公司开发的是一 ...