JavaScript学习笔记之数组去重


Posted in Javascript onMarch 23, 2016

推荐阅读:JavaScript学习笔记之数组的增、删、改、查

话说面试常会碰到面试官会问JavaScript实现数组去重的问题,最近刚好在学习有关于JavaScript数组相关的知识,趁此机会整理了一些有关于JavaScript数组去重的方法。

下面这些数组去重的方法是自己收集和整理的,如有不对希望指正文中不对之处。

双重循环去重

这个方法使用了两个for循环做遍历。整个思路是:

构建一个空数组用来存放去重后的数组

外面的for循环对原数组做遍历,每次从数组中取出一个元素与结果数组做对比
如果原数组取出的元素与结果数组元素相同,则跳出循环;反之则将其存放到结果数组中

代码如下:

Array.prototype.unique1 = function () {
// 构建一个新数组,存放结果
var newArray = [this[0]];
// for循环,每次从原数组中取出一个元素
// 用取出的元素循环与结果数组对比
for (var i = 1; i < this.length; i++) {
var repeat = false;
for (var j=0; j < newArray.length; j++) {
// 原数组取出的元素与结果数组元素相同
if(this[i] == newArray[j]) {
repeat = true;
break;
}
}
if(!repeat) {
// 如果结果数组中没有该元素,则存放到结果数组中
newArray.push(this[i]);
}
}
return newArray;
}

假设我们有一个这样的数组:

var arr = [1,2,3,4,'a','b',1,3,4,56,32,34,2,'b','c',5,'1',`2`];
arr.unique1(); // [1, 2, 3, 4, "a", "b", 56, 32, 34, "c", 5]

据说这种方法比较耗时,费性能。简单做个测试(测试方法写得比较拙逼):

function test () {
var arr = [];
for (var i = 0; i < 1000000; i++) {
arr.push(Math.round(Math.random(i) * 10000));
}
doTest(arr, 1);
}
function doTest(arr, n) {
var tStart = (new Date()).getTime();
var re = arr.unique1();
var tEnd = (new Date()).getTime();
console.log('双重循环去重方法使用时间是:' + (tEnd - tStart) + 'ms');
return re;
}
test();

在Chrome控制器运行上面的代码,测试双重循环去重所费时间:11031ms。

上面的方法可以使用forEach()方法和indexOf()方法模拟实现:

function unique1() {
var newArray = [];
this.forEach(function (index) {
if (newArray.indexOf(index) == -1) {
newArray.push(index);
}
});
return newArray;
}

通过unique1.apply(arr)或unique1.call(arr)调用。不过这种方法效率要快得多,同样的上面测试代码,所费时间5423ms,几乎快了一半。

排序遍历去重

先使用sort()方法对原数组做一个排序,排完序之后对数组做遍历,并且检查数组中的第i个元素与结果数组中最后一个元素是否相同。如果不同,则将元素放到结果数组中。

Array.prototype.unique2 = function () {
// 原数组先排序
this.sort();
// 构建一个新数组存放结果
var newArray = [];
for (var i = 1; i < this.length; i++) {
// 检查原数中的第i个元素与结果中的最后一个元素是否相同
// 因为排序了,所以重复元素会在相邻位置
if(this[i] !== newArray[newArray.length - 1]) {
// 如果不同,将元素放到结果数组中
newArray.push(this[i]);
}
}
return newArray;
}

例如:

var arr = [1,2,3,4,'a','b',1,3,4,56,32,34,2,'b','c',5,'1','2'];
arr.unique2(); // ["1", 1, 2, "2", 3, 32, 34, 4, 5, 56, "a", "b", "c"]

这种方法有两个特色:

去重后的数组会做排序,主要是因为原数在去重前做了排序

去重后的数组,与数字相同的数字字符无法区分,比如'1'和1

使用同样的方法,测试所费时间:1232ms。

对象键值对法

这种去重方法实现思路是:

创建一个JavaScript对象以及新数组

使用for循环遍历原数组,每次取出一个元素与JavaScript对象的键做对比

如果不包含,将存入对象的元素的值推入到结果数组中,并且将存入object对象中该属性名的值设置为1

代码如下:

