迹忆客 专注技术分享

本教程将解释我们如何在 JavaScript 中使用不同的方法从数组中删除重复的数组。其中一种方法是将目标数组传递给 Set 类的构造函数，以返回一个等价的非重复数组。另一种方法是使用 JavaScript Array 的 filter() 方法，并在其回调函数中实现测试条件。

在数学中，集合包含一组唯一的、非重复的元素。在 JavaScript 中，Set 类可以从一个数组中得到所有这些非重复的元素。

在 ECMAScript 6 中，我们可以通过使用 Set 类来获得一个新的非重复元素数组，并将其发送给 Set() 构造函数，从而使用传播语法的力量。

var arr = [1,2,3,4,1,2,3,1,2,3]

var uniqueArr = [...new Set(arr)]

console.log(uniqueArr)

输出：

[1, 2, 3, 4]

JavaScript 数组引入了一个名为 filter() 的高阶函数，它对每个数组元素进行循环，对其应用一个测试条件，只有在满足条件时才返回该元素。这个测试条件将在回调函数里面实现，作为参数传递给 filter() 方法。

我们可以通过设置测试条件来检查当前元素在循环中的索引是否是该数组中的第一次出现，从而从数组中删除重复的元素。filter() 函数在执行过程中，会取额外的参数 pos 来代表元素的数组索引。

var arrTwo=["Hello 1 "," Hello 2 ","Hello 1 " , " Hello 2 ","Hello 1 again"]

const filteredArray = arrTwo.filter(function(ele , pos){
    return arrTwo.indexOf(ele) == pos;
}) 

console.log("The filtered array ",filteredArray);

输出：

The filtered array  (3) ["Hello 1 ", " Hello 2 ", "Hello 1 again"]

如果我们能使用 JavaScript ECMAScript 6 的箭头语法，那么删除重复操作就能更好地实现。

var arrTwo=["Hello 1 "," Hello 2 ","Hello 1 " , " Hello 2 ","Hello 1 again"];
const filteredArray = arrTwo.filter( (ele,pos)=>arrTwo.indexOf(ele) == pos);
console.log("The filtered array",filteredArray);

输出：

The filtered array  (3) ["Hello 1 ", " Hello 2 ", "Hello 1 again"]

如果我们有一个数组只由数字 [ 1, 2, 3, 4, 1, 2, 3 ] 这样的基元类型组成，而我们想从这个数组 [ 1, 2, 3, 4 ] 中删除重复的值，我们可以使用 hashtables 实现我们的 filterArray() 函数。

我们将建立一个名为 found 的临时对象，它将包含所有非重复的值。在 filter 函数中，如果元素已经存在于 found 对象中，我们的条件将返回 false；否则，我们将以 true 的值将该元素添加到 found 对象中。

var arrThree = ["Hello 1 ", " Hello 2 ", " Hello 2 ", "Welcome", "Hello 1 again", "Welcome", "Goodbye"]

function filterArray(inputArr){
    var found ={};
    var out = inputArr.filter(function(element){
        return found.hasOwnProperty(element)? false : (found[element]=true);
    });
    return out;
}

const outputArray = filterArray(arrThree);
console.log("Original Array",arrThree);
console.log("Filtered Array",outputArray);

输出：

Original Array ["Hello 1 ", " Hello 2 ", " Hello 2 ", "Welcome", "Hello 1 again", "Welcome", "Goodbye"]
Filtered Array ["Hello 1 ", " Hello 2 ", "Welcome", "Hello 1 again", "Goodbye"]

如果我们已经在使用 underscore 库中的任何一种方法，我们可以使用 _.uniq() 方法，因为它只返回输入数组中元素的第一次出现。

var arrFive = [1, 2, 3, 1, 5, 2];

console.log("LoDash output", _.uniq(arrFive));