在实际工作或面试中,我们经常会遇到“数组去重”问题,接下来就是使用js实现的数组去重的多种方法:


1.借助ES6提供的Set结构

    var arr = [1,1,2,2,3,3,4,4,5,5,4,3,2,1,1,1];
console.log(arr); //[1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 4, 3, 2, 1, 1, 1]
function noRepeat11(arr){
var newArr = [];
var myset = new Set(arr);//利用了Set结构不能接收重复数据的特点
for(var val of myset){
newArr.push(val)
}
return newArr;
}
var arr2 = noRepeat11(arr)
console.log(arr2); //[1, 2, 3, 4, 5]

2.借助indexOf()方法判断此元素在该数组中首次出现的位置下标与循环的下标是否相等

    var arr = [1,23,1,1,1,3,23,5,6,7,9,9,8,5,5,5];
console.log(arr); //[1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5, 5, 5]
function noRepeat2(arr) {
for (var i = 0; i < arr.length; i++) {
if (arr.indexOf(arr[i]) != i) {
arr.splice(i,1);//删除数组元素后数组长度减1后面的元素前移
i--;//数组下标回退
}
}
return arr;
}
var newArr = noRepeat2(arr);
console.log(newArr); //[1, 23, 3, 5, 6, 7, 9, 8]

3.利用数组中的filter方法

    var arr = ['apple','banana','pear','apple','orange','orange'];
console.log(arr) //["apple", "banana", "pear", "apple", "orange", "orange"]
var newArr = arr.filter(function(value,index,self){
return self.indexOf(value) === index;
});
console.log(newArr); //["apple", "banana", "pear", "orange"]

4.借助新数组 通过indexOf方判断当前元素在数组中的索引如果与循环的下标相等则添加到新数组中

    var arr = [1,23,1,1,1,3,23,5,6,7,9,9,8,5,5,5];
console.log(arr) //[1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5, 5, 5]
function noRepeat4(arr) {
var ret = [];
for (var i = 0; i < arr.length; i++) {
if (arr.indexOf(arr[i]) == i) {
ret.push(arr[i]);
}
}
return ret;
}
var arr2 = noRepeat4(arr);
console.log(arr2); //[1, 23, 3, 5, 6, 7, 9, 8]

5.利用空对象来记录新数组中已经存储过的元素

    var arr = [1,23,1,1,1,3,23,5,6,7,9,9,8,5];
console.log(arr) //[1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5]
var obj={};
var newArr=[];
for(var i=0;i<arr.length;i++){
if(!obj[arr[i]]){
obj[arr[i]]=true;
newArr.push(arr[i]);
}
}
console.log(newArr); //[1, 23, 3, 5, 6, 7, 9, 8]

6.借助新数组,判断新数组中是否存在该元素如果不存在则将此元素添加到新数组中

    var arr = [1,23,1,1,1,3,23,5,6,7,9,9,8,5];
console.log(arr); //[1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5]
function noRepeat6(arr){
var newArr = [];
for(var i = 0; i < arr.length; i++){
if(newArr.indexOf(arr[i]) == -1){
newArr.push(arr[i]);
}
}
return newArr;
}
var arr2 = noRepeat6(arr);
console.log(arr2); //[1, 23, 3, 5, 6, 7, 9, 8]

7.借助新数组,判断新数组中是否存在该元素如果不存在则将此元素添加到新数组中(原数组长度不变但被按字符串顺序排序)

    var arr = [1,23,1,1,1,3,23,5,6,7,9,9,8,5];
console.log(arr); //[1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5]
function noRepeat7(arr) {
var ret = [],
end;//临时变量用于对比重复元素
arr.sort();//将数重新组排序
end = arr[0];
ret.push(arr[0]);
for (var i = 1; i < arr.length; i++) {
if (arr[i] != end) {//当前元素如果和临时元素不等则将此元素添加到新数组中
ret.push(arr[i]);
end = arr[i];
}
}
return ret;
}
var arr2 = noRepeat7(arr);
console.log(arr2); //[1, 23, 3, 5, 6, 7, 8, 9]

8.双层循环改变原数组

    var arr = [1,1,2,2,3,3,4,4,5,5,4,3,1,2,6,6,6,6];
console.log(arr); //[1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 4, 3, 1, 2, 6, 6, 6, 6]
function noRepeat9(arr){
for (var i = 0; i < arr.length; i++) {
for (var j = 0; j < arr.length; j++) {
if (arr[i] == arr[j] && i != j) {//将后面重复的数删掉
arr.splice(j, 1);
}
}
}
return arr;
}
var arr2 = noRepeat9(arr);
console.log(arr2); //[1, 2, 3, 4, 5, 6]

9.将数组的每一个元素依次与其他元素做比较,发现重复元素,删除

    var arr = [1,23,1,1,1,3,23,5,6,7,9,9,8,5,5,5,5];
console.log(arr); //[1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5, 5, 5, 5]
function noRepeat1(arr) {
for(var i = 0; i < arr.length-1; i++){
for(var j = i+1; j < arr.length; j++){
if(arr[i]===arr[j]){
arr.splice(j,1);
j--;
}
}
}
return arr;
}
var arr2 = noRepeat1(arr);
console.log(arr2); //[1, 23, 3, 5, 6, 7, 9, 8]

10.借助新数组

    var arr = [1,1,2,2,3,3,4,4,5,5,4,3,2,1,1,1];
