数组去重方法总结

news/2024/7/19 15:06:27 标签: js, 数组, 去重

1、使用双重循环
优点：兼容性好

js javascript">js-function">js-keyword">function js-title">uniquejs-params">(arr){
    js-keyword">var len=arr.length;
    js-keyword">if(len<=js-number">1) js-keyword">return arr;
    js-keyword">var newArr=[];
    js-keyword">for(js-keyword">var i=js-number">0;i<len;i++){
        js-keyword">for(js-keyword">var j=js-number">0;j<newArr.length;j++){
            js-keyword">if(arr[i]===newArr[j]){
                js-keyword">break;
            }
        }
        js-comment">// 如果newArr中没有arr[i],则最后j===newArr.length
        js-keyword">if(j===newArr.length){
            newArr.push(arr[i]);
        }
    }
    js-keyword">return newArr;
}

2、使用indexof

js matlab">js-function">js-keyword">function js-title">uniquejs-params">(arr){
    js-keyword">if(js-transposed_variable">arr.js-built_in">length<=js-number">1) js-keyword">return arr;
    var newArr=js-matrix">[];
    js-keyword">for(var js-built_in">i=js-number">0;js-built_in">i<js-transposed_variable">arr.js-built_in">length;js-built_in">i++)js-cell">{
        if(newArr.indexOf(arr[i])===-js-number">1)
        newArr.push(arr[i]);
    }
    js-keyword">return newArr;
}

3、先排序再去重
排好序后，只要前后两个数据不相等，就把数据加入新数组
这种方法的效率要比第二种好。

js matlab">js-function">js-keyword">function js-title">uniquejs-params">(arr){
    var len=js-transposed_variable">arr.js-built_in">length;
    js-keyword">if(len<=js-number">1) js-keyword">return arr;
    arr=js-transposed_variable">arr.sort();
    var newArr=js-matrix">[arr[js-number">0]];
    js-keyword">for(var js-built_in">i=js-number">1;js-built_in">i<len;js-built_in">i++)js-cell">{
        if(arr[i-js-number">1]!==arr[i]){
            newArr.push(arr[i]);
        }
    }
    js-keyword">return newArr;
}

或者：

js php">js-function">js-keyword">function js-title">uniquejs-params">(arr){
    js-keyword">var len=arr.length;
    js-keyword">if(len<=js-number">1) js-keyword">return arr;
    arr=arr.sort();
    arr.js-keyword">forEach(js-function">js-keyword">functionjs-params">(item,index,arr){
        js-keyword">if(item==arr[index+js-number">1]){
            arr.splice(index,js-number">1);
        }
    });
    js-keyword">return arr;
}

综合第2、3种方法，如果排好序则比较前后两个是否相等，如果没排好序，则使用indexOf进行判断

js javascript">js-function">js-keyword">function js-title">uniquejs-params">(arr,isSorted){
    js-keyword">var len=arr.length;
    js-keyword">if(len<=js-number">1) js-keyword">return arr;
    js-keyword">var newArr=[arr[js-number">0]];
    js-keyword">for(js-keyword">var i=js-number">1;i<len;i++){
        js-keyword">if(isSorted){
            js-keyword">if(arr[i-js-number">1]!==arr[i]){
                newArr.push(arr[i]);
            }
        }js-keyword">else{
            js-keyword">if(newArr.indexOf(arr[i])==-js-number">1){
                newArr.push(arr[i]);
            }
        }

    }
    js-keyword">return newArr;
}

4、filter
利用indexOf返回的是第一次查找到相关元素的下标，如果元素重复，则遍历后边的元素时，不会将后边的元素返回。

js php">js-function">js-keyword">function js-title">uniquejs-params">(arr){
    js-keyword">var len=arr.length;
    js-keyword">if(len<=js-number">1) js-keyword">return arr;
    js-keyword">var newArr=[];
     newArr=arr.filter(js-function">js-keyword">functionjs-params">(item,index,array){
        js-keyword">return js-keyword">array.indexOf(item)===index;
    });
    js-keyword">return newArr;
}

先排序：

js php">js-function">js-keyword">function js-title">uniquejs-params">(arr){
    js-keyword">var len=arr.length;
    js-keyword">if(len<=js-number">1) js-keyword">return arr;
    js-keyword">var newArr=[];
     newArr=arr.sort().filter(js-function">js-keyword">functionjs-params">(item,index,array){
        js-keyword">return item!==js-keyword">array[index-js-number">1];
    });
    js-keyword">return newArr;
}

5、Object键值对
如果obj中由item这个键，则返回true，不会返回该item，不然就把item设为obj的键。
问题：由于object中所有的键都为字符串，所以1和‘1’是相等的。

