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


Posted in Javascript onFebruary 03, 2017

数组的判断

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

首先我们都知道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;
}

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

总结

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

Javascript 相关文章推荐
经典的带阴影的可拖动的浮动层
Jun 26 Javascript
又一个小巧的图片预加载类
May 05 Javascript
一个背景云变换js特效 鼠标移动背景云变化
Dec 28 Javascript
用json方式实现在 js 中建立一个map
May 02 Javascript
Node.js的特点和应用场景介绍
Nov 04 Javascript
JavaScript使用Replace进行字符串替换的方法
Apr 14 Javascript
jquery实现的仿天猫侧导航tab切换效果
Aug 24 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
Mar 28 Javascript
JS实现列表的响应式排版(推荐)
Sep 01 Javascript
js控制li的隐藏和显示实例代码
Oct 15 Javascript
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 jQuery
在Vue项目中用fullcalendar制作日程表的示例代码
Aug 04 Javascript
JavaScript中for循环的几种写法与效率总结
Feb 03 #Javascript
jquery实现刷新随机变化样式特效(tag标签样式)
Feb 03 #Javascript
漂亮实用的页面loading(加载)封装代码
Feb 03 #Javascript
理解javascript中的Function.prototype.bind的方法
Feb 03 #Javascript
JavaScript数组复制详解
Feb 02 #Javascript
常用jQuery选择器汇总
Feb 02 #Javascript
JavaScript优化以及前段开发小技巧
Feb 02 #Javascript
You might like
暴雪前总裁遗憾:没尽早追赶Dota 取消星际争霸幽灵
2020/03/08 星际争霸
PHP实现数组递归转义的方法
2014/08/28 PHP
Yii中Model(模型)的创建及使用方法
2015/12/28 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
利用jquery操作select下拉列表框的代码
2010/06/04 Javascript
基于NodeJS的前后端分离的思考与实践(一)全栈式开发
2014/09/26 NodeJs
简单实现限制uploadify上传个数
2015/11/16 Javascript
使用jQuery给input标签设置默认值
2016/06/20 Javascript
微信小程序 实例应用(记账)详解
2016/09/28 Javascript
简单理解vue中track-by属性
2016/10/26 Javascript
详解vue2父组件传递props异步数据到子组件的问题
2017/06/29 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
2017/12/08 Javascript
vuejs实现折叠面板展开收缩动画效果
2018/09/06 Javascript
浅谈使用nodejs搭建web服务器的过程
2020/07/20 NodeJs
使用TS来编写express服务器的方法步骤
2020/10/29 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
2020/11/05 Javascript
[01:08:29]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第一场 1月9日
2021/03/11 DOTA
Python实现获取nginx服务器ip及流量统计信息功能示例
2018/05/18 Python
python中将zip压缩包转为gz.tar的方法
2018/10/18 Python
python 快速把超大txt文件转存为csv的实例
2018/10/26 Python
python3实现单目标粒子群算法
2019/11/14 Python
python线程join方法原理解析
2020/02/11 Python
python 基于opencv去除图片阴影
2021/01/26 Python
Java Servlet的主要功能和作用是什么
2014/02/14 面试题
战友聚会邀请函
2014/01/18 职场文书
企业节能减排实施方案
2014/03/19 职场文书
教研活动总结
2014/04/28 职场文书
大学生工作自荐书
2014/06/16 职场文书
商铺门面租房协议书
2014/10/21 职场文书
介绍信格式
2015/01/30 职场文书
煤矿百日安全活动总结
2015/05/07 职场文书
社区禁毒宣传活动总结
2015/05/07 职场文书
债务纠纷代理词
2015/05/25 职场文书
校园之声广播稿
2015/08/18 职场文书
浅谈pytorch中stack和cat的及to_tensor的坑
2021/05/20 Python
NodeJs使用webpack打包项目的方法详解
2022/02/28 NodeJs