Chason_JS的数组去重方法

原创 已于 2025-01-20 20:30:17 修改 · 171 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
GEO检测
标签
#javascript #前端 #开发语言
于 2023-11-15 11:01:24 首次发布
本文介绍了JavaScript中多种去重数组的方法，包括使用sort配合循环、递归、filter、indexOf、reduce以及利用对象和Set的独特性质，同时展示了如何处理数组对象的去重

  1. 数组根据id去重

// 原始数组
const originalArray = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 1, name: 'Alice Duplicate' },
  { id: 3, name: 'Charlie' }
];

// 使用Map去重
const uniqueArray = [...new Map(originalArray.map(item => [item.id, item])).values()];

console.log(uniqueArray);
// 输出: [
//   { id: 1, name: 'Alice' },
//   { id: 2, name: 'Bob' },
//   { id: 3, name: 'Charlie' }
// ]

  1. 使用sort去重，使用sort对数组排序，然后单循环判断

    let arr = [1, 1, "2", "2", "string", "string", null, null, undefined, undefined];

arr.sort((a, b) => a - b);
for (let i = 0; i < arr.length; i++) {
//这里一定要多加一个条件，否者undfined就会被完全删除
  if (arr[i] === arr[i + 1] && i + 1 < arr.length) {
    arr.splice(i, 1);
    i--;
  }
}
console.log(arr);//[ null, 1, '2', 'string', undefined ]

  2. 使用递归去重，就是为了去重才去重的

    let arr = [1, "2", 1, "2", "string", null, "string", null, undefined, undefined];

//其实整体与第一种循环无异，只是利用了递归的特性
arr.sort((a, b) => a - b);
function recursion(index) {
  if (index >= 1) {
  //判断相同都会删除
    if (arr[index] === arr[index - 1]) {
      arr.splice(index, 1);
    }
    //并且走递归
    recursion(index - 1);
  }
}
recursion(arr.length - 1);

console.log(arr);//[ null, 1, '2', 'string', undefined ]

  3. 使用filter去重，搭配了indexOf返回索引值的特性来实现的

    let arr = [1, "2", 1, "2", "string", null, "string", null, undefined, undefined];

//整体感觉还挺简单，就是indexOf会返回所符合条件的第一个值索引值，然后就会跳出循环
//所以每个数只能有一次与filter的index相同
arr = arr.filter((item, index) => {
  return arr.indexOf(item) === index;
});
console.log(arr);//[ 1, '2', 'string', null, undefined ]

  4. 使用对象属性去重

    let arr = [1, "2", 1, "2", "string", null, "string", null, undefined, undefined];

const obj = {};
const newArr = [];
arr.forEach((item) => {
//对象的值没有赋值之前默认undfined，所以为假，会走进判断
//当再次遇到这个属性的时候已经有值了，并且为真，则会跳过
  if (!obj[item]) {
    obj[item] = true;
    newArr.push(item);
  }
});

console.log(newArr);//[ 1, '2', 'string', null, undefined ]

  5. 使用reduce和includes去重

    let arr = [1, "2", 1, "2", "string", null, "string", null, undefined, undefined];

arr = arr.reduce((prev, cur) => {
//当prev种不存在当前循环遍历的值，就会执行push操作，如果存在，那就存在呗，没事了
  prev.includes(cur) || prev.push(cur);
  return prev;
}, []);

console.log(arr);//[ 1, '2', 'string', null, undefined ]


     
     
  6.  
    使用reduce和indexOf去重
     
    let arr = [1, "2", 1, "2", "string", null, "string", null, undefined, undefined];

arr = arr.reduce((prev, cur) => {
//这里当为真了，就会执行后面的push，上面那种就是当为假了 就会执行后面push
  prev.indexOf(cur) === -1 && prev.push(cur);
  return prev;
}, []);

console.log(arr);//[ 1, '2', 'string', null, undefined ]

     
     
     
  7.  
    双重循环去重，利用两个for循环，进行对比来达到去重的效果
     
    let arr = [1, "2", 1, "2", "string", null, "string", null, undefined, undefined];

