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 相关文章推荐
JavaScript 字符串连接性能优化
Dec 20 Javascript
js实现权限树的更新权限时的全选全消功能
Feb 17 Javascript
javascript创建动态表单的方法
Jul 25 Javascript
JavaScript的jQuery库插件的简要开发指南
Aug 12 Javascript
js中javascript:void(0) 真正含义
Nov 05 Javascript
jquery中取消和绑定hover事件的实现代码
Jun 02 Javascript
jQuery Dialog 取消右上角删除按钮事件
Sep 07 Javascript
VueJs 搭建Axios接口请求工具
Nov 20 Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
Mar 15 Javascript
jquery简单实现纵向的无缝滚动代码实例
Apr 01 jQuery
解决ele ui 表格表头太长问题的实现
Nov 13 Javascript
Vue-resource安装过程及使用方法解析
Jul 21 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
Linux下ZendOptimizer的安装与配置方法
2007/04/12 PHP
php addslashes和mysql_real_escape_string
2010/01/24 PHP
php结合表单实现一些简单功能的例子
2011/06/04 PHP
php中选择什么接口(mysql、mysqli)访问mysql
2013/02/06 PHP
CodeIgniter模板引擎使用实例
2014/07/15 PHP
Kindeditor编辑器添加图片上传水印功能(php代码)
2017/08/03 PHP
PHP封装的page分页类定义与用法完整示例
2018/12/24 PHP
用jquery来定位
2007/02/20 Javascript
js生成动态表格并为每个单元格添加单击事件的方法
2014/04/14 Javascript
Nodejs中调用系统命令、Shell脚本和Python脚本的方法和实例
2015/01/01 NodeJs
JavaScript父子窗体间的调用方法
2015/03/31 Javascript
javascript中$(function() {});写与不写有哪些区别
2015/08/10 Javascript
极力推荐10个短小实用的JavaScript代码段
2016/08/03 Javascript
jQuery实现手机上输入后隐藏键盘功能
2017/01/04 Javascript
js中的触发事件对象event.srcElement与event.target详解
2017/03/15 Javascript
node.js操作mysql简单实例
2017/05/25 Javascript
iview给radio按钮组件加点击事件的实例
2017/09/30 Javascript
Node之简单的前后端交互(实例讲解)
2017/11/14 Javascript
JavaScript判断日期时间差的实例代码
2018/03/01 Javascript
vue 中滚动条始终定位在底部的方法
2018/09/03 Javascript
Vue项目中使用WebUploader实现文件上传的方法
2019/07/21 Javascript
Emberjs 通过 axios 下载文件的方法
2019/09/03 Javascript
layui自己添加图片按钮并点击跳转页面的例子
2019/09/14 Javascript
[02:46]完美世界DOTA2联赛PWL DAY4集锦
2020/11/03 DOTA
[47:03]完美世界DOTA2联赛PWL S3 access vs LBZS 第一场 12.20
2020/12/23 DOTA
python2.7安装图文教程
2018/03/13 Python
Python3爬虫关于识别检验滑动验证码的实例
2020/07/30 Python
html5中去掉input type date默认样式的方法
2018/09/06 HTML / CSS
AmazeUI 输入框组的示例代码
2020/08/14 HTML / CSS
英国时尚优质的女装:Hope Fashion
2018/08/14 全球购物
Linux如何命名文件--使用文件名时应注意
2014/05/29 面试题
毕业生自荐书
2014/02/03 职场文书
2014年敬老院工作总结
2014/12/08 职场文书
火烧圆明园观后感
2015/06/03 职场文书
幼儿园园长六一致辞
2015/07/31 职场文书
《群青的幻想曲》京力秋树角色PV公开
2022/04/08 日漫