js php">js-keyword">var js-keyword">array=[js-number">1,js-number">2,js-number">1,js-number">1,js-string">'1'];
js-function">js-keyword">function js-title">uniquejs-params">(array){
    js-keyword">var obj={};
    js-keyword">return js-keyword">array.filter(js-function">js-keyword">functionjs-params">(item,index,array){
        js-keyword">return obj.hasOwnProperty(item)?js-keyword">false:(obj[item]=js-keyword">true);
    });
}
console.log(unique(js-keyword">array));js-comment">//[1,2]

改进：
使用typeof item+item作为键，这样的话，1和‘1’对应的键分别为number1、string1，会被认为是不相等的

js php">js-keyword">var js-keyword">array=[js-number">1,js-number">2,js-number">1,js-number">1,js-string">'1'];
js-function">js-keyword">function js-title">uniquejs-params">(array){
    js-keyword">var obj={};
    js-keyword">return js-keyword">array.filter(js-function">js-keyword">functionjs-params">(item,index,array){
        js-comment">//console.log(typeof item+item);//number1,number2,number1,number1,string1
        js-keyword">return obj.hasOwnProperty(typeof item+item)?js-keyword">false:(obj[typeof item+item]=js-keyword">true);
    });
}
console.log(unique(js-keyword">array));js-comment">//[1,2,'1']

ES6：
1、使用Set结构

js php">js-function">js-keyword">function js-title">uniquejs-params">(array){
    js-keyword">return js-keyword">Array.from(js-keyword">new Set(js-keyword">array));
}

简化：

js php">js-function">js-keyword">function js-title">uniquejs-params">(array){
    js-keyword">return [...js-keyword">new Set(js-keyword">array)];
}

再简化：

js lasso">js-built_in">var uniquejs-subst">=(js-built_in">array)js-subst">=>js-preprocessor">[js-attribute">...js-literal">new js-built_in">Set(js-built_in">array)js-preprocessor">]js-markup">;

2、使用Map结构

js coffeescript">js-reserved">function unique(arr){
    js-reserved">var map=js-keyword">new Map();
    js-keyword">return arr.filterjs-function">js-params">((item)=>!map.has(item)&&map.set(item,js-literal">true));
}
js-title">console.js-title">logjs-params">(unique([js-number">1,js-number">1,js-number">2,js-number">4,js-number">4]));

数组去重的应用：

统计页面有多少种元素？
首先通过document.getElementsByTagName("*") 获得总共有多少种元素，再通过数组去重的方法去掉重复的元素。


http://www.niftyadmin.cn/n/764381.html

相关文章

zenmap nmap输出无显示_Nmap的使用 十一

zenmap nmap输出无显示_Nmap的使用 十一

zenmap是nmap是nmap的图形界面&#xff0c;软件打开后如下&#xff1a;填写好目标IP或者域名后&#xff0c;配置选择好类型后按扫描&#xff0c;就自动会显示当前扫描信息如果配置中没有你想要的&#xff0c;可以选择配置&#xff0c;新的配置或命令&#xff0c;或者选择编辑选…
阅读更多...
Javascript严格模式详解

Javascript严格模式详解

一、概述 1、什么是严格模式&#xff1f; 除了正常模式意外&#xff0c;ES5&#xff08;2009年发布&#xff09;还添加了一种模式&#xff0c;即“严格模式”。这种模式使javascript在更加严格的条件下运行。 2、为什么使用严格模式&#xff1f; 消除javascript语言中一些不…
阅读更多...
联想电脑锁屏界面设置被组织隐藏_电脑如何快速锁屏

联想电脑锁屏界面设置被组织隐藏_电脑如何快速锁屏

电脑如何一键锁屏锁屏大家都不陌生&#xff0c;我们在使手机的时候防止误触就要设置锁屏&#xff0c;而且它还可以保护我们数据安全。那么电脑如何一键锁屏呢&#xff1f;今天&#xff0c;就将电脑一键锁屏的方法分享给你们&#xff0c;有需要就一起来了解一下吧电脑锁屏快捷键…
阅读更多...
如何实现同一浏览器多个标签页之间的通信（一）——localStorage

如何实现同一浏览器多个标签页之间的通信（一）——localStorage

一、localStorage &#xff08;1&#xff09;localStorage是什么&#xff1f; localStorage对象在修订过的HTML5规范中作为持久保存在客户端数据的方案取代了globalStorage&#xff0c;是Storage的实例。 注意&#xff1a;要访问一个localStorage对象&#xff0c;页面必须来…
阅读更多...
如何实现同一浏览器多个标签页之间的通信（二）——cookie+setInterval

如何实现同一浏览器多个标签页之间的通信（二）——cookie+setInterval

二、cookie &#xff08;1&#xff09;cookie是什么&#xff1f; HTTP Cookie&#xff0c;通常直接叫做cookie&#xff0c;最初是在客户端用于存储回话信息的。该标准要求服务器对任意HTTP请求发送Set-Cookie HTTP头作为响应的一部分&#xff0c;其中包含回话信息。浏览器会存…
阅读更多...
Cdn英文的读音音标_THE的两种读音

Cdn英文的读音音标_THE的两种读音

THE的两种读音微信订阅号又㕛叒叕改版啦&#xff0c; 若想迅速发现并阅读小白的推送内容&#xff0c;请动手设置“星标”吧。① 点击上方 “英文小白”② 点击右上角“...” ③ 点选“设为星标 ★ ”在英文中&#xff0c;冠词有3个&#xff1a;a、an与the。a、an为不定冠词&…
阅读更多...
图片数据提取_技能篇学习笔记之自制矢量数据

图片数据提取_技能篇学习笔记之自制矢量数据

又过了好久没来更了。恰好前几天同学提到了如何用三调中的道路面要素提取中心线的问题(之前这部分我是在GIS中利用ArcScan直接提取道路中心线&#xff0c;效果还可以)。很尬的是&#xff0c;当时没想起操作&#xff0c;后来百度了一番&#xff1a;其原理就是将二值化的栅格图作…
阅读更多...
webpack，extract-text-webpack-plugin报错：Use Chunks.groupsIterable and filter by instanceof EntryPoint

webpack，extract-text-webpack-plugin报错：Use Chunks.groupsIterable and filter by instanceof EntryPoint

一、extrack-tex-webpack-plugin作用&#xff1a; 为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象 二、使用 1、 npm install --save-dev extract-webpack-plugin 2、webpack.production.config.js中 const webpackrequire("webpack"); //..…
阅读更多...
最新文章

Copyright @ 2022~2023