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

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

以下是几种方式：

使用 filter()方法
使用 set()方法
使用 reduce()方法
使用 indexOf()方法
使用 forEach()方法
使用 Underscore.js _.uniq()函数
下面以适当的示例描述了所有方法：

方法1：使用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"]

方法2：使用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"]

方法3：使用 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"]

方法 4: 使用 reduce() 方法

reduce() 方法用于减少数组元素并根据传入的 reducer 函数将它们组合成一个最终数组。

示例： 在这个示例中，我们将看到如何使用 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"]

方法5：使用 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']

方法6：使用第三方库

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

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

Javascript

// Requiring the lodash library
const _ = require("lodash");
     
// Original array
let y = ([1, 2, 2, 3, 4, 3, 8, 6]);
 
// Use of _.uniq()
// method
 
let gfg = _.uniq(y);
     
// Printing the output
console.log(gfg);

输出：