有时，数组包含重复的数据，开发者必须写一段代码来删除重复的数据，并返回具有唯一元素的数组。
我们有很多方法可以去除数组中的重复数据。在这篇博文中，你将学习到5种在javascript/Typescript中去除数组重复项的方法。
- 使用数组过滤器和indexOf方法
- ES6中的set与spread expression
- Jquery each和inArray方法
- forEach循环的实现
- UnderscoreJS和lodash与uniq方法
给定的数字数组
let array=[4,12,3,4,1,3]
output is [ 4, 12, 3, 1 ]
数组过滤器和indexOf方法示例
- 数组过滤器提供了对原始数组的过滤并返回数组中的元素
- 使用filter方法对数组中的元素进行遍历
- filter()有一个回调，接受元素和数组中的索引位置
- 每个元素都被调用回调
- 考虑数组元素并检查每个元素的索引是否与数组一致
- 最后返回没有重复的值的数组
下面是一个例子
let uniqueArray = arrayNumbers.filter(function(element, index) {
return arrayNumbers.indexOf(index) == index;
})
console.log(uniqueArray);
ES6使用集合与传播表达式
ES6版本的JavaScript引入了Set类型和spread运算符 Set类型存储任何类型的数据。Set不允许重复的元素。请看这里。
展开运算符[...expression]允许数组扩展数组中的元素。请看更多关于展开运算符的信息。
var uniqueArray = [ ...new Set(arrayNumbers) ];
console.log(uniqueArray)
Jquery each和inArray方法
- JQuery库有each和inArray方法。
- 创建空的uniqueArray来保存唯一元素
- 使用each函数对数组进行迭代，接受数组作为第一个参数，第二个参数是回调。
- 每个元素都被调用回调
- 使用inArray()函数检查uniqueArray中存在的每个元素
- 如果不存在于uniqueArray中，则添加该元素
var uniqueArray = [];
$.each(arrayNumbers, function(index, item){
if($.inArray(item, uniqueArray) === -1) uniqueArray.push(item);
});
console.log(uniqueArray);
使用forEach循环
forEach在javascript中为每个元素提供了迭代+回调，使用indexOf方法过滤重复的元素，将独特的元素推到新的数组中。
var uniqueArray = [];
arrayNumbers.forEach(function(element) {
if(uniqueArray.indexOf(element) < 0) {
uniqueArray.push(element);
}
});
console.log(uniqueArray);
UnderscoreJS和lodash与uniq方法
使用第三方库是非常容易和简单的，UnderscoreJS和Lodash提供了uniq方法，uniq函数有三个参数
_.uniq(originalArray, [isAlreadySorted], [iterator]
OriginalArray - 用于移除重复的数组。
isAlreadySorted - true - 用于已经排序的数组，可以提高性能。
Iterator - 在迭代过程中对每个元素应用的自定义逻辑
console.log(_.uniq(arrayNumbers, false));
