如何从Javascript数组中删除重复元素

在本文中，我们将讨论从Javascript数组中删除重复元素的方法。有多种方法可以删除数组中的重复项。我们将讨论四种最常见的方法：

使用 filter()方法
使用 set()方法
使用 reduce()方法
使用 indexOf()方法
使用 forEach()方法
使用 Underscore.js _.uniq()函数
以下是所有方法的详细说明和示例：

Javascript filter()方法

filter()方法创建一个由满足我们提供条件的元素组成的新数组。它将仅包含返回true的元素。我们可以通过简单调整条件来从数组中删除重复的值。

示例： 在这个示例中，我们将看到filter()方法的用法。

Javascript

let arr = ["apple", "mango", "apple", 
          "orange", "mango", "mango"]; 
  
function removeDuplicates(arr) { 
    return arr.filter((item, 
        index) => arr.indexOf(item) === index); 
} 
console.log(removeDuplicates(arr));

输出：

["apple", "mango", "orange"]

Javascript的set()方法

该方法使用ES6（ES2015）设置一个新的对象类型，允许您创建唯一值的集合。

示例： 在此示例中，我们将看到set()方法的用法。

Javascript

let arr = ["apple", "mango", "apple", 
          "orange", "mango", "mango"]; 
  
function removeDuplicates(arr) { 
    return [...new Set(arr)]; 
} 
  
console.log(removeDuplicates(arr));

输出结果：

["apple", "mango", "orange"]

JavaScript forEach()方法

通过使用forEach()方法，我们可以在数组中迭代元素，并且如果元素不存在于数组中，则将其推入新数组中。

示例： 在这个示例中，我们将看到forEach()方法的使用。

JavaScript

let arr = ["apple", "mango", 
          "apple", "orange", "mango", "mango"]; 
  
function removeDuplicates(arr) { 
    let unique = []; 
    arr.forEach(element => { 
        if (!unique.includes(element)) { 
            unique.push(element); 
        } 
    }); 
    return unique; 
} 
console.log(removeDuplicates(arr));

输出：

["apple", "mango", "orange"]

JavaScript 的 reduce() 方法

reduce() 方法用于将数组的元素进行归纳，并根据您传递的归纳函数将它们组合成一个最终数组。

示例: 在此示例中，我们将看到 reduce() 方法的使用。

JavaScript

let arr = ["apple", "mango", 
          "apple", "orange", "mango", "mango"]; 
  
function removeDuplicates(arr) { 
    let unique = arr.reduce(function (acc, curr) { 
        if (!acc.includes(curr)) 
            acc.push(curr); 
        return acc; 
    }, []); 
    return unique; 
} 
console.log(removeDuplicates(arr));

输出:

["apple", "mango", "orange"]

Javascript的indexOf()方法

indexOf()方法用于查找数组元素的第一个出现位置。我们可以迭代数组中的元素，如果它在结果数组中不存在，就将其添加到新数组中。

示例: 在此示例中，我们将看到使用indexOf()方法的示例。

Javascript

let arr = ["apple", "mango", 
          "apple", "orange", "mango", "mango"]; 
  
function removeDuplicates(arr) { 
    let unique = []; 
    for (i = 0; i < arr.length; i++) { 
        if (unique.indexOf(arr[i]) === -1) { 
            unique.push(arr[i]); 
        } 
    } 
    return unique; 
} 
console.log(removeDuplicates(arr));

输出：

['apple', 'mango', 'orange']

使用第三方库

我们还可以使用第三方库，例如Lodash或Underscore.js，从Javascript数组中删除重复的元素。_.uniq()函数返回不包含重复元素的数组。

示例： 在这个示例中，我们将使用_.uniq()函数。

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"> 
    </script> 
</head> 
  
<body> 
    <script type="text/javascript"> 
        console.log(_.uniq([1, 2, 3, 4, 5, 4, 3, 2, 1])); 
    </script> 
</body> 
  
</html>

输出：

如何从Javascript数组中删除重复元素