for (let i = 0; i < arr.length; i++) {
  for (let j = i + 1; j < arr.length; j++) {
  //利用两层循环，对比是否有相同的值
    if (arr[i] === arr[j]) {
      arr.splice(j, 1);
      //删除值后-1，否者会跳过一个元素
      j--;
    }
  }
}

console.log(arr);//[ 1, '2', 'string', null, undefined ]

     
     
     
  8.  
    使用indexof去重，当indexOf为-1的时候才会新填元素
     
    let arr = [1, "2", 1, "2", "string", null, "string", null, undefined, undefined];

const newArr = [];
for (let i = 0; i < arr.length; i++) {
  if (newArr.indexOf(arr[i]) === -1) {
  //找不到就添加，找到了就证明已经有了，就略过
    newArr.push(arr[i]);
  }
}

console.log(newArr);//[ 1, '2', 'string', null, undefined ]

     
     
     
  9.  
    使用Set去重，Set对象允许你存储任何类型（无论是原始值还是对象引用）的唯一值。
     
    let arr = [1, "2", 1, "2", "string", null, "string", null, undefined, undefined];

//所以就可以利用扩展运算符和new Set 来进行去重
arr = [...new Set(arr)];

console.log(newArr);//[ 1, '2', 'string', null, undefined ]

     
     
    数组对象去重
     
  10.  
    利用对象的特性对数组对象去重
     
    const arr = [
  { id: 1, name: "张三", age: 18 },
  { id: 2, name: "李四", age: 13 },
  { id: 3, name: "张三", age: 15 },
  { id: 2, name: "王五", age: 16 },
  { id: 4, name: "赵六", age: 18 },
];

const obj = {};
const newArr = [];
arr.forEach((item) => {
//循环遍历，判断对象属性是否为真，为假就将数据添加到新数组中
  obj[item.id] ? "" : (obj[item.id] = true && newArr.push(item));
});
console.log(newArr);
//[
//  { id: 1, name: '张三', age: 18 },
//  { id: 2, name: '李四', age: 13 },
//  { id: 3, name: '张三', age: 15 },
//  { id: 4, name: '赵六', age: 18 }
//]
     
     
  11.  
    利用findIndex对数组对象去重，数组有个findIndex方法，会循环遍历，return真的时候会返回当前索引，找不到就返回-1
     
    const arr = [
  { id: 1, name: "张三", age: 18 },
  { id: 2, name: "李四", age: 13 },
  { id: 3, name: "张三", age: 15 },
  { id: 2, name: "王五", age: 16 },
  { id: 4, name: "赵六", age: 18 },
];

const newArr = [];
arr.forEach((item) => {
  if (newArr.findIndex((item1) => item1.id === item.id) === -1) {
    newArr.push(item);
  }
});
console.log(newArr);
//[
//  { id: 1, name: '张三', age: 18 },
//  { id: 2, name: '李四', age: 13 },
//  { id: 3, name: '张三', age: 15 },
//  { id: 4, name: '赵六', age: 18 }
//]

     
     
  12.  
    使用reduce对数组对象去重，reduce()  方法对数组中的每个元素按序执行一个提供的 reducer 函数，每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。
     
    const arr = [
  { id: 1, name: "张三", age: 18 },
  { id: 2, name: "李四", age: 13 },
  { id: 3, name: "张三", age: 15 },
  { id: 2, name: "王五", age: 16 },
  { id: 4, name: "赵六", age: 18 },
];

const obj = {};
//跟单遍历循环去重差不多，只是少定义了一个新的数组，主要还是对数组方法的使用
const newArr = arr.reduce((pre, cur) => {
  obj[cur.id] ? "" : (obj[cur.id] = true && pre.push(cur));
  return pre;
}, []);
console.log(newArr);
//[
//  { id: 1, name: '张三', age: 18 },
//  { id: 2, name: '李四', age: 13 },
//  { id: 3, name: '张三', age: 15 },
//  { id: 4, name: '赵六', age: 18 }
//]

     
     
     
  13.  
    双重循环对数组对象去重，双重循环去重和值类型去重类似，相互对比他们的id来达到去重的效果
     
    const arr = [
  { id: 1, name: "张三", age: 18 },
  { id: 2, name: "李四", age: 13 },
  { id: 3, name: "张三", age: 15 },
  { id: 2, name: "王五", age: 16 },
  { id: 4, name: "赵六", age: 18 },
];

