js 数组去重(7种)
第一次写技术博客,之前总是认为写这些会很浪费时间,还不如多看几篇技术博文。但。。。但昨天不知道受了什么刺激,好像有什么在驱使着自己要写一样,所以才有了今天的第一篇博文。总觉得应该要坚持这样写下去。初次写,并不知道写些什么,就慢慢地整理些以往的总结吧!
文中如果有哪里写得不准确或者有任何建议的,欢迎毫不吝啬地指出!
现在,我们就切入主题吧!哈哈~~ 下面是我整理的目前想到的几种数据去重方法:
方法一:原理:利用indexOf()遍历数组,如果临时数组找不到该元素,则push到临时数组,否则不做处理
function uniqArr1(arr) {
var res = []; for (var i = 0,len = arr.length; i < len; i++) {
if (res.indexOf(arr[i]) == -1) {
res.push(arr[i]);
}
} return res;
}
}
方法二:原理:同样利用indexOf()遍历数组,如果元素首次出现位置和它的索引相等,则说明不是重复元素,push到临时数组,否则不做处理
function uniqArr2(arr) {
var res = [arr[0]]; for (var i = 1,len = arr.length; i < len; i++) {
if (arr.indexOf(arr[i]) == i) {
res.push(arr[i]);
}
} return res;
}
方法三:原理:利用对象键值唯一性,如果对象没有该属性,则添加该属性,同时将该元素push到临时数组
function uniqArr3(arr) {
var obj = {},
res = []; for (var i = 1,len = arr.length; i < len; i++) {
if (!obj[arr[i]]) {
obj[arr[i]] = true;
res.push(arr[i]);
}
} return res;
}
方法四:原理:同样利用对象键值唯一性,唯一不同的地方是这里不再使用临时数组变量,而是利用Object.keys()方法将去重后的结果返回
注意:这里的返回结果跟上述几种不太一致,原因是这里是对象的key,每一项都是字符串的形式,同时返回的结果数组元素的顺序是不确定的
function uniqArr4(arr) {
var obj = {}; for (var i = 1,len = arr.length; i < len; i++) {
if (!obj[arr[i]]) {
obj[arr[i]] = true;
}
}
return Object.keys(obj);
}
方法五:原理:先对原数组进行排序,临时数组先存储第一个元素,然后从第二个元素开始循环判断排序后的原数组(arr)是否与临时数组(res)的第length-1个元素(即res的最后一个元素,也即res每次新添加的元素)是否相等,若不相等,则push到res,这样就确保了每次push到res中的都是不重复的。
注意:这里返回的结果数组同样顺序是有变化的(方法四顺序也有变化)
function uniqArr5(arr) {
arr.sort();
var res = [arr[0]]; for (var i = 1,len = arr.length; i < len; i++) {
if (arr[i] !== res[res.length -1]) {
res.push(arr[i]);
}
} return res;
}
方法六:原理:嵌套循环,如果相等,则截掉后面的,这里要注意splice会影响到原数组,所以这里重新计算了len值和j值。
function uniqArr6(arr) {
var len = arr.length; for (var i = 0; i < len; i++) {
for (var j = i + 1; j < len; j++) {
if (arr[i] === arr[j]) {
arr.splice(j, 1);
len = arr.length;
j--;
}
}
} return arr;
}
方法七:原理:ES6新的数据结构set,类似数组,但成员的值都是唯一的,所以利用这个特性可以做到数组去重
function uniqArr7(arr) {
var res = new Set(arr);
return [...res];
}
暂且先分析了几种去重方法的实现原理,关于上述几种去重方法的性能分析后面将进行补充。。。
js 数组去重(7种)的更多相关文章
- js数组去重五种方法
今天来聊一聊JS数组去重的一些方法,包括一些网上看到的和自己总结的,总共5种方法(ES5). 第一种:遍历数组法 这种方法最简单最直观,也最容易理解,代码如下: var arr = [2, 8, 5, ...
- js数组去重几种思路
在一些后台语言中都内置了一些方法来处理数组或集合中重复的数据.但是js中并没有类似的方法,网上已经有一些方法,但是不够详细.部分代码来源于网络.个人总计如下:大致有4种思路 1)使用两次循环比较原始的 ...
- js数组去重的4种方法
js数组去重,老生长谈,今天对其进行一番归纳,总结出来4种方法 贴入代码前 ,先对浏览器Array对象进行支持indexOf和forEach的polyfill Array.prototype.inde ...
- JS数组去重的几种常见方法
JS数组去重的几种常见方法 一.简单的去重方法 // 最简单数组去重法 /* * 新建一新数组,遍历传入数组,值不在新数组就push进该新数组中 * IE8以下不支持数组的indexOf方法 * */ ...
- JS数组去重的6种算法实现
1.遍历数组法 最简单的去重方法,实现思路:新建一新数组,遍历传入数组,值不在新数组就加入该新数组中:注意点:判断值是否在数组的方法"indexOf"是ECMAScript5 方法 ...
- JS 数组去重(数组元素是对象的情况)
js数组去重有经典的 几种方法 但当数组元素是对象时,就不能简单地比较了,需要以某种方式遍历各值再判断是否已出现. 因为: 1.如果是哈希判断法,对象作哈希表的下标,就会自动转换成字符型类型,从而导致 ...
- js数组去重常用方法
js数组去重是面试中经常会碰到的问题,无论是前端还是node.js数组常见的有两种形式,一种是数组各元素均为基本数据类型,常见的为数组字符串格式,形如['a','b','c'];一种是数组各元素不定, ...
- js数组去重的方法(转)
JS数组去重的几种常见方法 一.简单的去重方法 // 最简单数组去重法 /* * 新建一新数组,遍历传入数组,值不在新数组就push进该新数组中 * IE8以下不支持数组的indexOf方法 * */ ...
- js 数组去重求和 (转载)
方法一:js数组id去重,value值相加问题 来源:https://www.jianshu.com/p/8f79e31b46ed // js let arr = [ { id: 1, value: ...
随机推荐
- UITableView 一直显示滚动条(ScrollBar Indicators)、滚动条Width(宽度)、滚动条Color(颜色)
在 IOS 中,对 UIScrollView 的滚动条(ScrollBar Indicators)的自定义设置接口,一直都是很少的.除了能自定义简单的样式(UIScrollViewIndicatorS ...
- WPF datagrid 加入图片
<DataGridTemplateColumn Header="图像" Width="SizeToCells"> <DataGridTempl ...
- MVC4做网站Demo进行重写的问题。
自从学习MVC4开始,边学边写这个demo,写了也有一年多了.开始觉得是一个小例子把所有的代码都写在一个项目中,边写边改越写越混乱,越到后来很多东西自己都理不清了.后来在群里跟 @怒放 在讨论这个问题 ...
- floating IP 原理分析 - 每天5分钟玩转 OpenStack(107)
上一节我们通过 Web UI 创建为 cirros-vm3 分配了浮动 IP,今天将分析其工作原理. 首先查看 router 的 interface 配置: 可以看到,floating IP 已经配置 ...
- Web APi之HttpClient注意事项以及建议(四)
前言 之前对于用SelfHost来手动实现Web API的宿主模式,似乎不是太深入,所以本篇文章我们一起来讨论关于利用HttpClient来访问Web API上的资源来进行探讨以及注意相关事项,希望此 ...
- HTML5 Audio/Video 标签,属性,方法,事件汇总
HTML5 Audio/Video 标签,属性,方法,事件汇总 (转) 2011-06-28 13:16:48 <audio> 标签属性:src:音乐的URLpreload:预加载au ...
- C# 将excel表格嵌入到Word中
C# 将excel表格嵌入到Word中 继续开扒,今天要实现的是使用C#将excel表格嵌入到Word中这个功能,将word表格导入到excel中我已经写过了,如有需要可参考我之前的文章,在开始前还有 ...
- cocopads命令行
- 【Java心得总结六】Java容器中——Collection
在[Java心得总结五]Java容器上——容器初探这篇博文中,我对Java容器类库从一个整体的偏向于宏观的角度初步认识了Java容器类库.而在这篇博文中,我想着重对容器类库中的Collection容器 ...
- AppCan学习笔记----关闭页面listview动态加载数据
AppCan页面关闭 AppCan 的页面是由两个HTML组成,如果要完全关闭的话需要在主HTML eg.index.html中关闭,关闭方法:appcan.window.close(-1); 管道 ...