js中数组去重和数组对象去重的方法

本文详细介绍了JavaScript中去除数组重复元素的八种方法,包括ES6的Set、双重for循环、indexOf、sort、includes、filter、Map以及递归等,适用于不同场景下的数组去重需求。此外,还提供了针对对象数组去重的两种解决方案,通过对象的key或reduce方法实现。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

js中数组去重的方法

一、利用ES6中的 Set 方法去重

注:Set为ES6新增的一个对象,允许存储任何类型(原始值或引用值)的唯一值

let arr = [1,0,0,2,9,8,3,1];
function unique(arr) {
	return Array.from(new Set(arr))
}
console.log(unique(arr));   // [1,0,2,9,8,3]
  or
console.log(...new Set(arr)); // [1,0,2,9,8,3]

二、使用双重for循环,再利用数组的splice方法去重(ES5常用)

var arr = [1, 5, 6, 0, 7, 3, 0, 5, 9,5,5];
function unique(arr) {
	for (var i = 0, len = arr.length; i < len; i++) {
	    for (var j = i + 1, len = arr.length; j < len; j++) {
	        if (arr[i] === arr[j]) {
	            arr.splice(j, 1);
	            j--;        // 每删除一个数j的值就减1
	            len--;      // j值减小时len也要相应减1(减少循环次数,节省性能)   
	            // console.log(j,len)
	        }
	    }
	}
	return arr;
}
console.log(unique(arr));       //  1, 5, 6, 0, 7, 3, 9

三、利用数组的indexOf方法去重

注:array.indexOf(item,statt) 返回数组中某个指定的元素的位置,没有则返回-1

var arr =[1,-5,-4,0,-4,7,7,3];
function unique(arr){
	var arr1 = [];       // 新建一个数组来存放arr中的值
	for(var i = 0,len = arr.length; i < len; i++){
		if(arr1.indexOf(arr[i]) === -1){
			arr1.push(arr[i]);
		}
	}
	return arr1;
}
console.log(unique(arr));    // 1, -5, -4, 0, 7, 3

四、利用数组的sort方法去重(相邻元素对比法)

注:array.sort( function ) 参数必须是函数,可选,默认升序

var arr =  [5,7,1,8,1,8,3,4,9,7];
function unique( arr ){
	arr = arr.sort();

	var arr1 = [arr[0]];
	for(var i=1,len=arr.length;i<len;i++){
		if(arr[i] !== arr[i-1]){
			arr1.push(arr[i]);
		}
	}
	return arr1;
}
console.log(unique(arr));   //  1, 1, 3, 4, 5, 7, 7, 8, 8, 9

五、利用数组的includes去重

注:arr.includes(指定元素(必填),指定索引值(可选,默认值为0) ),有值返回true,没有则返回false

var arr = [-1,0,8,-3,-1,5,5,7];
function unique(arr){
	var arr1 = [];
	for(var i=0,len=arr.length;i<len;i++){
		if( !arr1.includes( arr[i] ) ){   // 检索arr1中是否含有arr中的值
			arr1.push(arr[i]);
		}
	}
	return arr1;
}
console.log(unique(arr));      //  -1, 0, 8, -3, 5, 7

六、利用数组的filter方法去重

注:filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素,array.filter(function(currentValue,index,arr), thisValue)
currentValue:当前元素的值(必选参数)、index:当前元素的索引值(可选)、arr:当前元素属于的数组对象(可选)、thisValue:对象作为该执行回调时使用,传递给函数,用作 “this” 的值,默认undefined(可选)

var arr = [1,2,8,9,5,8,4,0,4];
/*
模拟: 原始数组:[1,2,8,9,5,8,4,0,4]
索引值:0,1,2,3,4,5,6,7,8
伪新数组:[1,2,8,9,5,8,4,0,4]
使用indexOf方法找到数组中的元素在元素在中第一次出现的索引值
索引值:0,1,2,3,4,2,6,7,6
返回前后索引值相同的元素:
新数组:[1,2,8,9,5,4,0]        
*/
function unique(arr){
	// 如果新数组的当前元素的索引值 == 该元素在原始数组中的第一个索引,则返回当前元素
	return arr.filter(function(item,index){
		return arr.indexOf(item,0) === index;
	});
}
console.log(unique(arr));    //  1, 2, 8, 9, 5, 4, 0
/**
* 数组去重
* @param arr 
* @return {*} 
*/ 
var unique = function (arr) { 
	var obj = {}; 
	return arr.filter(function (item, index, arr) { 
		return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true) 
	}) 
};

七、利用函数递归去重

var arr = [1,1,5,6,0,9,3,0,6]
function unique(arr){
	var arr1 = arr;
	var len = arr1.length;
	arr1.sort((a,b)=>{
		return a-b
	})
	function loop(index){
		if(index >= 1){
			if(arr1[index] === arr1[index-1] ){
				arr1.splice(index,1);
			}
			loop(index - 1);  // 递归loop,然后数组去重
		}
	}
	loop(len-1);   
	return arr1
}
console.log(unique(arr));    //   0, 1, 3, 5, 6, 9

八、利用ES6中的Map方法去重

/*
创建一个空Map数据结构,遍历需要去重的数组,把数组的每一个元素作为key存到Map中。由于Map中不会出现相同的key值,所以最终得到的就是去重后的结果。
*/
let arr = [1, 0, 8, 3, -9, 1, 0, -9, 7]
function unique(arr) {
	let map = new Map();
	// console.log(map)
	//let arr1 = new Array();      // 数组用于返回结果
	let arr1 = [];
	for (let i = 0, len = arr.length; i < len; i++) {
		if (map.has(arr[i])) {      // 判断是否存在该key值
			map.set(arr[i], true);
		} else {
			map.set(arr[i], false);
			arr1.push(arr[i]);
		}
	}
	return arr1;
}
console.log(unique(arr)); // 1, 0, 8, 3, -9, 7

js中数组对象去重的方法

 var arr = [{
       key: '01',
       value: '乐乐'
    }, {
       key: '02',
       value: '博博'
    }, {
       key: '03',
       value: '淘淘'
    },{
       key: '04',
       value: '哈哈'
    },{
       key: '01',
       value: '乐乐'
    }];

//  方法1:利用对象访问属性的方法,判断对象中是否存在key
var result = [];
var obj = {};
for(var i = 0; i < arr.length; i++){
	if(!obj[arr[i].key]){
		result.push(arr[i]);
		obj[arr[i].key] = true;
	}
}
console.log(result); // [{key: "01", value: "乐乐"},{key: "02", value: "博博"},{key: "03", value: "淘淘"},{key: "04", value: "哈哈"}]


//  方法2:利用reduce方法遍历数组,reduce第一个参数是遍历需要执行的函数,第二个参数是item的初始值
var obj = {};
arr = arr.reduce(function(item, next) {
	obj[next.key] ? '' : obj[next.key] = true && item.push(next);
	return item;
}, []);
console.log(arr); // [{key: "01", value: "乐乐"},{key: "02", value: "博博"},{key: "03", value: "淘淘"},{key: "04", value: "哈哈"}]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值