console.log(arr); //[1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 4, 3, 2, 1, 1, 1]
var newArr = [];
for (var i = 0; i < arr.length; i++) {
var repArr = [];//接收重复数据后面的下标
//内层循环找出有重复数据的下标
for (var j = i + 1; j < arr.length; j++) {
if (arr[i] == arr[j]) {
repArr.push(j);//找出后面重复数据的下标
}
}
//console.log(repArr);
if (repArr.length == 0) {//若重复数组没有值说明其不是重复数据
newArr.push(arr[i]);
}
}
console.log(newArr); //[5, 4, 3, 2, 1]

js中数组去重的方法的更多相关文章

  1. js中数组去重的几种方法

    js中数组去重的几种方法         1.遍历数组,一一比较,比较到相同的就删除后面的                 function unique(arr){                 ...

  2. js中数组去重方法及性能对比

    js中数组的 数组去重 常用的数组去重方法以及效率分析: 首先我们先构建一个数组,主要是用于进行去重实验,我们主要实验的量级为1000,10000,100000,500000.具体的生成数组的方法如下 ...

  3. JS中数组去重的九方法

            数组去重方法        方法一:运用set结构特点:存储的数据没有重复的,结果为对象,再用Array.from()转换成数组   var arr = [1,1,2,1,3,4,5] ...

  4. js对数组去重的方法总结-(2019-1)

    最近待业在家,系统地学习了一套js的课程.虽然工作时间真的比较长了,但有些东西只局限在知其然而不知其所以然的程度上,有些知识点通过“血和泪”的经验积累下来,也只是记了结果并没有深究,所以每次听完课都有 ...

  5. JS实现数组去重的方法

    1.使用ES6的Set进行去重 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...

  6. js中数组的检测方法

    在js中可以使用Object.prototype.toString.call()的来检测一个对象是否为一个数组 //检测数组 var a = [1, 2]; console.log(typeof a) ...

  7. JS中数组的迭代方法和归并方法

    昨天总结的JavaScript中的数组Array方法 数组的迭代方法 ES5中为数组定义了5个迭代方法.每个方法都要接收两个参数:要在每一项上面运行的函数和(可选的)运行该函数的作用域对象---影响t ...

  8. JS实现数组去重的方法(6种)

    方法一: 双层循环,外层循环元素,内层循环时比较值 如果有相同的值则跳过,不相同则push进数组 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 Arra ...

  9. JS中数组的拷贝方法

    之前在写一个vue的计算属性时,大概是这样: computed: { updateList () { let newList = this.List /*do something*/ return n ...

随机推荐

  1. MySQL的Explain总结

    Explain简介 MySQL优化器在基于成本的计算和基于规则的SQL优化会生成一个所谓的执行计划,我们就可以使用执行计划查看MySQL对该语句具体的执行方式. 介绍这个好啰嗦就是了,我们可以通过这个 ...

  2. Redis中的原子操作(2)-redis中使用Lua脚本保证命令原子性

    Redis 如何应对并发访问 使用 Lua 脚本 Redis 中如何使用 Lua 脚本 EVAL EVALSHA SCRIPT 命令 SCRIPT LOAD SCRIPT EXISTS SCRIPT ...

  3. es6.4.2api

    这是讲数据库的数据导入到es里  所有用到了mysql! 1.依赖 <?xml version="1.0" encoding="UTF-8"?> & ...

  4. vs code nginx php xdebug配置

    终于把VSCODE XDEBUG配置搞定了 分享一下 1. VSCODE  安装插件 PHP Debug( Debug supprot for PHP with XDebug); 2. VSCODE ...

  5. SSH和SCP的使用方法

    1.SSH使用方法 ssh 用户名@IP 例: ssh ubuntu@192.168.1.190 最近因为项目需求,需要通过ssh来登录Windows,但是一开始一直无法登录,参考下面这个帖子解决了, ...

  6. CSS 网页字体最佳实践

    一般在网页的字体设置中,可以将字体分类三类: 系统字体:使用系统自带的字体 兜底字体:当系统字体无法正常使用,而兜底的字体 Emoji 字体:显示网页中的表情字体 为了满足不同平台,以及 Emoji ...

  7. mysql数据恢复 根据旧备份的sql文件和当前data下的ibd文件恢复innodb引擎数据

    1.使用navicat fro mysql数据库工具进行恢复 2.将原有备份的sql文件导入数据库 3.新建一个空数据库 4将备份数据库的数据表复制到新建数据库(只复制表格式) 5.在命令行模式中 u ...

  8. java类的学习

    什么是类: 类=属性+方法 属性来源于状态(以变量的形式存在):方法来源于动作: *属性对应的是数据,而数据只能存在变量中. 方法内的变量为局部变量:类体中的变量称为成员变量(也称为属性) java中 ...

  9. 3D可视化解决方案为巷道工程安全护航

    最近山东栖霞笏山金矿事故中被困22名矿工的生命安全,在揪着全国民的心.大家都在祈求他们能从井下活着回来. 正是由于被困矿工的坚韧意志和政府相关部门不眠不休的奋力营救,11名矿工终于在被困十余日后平安升 ...

  10. WPF 视频硬解码渲染播放(无空域)(支持4K、8K、高帧率视频)

    MediaWPF 基于 .NET 6 实现视频硬解码渲染Demo(无空域问题) 代码实现仅供学习参考 本项目视频渲染通过显卡进行视频解码,CPU几乎不参与工作,并且不存在令人烦躁的空域问题. 在播放摄 ...