for (let i = 0; i < arr.length; i++) {
  for (let j = i + 1; j < arr.length; j++) {
    if (arr[i].id === arr[j].id) {
      arr.splice(j, 1);
      j--;
    }
  }
}
console.log(arr);
//[
//  { id: 1, name: '张三', age: 18 },
//  { id: 2, name: '李四', age: 13 },
//  { id: 3, name: '张三', age: 15 },
//  { id: 4, name: '赵六', age: 18 }
//]

     
     
     
  14.  
    使用递归对数组对象去重，递归去重
     
    const arr = [
  { id: 1, name: "张三", age: 18 },
  { id: 2, name: "李四", age: 13 },
  { id: 3, name: "张三", age: 15 },
  { id: 2, name: "王五", age: 16 },
  { id: 4, name: "赵六", age: 18 },
];

const obj = {};
const newArr = [];
function recursion(v) {
  if (v >= 0) {
    if (!obj[arr[v].id]) {
      obj[arr[v].id] = true;
      newArr.push(arr[v]);
    }
    recursion(v - 1);
  }
}
recursion(arr.length - 1);
console.log(newArr);
//[
//  { id: 4, name: '赵六', age: 18 },
//  { id: 2, name: '王五', age: 16 },
//  { id: 3, name: '张三', age: 15 },
//  { id: 1, name: '张三', age: 18 }
//]

     
     

                

        

    





  



    

      

        

            

              
                
                  梦千诺
                
              
            

            

                关注
              
            

        

        

          
      

      










              

                

              

            
              



	

		

			

				
					
javascript 数组比较方法sort 三目运算符

				
			

			

				

					
				

				

					08-09
					
					730
					
				

			

		

		

			
				
js 数组 sort

			
		

	



              


  
              

                


	

		

			

				
					
js实现排序（其他方法除快排）

				
			

			

				

					weixin_49834963的博客
				

				

					06-07
					
					304
					
				

			

		

		

			
				
sort()
sort((a,b)=>a-b)大于0 升序，sort((a,b)=>b-a)小于0 降序
// 特别的
var ar1=[2,4,6,8,1,3]
var ar2=[2,16,36,8,56]
ar1.sort()
ar2.sort()//这个方法值只能排序第一位数  也可以字符串进行排序
console.log(ar1)//[1,2,3,4,6,8]
console.log(ar2)//[16, 2, 36, 56, 8];	//把数组里面当成字符串处理

默认排序顺序是升序，

			
		

	





	

		

			

				
					
js 中的sort方法实现数组排序

				
			

			

				

					qq_44755188的博客
				

				

					05-05
					
					586
					
				

			

		

		

			
				
sort(方法函数)方法使数组中的元素按照一定的顺序排列。

sort方法参数可写方法函数来实现想要的排序效果

