当前位置:首页 > 日记 > 正文

Javascript中数组去重与拍平的方法示例

Javascript中数组去重与拍平的方法示例

数组的判断

在说如何进行数组的去重和拍平之前,先说一下怎么判断数组,因为要进行数组的处理当然要先判断下传过来的数据是不是数组。

首先我们都知道js的数据类型只有5种,分别是Undefined、Null、Boolean、Number和String,数组只是一个对象,用typeof([])返回的结果知识一个Object的字符串,因此我们需要通过其他手段来判断它,这里就说两种方法。

第一种用instenceof方法

instanceof是ES5提供的一个方法,它可以用来判断实例是否是某个类的实例,例如:

[] instenceof Array//返回结果是true

这种方法的不好之处就是兼容性不好,对于一些低版本浏览器不支持ES5的就要懵逼了。

第二种方法是通过原型链的方式来判断

了解js的话都应该懂得js这个语言的特点就是原型链式的,所有的对象都继承自Object.prototype,而prototype上又有toString()方法,这个toString()方法是干什么用的呢?就是以字符串的形式返回当前对象的值。第一次看可能这句话可能不大明白,举个例吧:

var num = 123;num.toString(); //返回结果为"123"

有没有看明白一点?就是返回num这个对象值的字符串形式,也就是”123”。好了,这跟判断数组有什么关系?想一下所有的对象都继承自Object.prototype,数组也是啊,如果把一个数组送到Object.prototype里作为一个“值”,在调用toString()方法,那它应该显示出这个对象的名字才对啊,这就是判断的原理,代码如下:

Object.prototype.toString.call([]); //结果是"[object Array]"

像jQuery这样的脚本库的isArray()用的就是这个方法。

数组拍平

说完判直奔主题,先是数组拍平,什么是数组拍平呢?就是把[1,[2,[3,4],5]]铺成[1,2,3,4,5]。关于数组拍平我有两种思路,第二种比较奇葩,留点悬念吧哈哈。

第一种是常规思路

对数组进行遍历,如果数组里面套着数组就继续遍历里面的,直到把每个元素都遍历完,然后一边遍历一边塞入新的数组变量里,这样就完成拍平了,具体代码如下:

panelArr = function(arr){ var newArr = []; var isArray = function(obj) {  return Object.prototype.toString.call(obj) === '[object Array]'; }; var dealArr = function(arr){  for (var i = 0;i<arr.length;i++){   isArray(arr[i]) ? dealArr(arr[i]) : newArr.push(arr[i]);  } }; dealArr(arr); return newArr;};console.log(panelArr([1,[2,3]])); //[1,2,3]

当然这个方法也可以写在Array.prototype里,使用起来更方便。这个方法有个问题就是内存占用上,因为采用递归如果数据量大了会占用大量大量内存。

第二种奇葩思路

第二种思路就是不把数组来看,也不遍历了直接拍平。听起来略奇怪,怎么能不遍历就拍平?就是使用join()方法,将数组转换成字符串,然后正则去掉符号最后合并,这个方法在使用注意不能join("") ,因为如果这样分割的话,13是1和3还是13?不好区分,代码如下:

var arr = [1,2,[33,43],20,19];arr.join(".").replace(/,/g,".").split("."); //["1", "2", "33", "43", "20", "19"]

注意:这个方法会转换数据类型成字符串。

数组去重

下面是数组去重,举例来说就是[1,2,3,3,4,5,5,5,6]变成[1,2,3,4,5,6]。这个实现的核心就是去重这里,如果能够快速判断元素是否重复就是关键。

还是两种思路

第一种遍历的思路

就是准备一个新的数组变量,塞入前每次对这个变量进行遍历看看是否有重复的,如果没有就塞入,最后生成的新数组就是去重后的数组了。示例代码如下:

function uniqueArr(arr){ var newArr = []; newArr.push(arr[0]); for(var i = 1; i<arr.length;i++){ var repeat = false; for(var j = 0;j<newArr.length;j++){ if(arr[i] == newArr[j]){ repeat = true; } } if(!repeat){ newArr.push(arr[i]); } } return newArr;}

第二种使用哈希判断

上面那个时间复杂度为O(n^2)的方法并不是什么好方法,它的瓶颈就是判断是否重复这里,所以我们换成一个更高效的检索是否重复的方法,这个方法就是哈希,为什么哈希检索最快?翻翻数据结构吧,这里就不在赘述了。

这个方法的思路就是在原始数组和去重数组之间加入一个哈希过滤,总的来看就是原数组数据交给哈希,看是否有重复,若是没有则添加进去。具体代码如下:

