前端 JavaScript 程序代码中怎么去掉 array 重复元素

在前端JavaScript程序代码中，去掉数组（array）中的重复元素可以通过多种方法实现，如Set对象、filter方法、reduce方法、Map对象等。使用Set对象是最为简洁和现代的方式：通过创建一个新的Set对象并传入数组来构建一个值唯一的集合，再把Set转换回数组就可以得到去重后的数组。具体代码如下：

const array = [1, 2, 2, 3, 4, 4, 5];

const uniqueArray = [...new Set(array)];

此段代码中，new Set(array) 会自动移除重复项。使用展开运算符 ... 将Set对象转换为数组，得到uniqueArray为去重后的数组。这种方法的优点是代码简洁且在现代浏览器中支持度较高。

一、使用Set对象

Set对象是ES6新增的一种数据结构，用来存储任何类型的唯一值，无论是原始值或者是对象引用。要删除数组中的重复元素，可以将数组转换为Set，再把Set转换回数组：

function removeDuplicates(array) {

    return [...new Set(array)];
}

这个方法的简洁性在于它不需要额外进行循环或者复杂的逻辑判断来去除重复项。

二、使用filter方法

filter方法创建一个新数组，其中包含通过所提供函数实现的测试的所有元素。利用indexOf方法，我们可以找到元素在数组中首次出现的位置，并排除之后的重复项：

function removeDuplicates(array) {

    return array.filter((item, index) => {
        return array.indexOf(item) === index;
    });
}

在这段代码中，filter 方法会遍历每个元素，index是当前正在处理的元素的索引，array.indexOf(item) 是当前元素首次出现的位置。当两者相等时，意味着这个元素不是重复的。

三、使用reduce方法

reduce方法对数组中的每个成员依次执行一个由您提供的reducer函数，并将其结果汇总为单个返回值。可以利用reduce去重如下：

function removeDuplicates(array) {

    return array.reduce((accumulator, current) => {
        if (accumulator.indexOf(current) === -1) {
            accumulator.push(current);
        }
        return accumulator;
    }, []);
}

在这里，accumulator是一个累加器数组，初始值为空数组[]。当发现累加器数组中尚未包含当前元素时，就将其加入累加器数组。

四、使用Map对象

Map对象保存键值对，并且能够记住键的原始插入顺序。每个键都可以关联一个值，所以可以利用这个特性来去重：

function removeDuplicates(array) {

    let unique = new Map(array.map(item => [item, item]));
    return [...unique.keys()];
}

在此方法中，先利用map函数创建一个每个元素都是 [item, item] 格式的数组，然后通过该数组创建一个Map对象。Map对象会自动去重复的键，接着使用Map对象的keys()方法来获取所有的键，然后用展开运算符转成数组。这里的键实际上就是原数组中的唯一元素。

五、交互判断和循环

尽管现代JavaScript提供了许多优雅的去重方法，了解传统的循环和条件判断在某些情况下依然有用。以下是一个传统方法的例子：

function removeDuplicates(array) {

    let unique = [];
    for (let i = 0; i < array.length; i++) {
        if (unique.indexOf(array[i]) === -1) {
            unique.push(array[i]);
        }
    }
    return unique;
}

这个方法的实现逻辑是，创建一个空数组unique用来存放结果，遍历原数组，使用indexOf来检查当前元素是否已经在结果数组中存在，如果不存在就加入该元素。

六、性能考量

虽然这些方法在处理小到中等规模的数组时性能都相当可以，但在面对大数据量时不同方法的性能表现可能有显著差异。为了优化性能，有时候需要根据数据的特点和预期的使用场景做出合理的选择。例如，filter结合indexOf的方法在数组很大时会比较慢，因为它需要重复地遍历数组来确定元素是否已存在。相比之下，Set和Map基于其内部优化提供了更好的性能表现。

去掉数组中重复元素的最佳方法取决于你的特定需求和工作环境。现代JavaScript开发中，利用Set对象去重是最推荐的方法，因为它不仅代码简洁，而且性能优良，并且具有良好的兼容性。不过，深入理解各种方法的原理和优缺点，可以帮助你更加灵活地应对不同的编程挑战。

相关问答FAQs：

1. 如何使用 JavaScript 代码去除数组中的重复元素？

在 JavaScript 中，我们可以使用 Set 对象来去除数组中的重复元素。Set 是一种特殊的数据结构，它只存储唯一的值。

下面是一个示例代码，演示如何使用 Set 去除数组中的重复元素：

let array = [1, 2, 2, 3, 4, 4, 5];
let uniqueArray = [...new Set(array)];

console.log(uniqueArray); // 输出 [1, 2, 3, 4, 5]

在上述代码中，我们首先创建了一个数组 array 包含重复元素。然后，使用 new Set(array) 创建了一个 Set 对象，Set 对象会自动去除重复的元素。最后，我们将 Set 对象转换为数组，使用扩展运算符 ... 将 Set 对象转换为数组的形式，并将结果保存在 uniqueArray 变量中。

2. 如何使用 JavaScript 代码去除数组中的重复对象？

如果数组中的元素是对象而不是基本数据类型，我们可以通过遍历数组中的对象，并根据一些属性或字段进行比较来去除重复对象。以下是示例代码：

let array = [{id: 1, name: "John"}, {id: 2, name: "Jane"}, {id: 1, name: "John"}];

let uniqueArray = array.filter((obj, index, self) => {
  return index === self.findIndex((t) => (
    t.id === obj.id && t.name === obj.name
  ));
});

console.log(uniqueArray); 
// 输出 [{id: 1, name: "John"}, {id: 2, name: "Jane"}]

在上述代码中，我们使用了 filter() 方法和 findIndex() 方法来去除数组中的重复对象。我们在 filter() 方法的回调函数中使用了 findIndex() 方法来找到第一个与当前对象相同的索引，如果当前索引与找到的索引相同，则说明该对象是数组中唯一的对象。

3. 如何使用 JavaScript 代码去除数组中的重复字符串？

如果数组中的元素是字符串，我们可以使用 indexOf() 方法或 includes() 方法来判断字符串是否已经出现过，并根据判断结果进行去重。以下是示例代码：

let array = ["apple", "banana", "banana", "orange"];

let uniqueArray = array.filter((str, index, self) => {
  return index === self.indexOf(str);
});

console.log(uniqueArray); 
// 输出 ["apple", "banana", "orange"]

在上述代码中，我们使用了 filter() 方法和 indexOf() 方法来去除数组中的重复字符串。我们在 filter() 方法的回调函数中使用了 indexOf() 方法来找到第一个与当前字符串相同的索引，如果当前索引与找到的索引相同，则说明该字符串是数组中唯一的字符串。

最后建议，企业在引入信息化系统初期，切记要合理有效地运用好工具，这样一来不仅可以让公司业务高效地运行，还能最大程度保证团队目标的达成。同时还能大幅缩短系统开发和部署的时间成本。特别是有特定需求功能需要定制化的企业，可以采用我们公司自研的企业级低代码平台：织信Informat。 织信平台基于数据模型优先的设计理念，提供大量标准化的组件，内置AI助手、组件设计器、自动化（图形化编程）、脚本、工作流引擎（BPMN2.0）、自定义API、表单设计器、权限、仪表盘等功能，能帮助企业构建高度复杂核心的数字化系统。如ERP、MES、CRM、PLM、SCM、WMS、项目管理、流程管理等多个应用场景，全面助力企业落地国产化/信息化/数字化转型战略目标。