Array.prototype.unique3 = function () {
// 构建一个新数组存放结果
var newArray = [];
// 创建一个空对象
var object = {};
// for循环时,每次取出一个元素与对象进行对比
// 如果这个元素不重复,则将它存放到结果数中
// 同时把这个元素的内容作为对象的一个属性,并赋值为1,
// 存入到第2步建立的对象中
for (var i = 0; i < this.length; i++){
// 检测在object对象中是否包含遍历到的元素的值
if(!object[typeof(this[i]) + this[i]]) {
// 如果不包含,将存入对象的元素的值推入到结果数组中
newArray.push(this[i]);
// 如果不包含,存入object对象中该属性名的值设置为1
object[typeof(this[i]) + this[i]] = 1;
}
}
return newArray;
}

运行前面的示例:

var arr = [1,2,3,4,'a','b',1,3,4,56,32,34,2,'b','c',5,'1','2'];
arr.unique3(); // [1, 2, 3, 4, "a", "b", 56, 32, 34, "c", 5, "1", "2"]

同样的,不同的键可能会被误认为一样;例如: a[1]、a["1"] 。这种方法所费时间:621ms。 这种方法所费时间是最短,但就是占用内存大一些。

除了上面几种方法,还有其他几种方法如下:

// 方法四
Array.prototype.unique4 = function () {
// 构建一个新数组存放结果
var newArray = [];
// 遍历整个数组
for (var i = 0; i < this.length; i++) {
// 遍历是否有重复的值
for (j = i + 1; j < this.length; j++) {
// 如果有相同元素,自增i变量,跳出i的循环
if(this[i] === this[j]) {
j = ++i;
}
}
// 如果没有相同元素,将元素推入到结果数组中
newArray.push(this[i]);
}
return newArray;
}

Chrome测试结果

var arr = [1,2,3,4,'a','b',1,3,4,56,32,34,2,'b','c',5,'1','2'];
arr.unique4(); // ["a", 1, 3, 4, 56, 32, 34, 2, "b", "c", 5, "1", "2"]

同样的,1和'1'无法区分。

// 方法五
Array.prototype.unique5 = function () {
// 构建一个新数组存放结果
var newArray = [];
// 遍历整个数组
for (var i = 0; i < this.length; i++) {
// 如果当前数组的第i值保存到临时数组,那么跳过
var index = this[i];
// 如果数组项不在结果数组中,将这个值推入结果数组中
if (newArray.indexOf(index) === -1) {
newArray.push(index);
}
}
return newArray;
}

Chrome测试结果:

var arr = [1,2,3,4,'a','b',1,3,4,56,32,34,2,'b','c',5,'1','2'];
arr.unique6(); // [1, 2, 3, 4, "a", "b", 56, 32, 34, "c", 5, "1", "2"]

同样的,类似于1和'1'无法区分。所费时间:14361ms。

// 方法六
Array.prototype.unique6 = function () {
return this.reduce(function (newArray, index) {
if(newArray.indexOf(index) < 0) {
newArray.push(index);
}
return newArray;
},[]);
}

测试结果如下:

var arr = [1,2,3,4,'a','b',1,3,4,56,32,34,2,'b','c',5,'1','2'];
arr.unique6(); // [1, 2, 3, 4, "a", "b", 56, 32, 34, "c", 5, "1", "2"]

所费时间:16490ms。

// 方法七
Array.prototype.unique7 = function(){
var newArray;
newArray = this.filter(function (ele,i,arr) {
return arr.indexOf(ele) === i;
});
return newArray;
}

测试结果:

var arr = [1,2,3,4,'a','b',1,3,4,56,32,34,2,'b','c',5,'1','2'];
arr.unique6(); // [1, 2, 3, 4, "a", "b", 56, 32, 34, "c", 5, "1", "2"]

所费时间:13201ms。

方法虽然很多种,但相比下来,下面这种方法是较为优秀的方案:

Array.prototype.unique3 = function () {
// 构建一个新数组存放结果
var newArray = [];
// 创建一个空对象
var object = {};
// for循环时,每次取出一个元素与对象进行对比
// 如果这个元素不重复,则将它存放到结果数中
// 同时把这个元素的内容作为对象的一个属性,并赋值为1,
// 存入到第2步建立的对象中
for (var i = 0; i < this.length; i++){
// 检测在object对象中是否包含遍历到的元素的值
if(!object[typeof(this[i]) + this[i]]) {
// 如果不包含,将存入对象的元素的值推入到结果数组中
newArray.push(this[i]);
// 如果不包含,存入object对象中该属性名的值设置为1
object[typeof(this[i]) + this[i]] = 1;
}
}
return newArray;
}