function uniqueArr(arr){ var newArr = [], hashFilter = {}; for(var i = 0;i<arr.length;i++){ if(!hashFilter[arr[i]]){ //若不存在将此属性对应的值改为true,并塞入去重数组中 hashFilter[arr[i]] = true; newArr.push(arr[i]); } } return newArr;}

我青睐第二种,因为在判断是否重复这里真的很快,可以说是秒出。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

相关文章

php使用flock阻塞写入文件和非阻塞

php使用flock阻塞写入文件和非阻塞

写入文件,非阻塞,实例,电脑软件,php,阻塞写入代码:(所有程序会等待上次程序执行结束才会执行,30秒会超时)<?php $file = fopen("test.txt","w+"); $t1 = microtime(TRUE); if (flock($file,LOCK_EX)) { sleep(10); fwrite($file,"Write…

qq签名经典语句搞笑

qq签名经典语句搞笑

语句,搞笑,经典,大全,电脑软件,  一句qq签名经典语句搞笑: 喜欢我的人都是好人,不喜欢我的人都是坏人,讨厌我的都不是人。下面小编给大家分享了关于qq签名经典语句搞笑,希望你喜欢。qq签名经典语句搞笑大全1) 你这么牛&times; 为啥天安门没挂…

Photoshop合成创意的暗黑风格骷髅

Photoshop合成创意的暗黑风格骷髅

创意,场景,骷髅头,风格,女孩,本教程主要使用Photoshop合成创意的暗黑风格骷髅头女孩的场景图,整体的思路很不错,喜欢的朋友让我们一起来学习吧。教程开始前,先通过一个小动画来看一下操作的思路DONGDIHUA-合成教程的动态图12 阅读全文教程结…

JavaScript中匿名函数的递归调用

JavaScript中匿名函数的递归调用

递归调用,匿名函数,电脑软件,JavaScript,不管是什么编程语言,相信稍微写过几行代码的同学,对递归都不会陌生。 以一个简单的阶乘计算为例:function factorial(n) { if (n <= 1) { return 1; } else { return n * factorial(n-1); }}…

Excel制作迟到早退旷工的考勤表

Excel制作迟到早退旷工的考勤表

考勤表,电脑软件,Excel,Excel里面,如何根据打开的时间,算出员工是否迟到、早退或是旷工呢?这样的考勤表如何使用Excel来做。下面我们先看下表。上表中,A列记录的是来上班的时间,即进入公司就打卡,该时间是上班的时间。B列是员工离开公司的时间,…

PS合成童话故事中毛骨悚然的悬浮场

PS合成童话故事中毛骨悚然的悬浮场

毛骨悚然,童话故事,场景,电脑软件,PS,除了令人毛骨悚然的悬浮房屋,你会掌握如何创建一些非常酷的3D风格的字体效果,如何有效地结合你的场景,以及如何使用透视线的角度。最终效果1、新建1300 * 1833 px,分辨率为150 px文件。 2、把素材拖入文档,…

win10分辨率设置

win10分辨率设置

设置,分辨率,电脑软件,win10分辨率怎么设置呢?首先我们需要更新一下显卡驱动,让win10系统识别最优的分辨率状态,接下来的步骤让小编详细的介绍win10分辨率设置的方法。win10分辨率设置方法步骤如下:1.点击右下角的&ldquo;通知中心图标&rdquo;>…

Angularjs 实现移动端在线测评效果

Angularjs 实现移动端在线测评效果

移动端,推荐,在线,效果,电脑软件,注:此文所用的angular版本为 1.6一、运行效果图二、需求1. 点击选项时,背景变为黄色(即选中状态),并且自动切换到下一题2. 切换到下一题时,顶部进度随之改变3. 选中时要把对应的分值记录下来(因为要根据分值算出最…

JavaScript中Hoisting详解  | 变量

JavaScript中Hoisting详解 | 变量

函数声明,提升,变量提升,详解,电脑软件,本文主要给大家介绍了关于JavaScript中Hoisting(变量提升与函数声明提升)的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。如何将 函数声明 / 变量 “移动” 到作用域的顶部…

ppt2010怎样制作艺术字水印

ppt2010怎样制作艺术字水印

方法,水印,艺术字,电脑软件,  ppt2010如何用艺术字做水印呢?这时我们需要用到母板的功能,具体怎么做,对于不常用对于不常用ppt的朋友或许有点难度,下面小编来告诉你ppt2010用艺术字做水印的方法吧。ppt2010用艺术字做水印的方法在&ldquo;视…

php大小写转换函数 | strtolower、

php大小写转换函数 | strtolower、

大小写,转换函数,电脑软件,php,strtoupper,1,将字符串转换成小写strtolower函数: 该函数将传入的字符串参数所有的字符都转换成小写,并以小定形式放回这个字符串。例子:<?php $str = "I want To FLY"; $str = strtolower($str); echo $st…

jQuery 实现鼠标画框并对框内数据

jQuery 实现鼠标画框并对框内数据

数据,实例代码,鼠标,并对,电脑软件,jquery库:jquery -1.10.2.min.js,jQuery UI - v1.12.1。jQuery 代码不多说了,之间上代码。不懂的地方看注释。<script type="text/javascript"> //鼠标按下时的X Y坐标 var mouseDownX; var mouseDownY; /…