下面的例子接收一个对象或原始类型的数组的输入,从数组中删除重复的项目,返回没有重复的新数组。
如果一个数组包含原始类型,过滤重复项是非常容易的,如果一个数组包含对象,我们需要根据键和值对等验证来过滤重复项。
删除重复的内容是开发人员在应用程序开发中的一项日常任务。
让我们声明一个对象数组,用于删除所有重复的对象。
let courseArray=[
{"id":1,
"name":"javascript",
},
{"id":2,
"name":"typescript",
}
,{"id":11,
"name":"angular",
},{"id":1,
"name":"javascript",
}
]
我们有多种方法可以从一个数组中删除重复的对象。
以下是我们可以删除重复对象的方法。
从一个数组中过滤原始类型
从一个简单的原始值数组(如字符串、数字)中删除重复的内容是非常容易的,这个例子适用于原始类型--字符串、数字和布尔型。
- 声明了一个有重复值的数字数组
- 使用过滤器方法遍历数组中的每个元素
- 过滤器有回调方法,接受元素和indexOf。
- 使用
indexOf方法检查数组中每个元素的位置 - 如果indexOf返回有效的索引位置,返回没有重复值的数组
let simpleArray=[1,4,5,1,1,1]
simpleArray = simpleArray.filter((element, i) => i === simpleArray.indexOf(element))
console.log(simpleArray) //[ 1, 4, 5 ]
ES6的Set与spread运算符
Set是最新的javascript语言ES6中引入的一种新的数据结构。它不接受重复的数据。
下面的例子使用了ES6语言的以下特点
let numberStrings=["one","two","one","two"]
let myset=[...new Set(numberStrings)]
console.log(myset)
下面的例子解释了以下内容
- 在这些例子中,声明的字符串数组是有重复的。
- 使用new操作符创建了set对象,构造器接受数组值
- 使用传播操作符,设置结果值返回一个数组并复制到一个新的数组中。
- 最后返回没有重复的新数组
使用Lodash Uniq方法
lodashuniq 和uniqBy 方法通过删除重复对象返回数组 courseArray
uniq 方法遍历每个元素,并为每个元素调用回调,提供对象属性逻辑来检查重复对象。
结果数组的顺序与输入的courseArray相同。
var result = _.uniq(courseArray, function(item) {
return item.id && item.name;
})
使用数组减少方法
数组减少方法是减少数组元素的重要方法之一,在迭代过程中对每个元素都有一个回调。
回调接受acculator和当前值 accumulator是一个临时数组,它将根据每个元素更新其值。对象的平等性用属性值和逻辑检查如下
var filterArray = courseArray.reduce((accumalator, current) => {
if(!accumalator.some(item => item.id === current.id && item.name === current.name)) {
accumalator.push(current);
}
return accumalator;
},[]);
console.log(filterArray)
而结果是
[
{ id: 1, name: 'javascript' },
{ id: 2, name: 'typescript' },
{ id: 11, name: 'angular' }
]
Underscore uniq方法
如果你的应用程序依赖于underscore库,这种方法可以非常容易地从数组中过滤重复的元素。
uniq 方法接受输入数组和回调,回调接受一个将被检查的对象,这里有独特的逻辑,下面的代码检查每个元素和它的值是否与另一个对象相同。
var resultarray = _.uniq(courseArray function (element) {
return element.id && element.name;
});