但在ES6去重还有更简单,更优化的方案,比如:

// ES6
function unique (arr) {
const seen = new Map()
return arr.filter((a) => !seen.has(a) && seen.set(a, 1))
}
// or
function unique (arr) {
return Array.from(new Set(arr))
}

以上所述是小编给大家介绍的JavaScript学习笔记之数组去重,希望对大家有所帮助!

Javascript 相关文章推荐
javascript 对表格的行和列都能加亮显示
Dec 26 Javascript
js multiple全选与取消全选实现代码
Dec 04 Javascript
js实现拉幕效果的广告代码
Sep 02 Javascript
JavaScript实现复制内容到粘贴板代码
Mar 31 Javascript
基于jquery二维码生成插件qrcode
Jan 07 Javascript
Angular企业级开发——MVC之控制器详解
Feb 20 Javascript
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 jQuery
Vue.js进阶知识点总结
Apr 01 Javascript
Vue页面跳转动画效果的实现方法
Sep 23 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
May 22 Javascript
vue中实现回车键登录功能
Feb 19 Javascript
微信小程序实现页面左右滑动
Nov 16 Javascript
JavaScript学习笔记之数组随机排序
Mar 23 #Javascript
JavaScript学习笔记之数组求和方法
Mar 23 #Javascript
JavaScript学习笔记之数组的增、删、改、查
Mar 23 #Javascript
高效利用Angular中内置服务$http、$location等
Mar 22 #Javascript
BootStrap实用代码片段之一
Mar 22 #Javascript
Javascript中的几种继承方式对比分析
Mar 22 #Javascript
JS函数定义方式的区别介绍
Mar 22 #Javascript
You might like
php开发留言板的CRUD(增,删,改,查)操作
2012/04/19 PHP
php微信公众号开发之简答题
2018/10/20 PHP
JS 无法通过W3C验证的处理方法
2010/03/09 Javascript
Jquery实现带动画效果的经典二级导航菜单
2013/03/22 Javascript
Javascript 垃圾收集机制介绍理解
2013/05/14 Javascript
javascript实现iframe框架延时加载的方法
2014/10/30 Javascript
jQuery老黄历完整实现方法
2015/01/16 Javascript
javascript实现图片循环渐显播放的方法
2015/02/24 Javascript
jQuery实现可展开合拢的手风琴面板菜单
2015/09/15 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
2016/07/25 Javascript
浅谈Javascript数据属性与访问器属性
2016/07/26 Javascript
详解axios在node.js中的post使用
2017/04/27 Javascript
JS中的事件委托实例浅析
2018/03/22 Javascript
微信小程序input框中加入小图标的实现方法
2018/06/19 Javascript
如何从0开始用node写一个自己的命令行程序
2018/12/29 Javascript
[13:21]DOTA2国际邀请赛采访专栏:RSnake战队国士无双,Fnatic.Fly
2013/08/06 DOTA
python图像处理之反色实现方法
2015/05/30 Python
简单谈谈Python的pycurl模块
2018/04/07 Python
Python中数组,列表:冒号的灵活用法介绍(np数组,列表倒序)
2018/04/18 Python
Python multiprocessing多进程原理与应用示例
2019/02/28 Python
Python中字符串String的基本内置函数与过滤字符模块函数的基本用法
2019/05/27 Python
python pytest进阶之fixture详解
2019/06/27 Python
Python socket处理client连接过程解析
2020/03/18 Python
Python批量安装卸载1000个apk的方法
2020/04/10 Python
实现ECharts双Y轴左右刻度线一致的例子
2020/05/16 Python
利用CSS的Sass预处理器(框架)来制作居中效果
2016/03/10 HTML / CSS
HTML5实现Notification API桌面通知功能
2016/03/02 HTML / CSS
html5手机键盘弹出收起的处理
2020/01/20 HTML / CSS
工程管理专业毕业生自荐信
2014/01/24 职场文书
酒鬼酒广告词
2014/03/21 职场文书
英文邀请函
2015/02/02 职场文书
2015年基层党建工作总结
2015/05/14 职场文书
同意离婚答辩状
2015/05/22 职场文书
python实现大文本文件分割成多个小文件
2021/04/20 Python
redis三种高可用方式部署的实现
2021/05/11 Redis
SQL Server表分区降低运维和维护成本
2022/04/08 SQL Server