下面的是数组是对数组就行排序：


       function sortUp(a, b) {
            return a - b; //升序
        }

        function sortDown(a, b) {
            return...

			
		

	



		

			
		



	

		

			

				
					
使用sort排序

				
			

			

				

					YuT_ian的博客
				

				

					01-05
					
					514
					
				

			

		

		

			
				
如果比较的是数字的话，就是常见到的减法排序：
[1,3,6,22,2].sort((a,b)=>a-b)，结果是`[1,2,3,6,22]`

如果比较的是汉字的话，就是localeCompare：
['安徽','河南','北京'].sort((a,b)=>a.localeCompare(b,'zh-CN'))，结果是`['安徽','北京','河南']

注意！！！

汉字，如果直接减法的话，得到的是NaN，对数组不进行任何排序
汉字，必须加上zh-CN，不然排序会出乎你的意料


...

			
		

	





	

		

			

				
					
sort（）不稳定，用nums.sort((a, b) =＞ a - b)；

				
			

			

				

					qq_39976615的博客
				

				

					08-11
					
					1281
					
				

			

		

		

			
				
nums.sort((a,b)=>a-b);


			
		

	





	

		

			

				
					
JavaScript-sort()排序

					
热门推荐

				
			

			

				

					Bruce__taotao的博客
				

				

					01-17
					
					1万+
					
				

			

		

		

			
				
sort()方法，可以对数组进行排序。该方法默认按照字符串的Unicode编码进行排序，也可以用自定义函数指定排序规则。（可选）：用于指定排序规则的函数。如果省略，则按照Unicode编码进行排序。如果要按照其他规则排序，可以使用自定义函数。自定义函数接收两个参数，分别是要比较的两个元素。根据两个元素的比较结果，返回负数、零或正数，表示两个元素的相对顺序。});此例中的自定义排序函数采用a - b的方式对数组进行升序排序，可以使用b - a进行降序排序。需要注意的是，sort()

			
		

	





	

		

			

				
					
JavaScript中sort()函数中function（a,b）返回值为a-b的原理

				
			

			

				

					csdn_zhoushengnan的博客
				

				

					10-13
					
					2929
					
				

			

		

		

			
				
sort()函数中回调函数可实现升序排列,如下所示:
sort(function(a,b){
	return a - b;
})

等价于
sort(function(a,b){
	if(a < b) {
		return -1;
	}
	if(a > b) {
		return 1;
	}
	if(a == b) {
		return 0;
	}
})

原理:
1. 如果return返回-1,表示a小于b,数组排序中a会排在b之前
2. 如果return返回1,表示a大于b,数组排序中a会排

			
		

	





	

		

			

				
					
javascript -- sort排序的使用方法

				
			

			

				

					Z_B_L的博客
				

				

					04-07
					
					504
					
				

			

		

		

			
				
javascript -- sort排序的使用方法

			
		

	





	

		

			

				
					
js sort 对数字数组的排序

				
			

			

				

					wyy7293的博客
				

				

					09-11
					
					447
					
				

			

		

		

			
				
原数据 3.,31,5,7,6,1,32,4,9,39,30


.array.sort();        出来的数据以第一个数字排序


array.sort((a,b)=>a-b);   结果 1,4,5,6,7,9,29,30,31,32




			
		

	





	

		

			

				
					
js用数组方法进行排序。sort

				
			

			

				

					m0_53881313的博客
				

				

					04-01
					
					209
					
				

			

		

		

			
				
首先看代码：

里面是每次取两个，a是后者，b是前者。

a-b是升序

b-a是降序


 <script>
        // sort() 数组排序
        // 这是升序排列
       var arr =[21,56,85,74,36,25,45,16];
       arr.sort(function(a,b){
           console.log(a, b);
           return a - b;
       }
        );
    

			
		

	





	

		

			

				
					
sort()排序方法纠正解析

				
			

			

				

					qq_45829293的博客
				

				

					03-20
					
					1656
					
				

			

		

		

			
				
目录

1、arr.sort()基本理解

2、错误思想

3、返回顺序不正确的原因

4、正确实现

升序和降序的实现

对象数组排序

对非ASCII字符排序



1、arr.sort()基本理解

arr.sort([compareFunction])此方法对数组元素进行排序
2、错误思想

在我们一般学习印象中sort函数可以直接对数组进行从小到大的默认排序。但是在一次动手输出的过程中，我发现此函数并没有按照预期将数组进行小到大的排序


//未正确排序的例子 -- 将其进行排序，但是未按小到大进

			
		

	





	

		

			

				
					
JS 数组sort方法为什么升序是a-b

				
			

			

				

					Bigfishseasugar
				

				

					07-23
					
					6751
					
				

			

		

		

			
				
简单使用 sort 方法的时候，是按位排序的，比如：


    var arr = [1, 22, 15, 32, 4, 5]
    arr.sort()//[1,15,22,32,4,5]

这样的结果很明显不能满足大多数问题的需求，所以我们可以在调用sort方法的时候，传入一个回调函数，从而改变 sort 方法的排序方式。先放结果，下列两次排序分别为 升序排序 和 降序排序 。


    var arr = [1, 22, 15, 32, 4, 5]
    arr.sort((a, b) =&g

			
		

	





	

		

			

				
					
重新认识sort排序方法

				
			

			

				

					卡卡西：一个擅长拷贝的前端程序员
				

				

					05-25
					
					2657
					
				

			

		

		

			
				
作为一个前端开发人员，我们都知道数组 有个排序方法：sort，对于 arr.sort((a,b) => a-b) 这样的升序数组也是信手拈来，但是，sort背后到底是什么？ a-b 为什么就是升序呢？

接下来我们全方面认识一下 sort：

介绍：

sort()方法用原地算法对数组的元素进行排序，并返回数组。默认排序顺序是在将元素转换为字符串，然后比较它们的UTF-16代码单元值序列时构建的

由于它取决于具体实现，因此无法保证排序的时间和空间复杂性。


const months = ['...

			
		

	





	

		

			

				
					
sort()方法总结

				
			

			

				

					weixin_46274553的博客
				

				

					09-20
					
					1033
					
				

			

		

		

			
				
sort()
引用： https://www.cnblogs.com/bigbang66/p/13660994.html
注意： 一切都是对数组操作的，比如数组对象
默认排序顺序是根据字符串UniCode码。所以首先应该把数组元素都转化成字符串（如有必要），以便进行比较。
一、概念
arr.sort((a,b) => {
    return a - b     //升序
}) 
比较函数应该具有两个参数 a 和 b，其返回值如下：
若 a 小于 b，即 a - b 小于零，则返回一个小于零的值，数组

			
		

	





	

		

			

				
					
数组排序sort、字符串排序localeCompare-降序取最大值&组成新数组之map抽取元素、filter过滤条件&首个匹配元素下标之indexOf和findIndex& delete删除对象属性

				
			

			

				

					weixin_44867717的博客
				

				

					08-30
					
					338
					
				

			

		

		

			
				
js

			
		

	





	

		

			

				
					
JS Map的排序（sort）

				
			

			

				

					Lazycrazyman的博客
				

				

					10-06
					
					4349
					
				

			

		

		

			
				
JS Map的排序 （按key的值或按value的值）

			
		

	





	

		

			

				
					
js中，sort()方法排序的4种写法-是否传参、是否多个属性值排序——array.sort(function(a,b))-a元素在前之a-b升序、b-a降序

				
			

			

				

					weixin_44867717的博客
				

				

					08-30
					
					2727
					
				

			

		

		

			
				
js

			
		

	





	

		

			

				
					
js的sort()方法

				
			

			

				

					sayoko06的博客
				

				

					05-05
					
					241
					
				

			

		

		

			
				
let weekArray=[6,5,4,2,3];
console.log(weekArray)
weekArray.sort((a, b) => a - b);
console.log(weekArray)




			
		

	





	

		

			

				
					
js中sort排序方法

				
			

			

				

					weixin_44931180的博客
				

				

					02-08
					
					1611
					
				

			

		

		

			
				
JS的sort排序方法：sort使用的是插入排序和快速排序结合的排序算法
sort()如果不传入参数，则参照元素的Unicode编码值进行比较并排序。
// 升序
list.sort((a, b) => {
return a < b ? -1 : 1
})
或
list.sort((a, b) => {
return a - b
})
// 降序
list.sort((a, b) => {
returna < b ?  1: -1
})
或
list.sort((a, b) =

			
		

	





	

		

			

				
					
关于数组排序方法sort()的理解

				
			

			

				

					lg7955的博客
				

				

					04-19
					
					1008
					
				

			

		

		

			
				
我在接触数组排序方法的时候看到这样一组代码：


var arr = [10, 4, 50, 32];
console.log(arr.sort((a, b) => a - b));

然后他就按从小到大的顺序排好了；就很神奇。当时刚学没想那么深入，没弄懂return a-b到底是个什么意思；

今天心血来潮，就各种百度，现在总算有个大致的理解了。

我的理解是他是个冒泡排序，，内置了一个匿名的比较函数compare(a,b)，遍历数组，a,b为连续的两个数、，a-b,如果>0则交换a,b的位置

			
		

	



              




          





        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值