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 相关文章推荐
jquery读取xml文件实现省市县三级联动的方法
May 29 Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
Oct 23 Javascript
JavaScript中for循环的几种写法与效率总结
Feb 03 Javascript
webstorm添加vue.js支持的方法教程
Jul 05 Javascript
详解JS函数stack size计算方法
Jun 18 Javascript
koa router 多文件引入的方法示例
May 22 Javascript
Vue实现日历小插件
Jun 26 Javascript
vue实现中部导航栏布局功能
Jul 30 Javascript
iview form清除校验状态的实现
Sep 19 Javascript
js实现GIF动图分解成多帧图片上传
Oct 24 Javascript
React生命周期原理与用法踩坑笔记
Apr 28 Javascript
解决antd的Form组件setFieldsValue的警告问题
Oct 29 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
E路文章系统PHP
2006/12/11 PHP
认识并使用PHP超级全局变量
2010/01/26 PHP
使用php批量删除数据库下所有前缀为prefix_的表
2014/06/09 PHP
详解PHP中的Traits
2015/07/29 PHP
Laravel框架Request、Response及Session操作示例
2019/05/06 PHP
PHP实现一个限制实例化次数的类示例
2019/09/16 PHP
PHP7 windows支持
2021/03/09 PHP
学习YUI.Ext第五日--做拖放Darg&amp;Drop
2007/03/10 Javascript
你需要知道的10个最佳javascript开发实践小结
2012/04/15 Javascript
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
2013/10/22 Javascript
jQuery手机拨号界面特效代码分享
2015/08/27 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
2017/02/08 Javascript
详解vue.js的事件处理器v-on:click
2017/06/27 Javascript
你点的 ES6一些小技巧,请查收
2018/04/25 Javascript
react 国际化的实现代码示例
2018/09/14 Javascript
如何使用electron-builder及electron-updater给项目配置自动更新
2018/12/24 Javascript
Vue学习之axios的使用方法实例分析
2020/01/06 Javascript
vue-socket.io跨域问题有效解决方法
2020/02/11 Javascript
如何使用Javascript中的this关键字
2020/05/28 Javascript
前端如何实现动画过渡效果
2021/02/05 Javascript
Python单元测试框架unittest简明使用实例
2015/04/13 Python
深入解析Python中的线程同步方法
2016/06/14 Python
Python3.6简单的操作Mysql数据库的三个实例
2018/10/17 Python
解决python线程卡死的问题
2019/02/18 Python
python实现输出一个序列的所有子序列示例
2019/11/18 Python
python下载卫星云图合成gif的方法示例
2020/02/18 Python
python爬虫开发之使用python爬虫库requests,urllib与今日头条搜索功能爬取搜索内容实例
2020/03/10 Python
python 使用OpenCV进行简单的人像分割与合成
2021/02/02 Python
Travelstart沙特阿拉伯:廉价航班、豪华酒店和实惠的汽车租赁优惠
2019/04/06 全球购物
俄罗斯GamePark游戏商店网站:购买游戏、游戏机和配件
2020/03/13 全球购物
将一个数的从第5位开始的7个数取出,其余位置0
2016/05/26 面试题
给病人的慰问信
2015/03/23 职场文书
上班旷工检讨书
2015/08/15 职场文书
2019企业给员工的慰问信
2019/06/24 职场文书
《学会生存》读后感3篇
2019/12/09 职场文书
golang通过递归遍历生成树状结构的操作
2021/04/28 Golang