js基本操作-数组去重
来源:互联网 发布:淘宝里粉丝福利购入口 编辑:程序博客网 时间:2024/05/18 02:49
简单说说
JavaScript 数组去重经常出现在前端招聘的笔试题里,比如:
有数组 var arr = [‘a’, ‘b’, ‘c’, ‘1’, 0, ‘c’, 1, ”, 1, 0],请用 JavaScript 实现去重函数 unqiue,使得 unique(arr) 返回 [‘a’, ‘b’, ‘c’, ‘1’, 0, 1, ”]
基本介绍
文章主要是对js数组去重的常用方法进行介绍。JS去重,看起来简单,但是其实暗藏许多的小窍门。考的不仅仅是实现这个功能,更能看出你对计算机程序执行的深入理解。下面将从数组去重的方法进行详细的了解。
数组去重的方法
1.嵌套循环比较
两层for循环,for循环中每次从原数组中取出一个元素,用这个元素循环与结果数组对比。若结果数组中没有该元素,则存到结果数组中。
Array.prototype.unique_towFor = Array.prototype.unique_towFor || function(){ var result = []; if(this.length <= 0) return result; result.push(this[0]); for(var i = 1; i < this.length; i++){ var notIn = true; for(var j = 0; j < result.length; j++){ if(this[i] == result[j]){ notIn = false; break; } } if(notIn){ result.push(this[i]); } } return result;}
2.临时数组保存
算法的基本思想,就是,把去重后的结果放在一个临时数组中,对原来数组的元素与临时数组元素比较,临时数组中不存在这个元素的,放入临时数组。
Array.prototype.unique_tempArray = Array.prototype.unique_tempArray || function(){ var result = [];//临时数组 for(var i = 0; i < this.length; i++){ if(result.indexOf(this[i]) == -1){ result.push(this[i]); } } return result;}
3.利用对象去重(基础常用)
创建一个新的数组存放结果,和一个空对象。for循环时,每次取出一个元素与对象进行对比,如果这个元素不重复,则把它存放到结果数组中,同时把这个元素的内容作为对象的一个属性,并赋值,存入到对象中。这个方法用作统计也很方便。
Array.prototype.unique_objectArray = Array.prototype.unique_objectArray || function(){ var result = []; var obj = {}; for(var i = 0; i < this.length; i++){ if(!obj[this[i]]){ obj[this[i]] = 1; result.push(this[i]); }else{ obj[this[i]] ++; } } return result;}
4.先排序,后去重
先把数组排序,然后比较相邻的两个值。 排序的时候用的JS原生的sort方法,JS引擎内部用的是快速排序,此方法速度比较快!无语中。
Array.prototype.unique_sortArray = Array.prototype.unique_sortArray || function(){ this.sort(); var result = [this[0]]; for(var i = 1; i < this.length; i++){ if(this[i] !== result[result.length - 1] ){ result.push(this[i]); } } return result;}
5.利用ES6的Set对象和Array.from方法
- [ ] Set对象.aspx)可以是任何类型的单个值的集合。它是ES6新增的有序列表集合,它不会包含重复项。之前我们通常用对象(Object)或者数组(Array)来实现没有重复项的集合。
- [ ] Array.from()方法可以将一个类数组对象或可遍历对象转换成真正的数组。
Array.prototype.unique_es6SetArray = Array.prototype.unique_esSetArray || function(){ return Array.from(new Set(this));}
6.利用filter和Map对象
- [ ] filter()方法使用指定的函数测试所有元素,并创建一个包含所有通过测试的元素的新数组。
Array.prototype.unique_filterArray = Array.prototype.unique_filterArray || function(){ return this.filter(function(item, index, arr){ if(arr.indexOf(item) == index){ return true; } });}
既然可以使用filter的方法,那么也可以使用filter加object的方法,这里使用Map对象。
Array.prototype.unique_es6MapArray = Array.prototype.unique_es6MapArray || function(){ const seen = new Map(); return this.filter(function(item, index, arr){ !seen.has(item) && seen.set(item, 1); });}
这里的filter函数可以简化,当然也有人这样写
Array.prototype.unique_es6MapArray = Array.prototype.unique_es6MapArray || function(){ const seen = new Map(); return this.filter( (a) => !seen.has(a) && seen.set(a, 1) );}
7.使用第三方
最后,可以使用第三方库函数jquery和underscore或者lodash下面以lodash和underscore为例
Array.prototype.unique_3partyArray = Array.prototype.unique_3partyArray || function(){ return _.uniq(arr);//要先引入lodash.js或者underscore.js}
其他说明
- 以上的所有方法,都来自网上。
- 所有的方法,都必须脚踏实地,在具体应用场景下去分析、去选择,我们应该按照具体的情况,来选择方法。
- 因为浏览器的多样性,前端的应用场景经常很复杂,性能优化充满挑战,也充满机遇。
- 学会了才是自己的,知道会用会写,才是我们最终的目标。
方法中,建议参考underscore.js的源代码的方法。以下是underscore.js中uniq的源码。
// Produce a duplicate-free version of the array. If the array has already // been sorted, you have the option of using a faster algorithm. // Aliased as `unique`. _.uniq = _.unique = function(array, isSorted, iteratee, context) { if (!_.isBoolean(isSorted)) { context = iteratee; iteratee = isSorted; isSorted = false; } if (iteratee != null) iteratee = cb(iteratee, context); var result = []; var seen = []; for (var i = 0, length = getLength(array); i < length; i++) { var value = array[i], computed = iteratee ? iteratee(value, i, array) : value; if (isSorted) { if (!i || seen !== computed) result.push(value); seen = computed; } else if (iteratee) { if (!_.contains(seen, computed)) { seen.push(computed); result.push(value); } } else if (!_.contains(result, value)) { result.push(value); } } return result; };
文档说明如下:
uniq_.uniq(array, [isSorted], [iteratee]) Alias: unique
Produces a duplicate-free version of the array, using === to test object equality. In particular only the first occurence of each value is kept. If you know in advance that the array is sorted, passing true for isSorted will run a much faster algorithm. If you want to compute unique items based on a transformation, pass an iteratee function.
_.uniq([1, 2, 1, 4, 1, 3]);
=> [1, 2, 4, 3]
本文仅只用于学习、研究和交流目的,我也是学习过后慢慢总结过来的,如果有什么错误或者好的建议,欢迎大家批评指正!
- js基本操作-数组去重
- JS 数组去重
- js数组去重
- js 数组去重
- js 数组去重
- js数组去重
- js 数组去重
- js数组去重
- JS 数组去重
- //js数组去重
- js-数组去重
- js数组去重
- js 数组去重
- js数组去重
- JS 数组去重
- JS 数组去重
- js数组去重
- JS 数组去重
- 编译release版本签名系统
- php namespace及use的用法
- iOS快速获取系统相册的封装类
- j2ee的web项目开发中,效率问题
- Java BigDecimal详解
- js基本操作-数组去重
- adb打开关闭
- 堆内存于栈内存怎么区别
- Android 将EditText光标移动到字符串末尾
- 模仿QQ记住账号和密码的登陆与实现的android开发实例
- Unity3d_基础之理解Gameobject ,gameObject,Transform,transform的区别和关联
- 简单易用的JSON与List相互转换
- 关于android rom包中,文件解包
- 【Transition】Android炫酷的Activity切换效果,共享元素