关于js的数组去重和获取重复元素,在项目开发中经常会遇到,这里提供个实现思路以供参考。
数组主要分为:普通数组和对象数组(嵌套对象数组)两类。
普通数组:[1,2,3,'a','b']
对象数组:[{name:'zhangsan'},{name:'lisi'},{name:'wangwu'}]
普通数组的去重,以及获取重复元素比较简单,重点是关于对象数组去重,以及获取重复元素。
对象数组去重分为两类:根据某一属性去重
,和去重完全相同对象
(属性属性值都相同)
一、数组嵌套对象,根据对象某一属性去重
代码语言:javascript复制let arr = [
{id:1, name:'test', status:'success'},
{id:2, name:'dev', status:'success'},
{id:3, name:'prod', status:'fail'},
{id:4, name:'sand', status:'waiting'},
{id:3, name:'box', status:'running'},
{id:2, name:'dev', status:'success'}
]
function unipFunc(arr){
let arr1 = []; //存id
let newArr = []; //存新数组
for(let i in arr){
if(arr1.indexOf(arr[i].id) == -1){
arr1.push(arr[i].id);
newArr.push(arr[i]);
}
}
return newArr;
}
二、数组嵌套对象,去重完全相同对象(属性属性值都相同)
大致思路如下:
首先、循环数组,拿到对象的所有属性组成的数组;
其次、循环属性数组把对象的属性和对应的值拼接成字符串;
然后、利用 hasOwnProperty 方法判断这个字符串是不是对象 obj 里的属性,如果不是则以这个字符串为属性,true为值给 obj 对象新增一个属性;
代码语言:javascript复制let arr = [
{id:1, name:'test', status:'success'},
{id:2, name:'dev', status:'success'},
{id:3, name:'prod', status:'fail'},
{id:4, name:'sand', status:'waiting'},
{id:3, name:'prod', status:'fail'},
{id:2, name:'dev', status:'success'}
]
function unipFunc(arr){
var newArr= []; //存新数组
var obj= {}; //存处理后转成字符串的对象
for (var i = 0; i < arr.length; i ) {
var keys = Object.keys(arr[i]);
//keys.sort(function(a, b) {
// return (Number(a) - Number(b));
//});
var str = '';
for (var j = 0; j < keys.length; j ) {
str = JSON.stringify(keys[j]);
str = JSON.stringify(arr[i][keys[j]]);
}
if (!obj.hasOwnProperty(str)) {
newArr.push(arr[i]);
obj[str] = true;
}
}
return newArr;
}
三、普通数组去重
代码语言:javascript复制function unipFunc(arr) {
let newArr = [];
for (var i = 0; i < arr.length; i ) {
if (newArr.indexOf(arr[i]) === -1) {
newArr.push(arr[i]);
}
}
return newArr;
}
四、普通数组获取重复元素
方法一:indexOf和lastIndexOf
代码语言:javascript复制function unipFunc(arr) {
let newArr = [];
arr.forEach((item)=>{
if(arr.indexOf(item) !== arr.lastIndexOf(item) && newArr.indexOf(item) === -1){
newArr.push(item);
}
});
return newArr;
}
方法二:两个for循环
代码语言:javascript复制function unipFunc(arr) {
var Arr = [];
for(let i=0; i<arr.length; i ){
for(let j=i 1; j<arr.length; j ){
if(arr[i]===arr[j] && Arr.indexOf(arr[j])===-1){
Arr.push(arr[i]);
}
}
}
return Arr;
}
五、数组嵌套对象,获取重复元素和唯一元素及坐标
代码语言:javascript复制//数据
const List=[
{
name:'大学女友',
age:20,
type:'正宫'
},
{
name:'隔壁姐姐',
age:24,
type:'微信'
},
{
name:'楼上阿姨',
age:32,
type:'阿姨'
},
{
name:'小区妹妹',
age:18,
type:'微信'
},
]
let key = {} //存储的 key 是type的值,value是在indeces中对应数组的下标
let indices = [] //数组中每一个值是一个数组,数组中的每一个元素是原数组中相同type的下标
List.map((item, index) => {
//根据对应字段 分类(type)
let type= item.type
let _index = key[type]
if (_index !== undefined) {
indices[_index].push(index)
} else {
key[type] = indices.length
indices.push([index])
}
})
// 归类结果
let result = []
indices.map((item) => {
item.map((index) => {
//result.push(List[index]) 相同项排序在一起
//if (item.length > 1) {} 只要重复项
//if (item.length == 1){} 只要单独项
//我这里需要重复项 根据业务处理
if (item.length > 1) {
result.push(List[index])
}
})
})
//结果
//[{ name:'隔壁姐姐',age:24,type:'微信'}, {name:'小区妹妹',age:18,type:'微信'}]