JavaScript数组去重技巧大全

文章不知道大家是否熟悉？今天我将给大家介绍《JavaScript数组去重方法全解析》，这篇文章主要会讲到等等知识点，如果你在看完本篇文章后，有更好的建议或者发现哪里有问题，希望大家都能积极评论指出，谢谢！希望我们能一起加油进步！

本文深入探讨了在JavaScript中创建唯一数组的多种方法。我们将分析传统嵌套循环可能存在的逻辑缺陷，并介绍两种更高效、更推荐的实现方式：利用 Array.prototype.includes() 方法进行条件添加，以及使用ES6引入的 Set 对象实现更简洁、性能更优的去重。通过具体代码示例和性能考量，帮助开发者选择最适合其场景的去重策略。

理解传统嵌套循环的局限性

在JavaScript中，实现数组去重是一个常见的需求。初学者有时会尝试使用嵌套的 for 循环结合 if/else 语句来判断元素是否已存在于结果数组中。然而，这种方法往往存在逻辑缺陷，导致去重不彻底或行为异常。

考虑以下常见的错误实现模式：

function createUniqueArrayFlawed(array) {
    var uniqueArray = [];
    for (let i = 0; i < array.length; i++) {
        // 首次循环时uniqueArray为空，内层循环不会执行，
        // 导致第一个元素不会被添加（除非额外处理）
        // 更重要的是，内层循环的逻辑是错误的
        for (let j = 0; j < uniqueArray.length; j++) {
            if (array[i] === uniqueArray[j]) {
                // 如果找到匹配项，什么也不做
                // 但如果没找到匹配项呢？
            } else {
                // 错误：一旦当前元素与uniqueArray中的某个元素不匹配，
                // 就会立即将当前元素添加到uniqueArray中。
                // 这意味着它没有等待检查完uniqueArray中的所有元素。
                uniqueArray.push(array[i]);
            }
        }
        // 如果uniqueArray为空，或者内层循环没有执行push操作，
        // 那么第一个元素或者后续的唯一元素可能不会被添加。
        // 正确的逻辑应该是：只有当遍历完uniqueArray所有元素后，
        // 确认没有匹配项时才添加。
    }
    return uniqueArray;
}

上述代码的根本问题在于内层循环中的 else { uniqueArray.push(array[i]); } 语句。它导致只要 array[i] 与 uniqueArray 中的任意一个元素不相等，array[i] 就会被添加到 uniqueArray。这意味着，如果 uniqueArray 中有多个元素，并且 array[i] 只与其中一个或几个不相等，它就会被重复添加，而不是等到确认与所有元素都不相等时才添加。此外，当 uniqueArray 首次为空时，内层循环不会执行，导致第一个元素也不会被添加。这种逻辑复杂且容易出错，因此不推荐使用这种方式来判断元素是否存在并进行去重。

方法一：使用 Array.prototype.includes()

为了解决上述问题，我们可以利用 Array.prototype.includes() 方法来简化判断元素是否存在的逻辑。includes() 方法会判断一个数组是否包含一个指定的值，并根据情况返回 true 或 false。

/**
 * 使用 Array.prototype.includes() 方法去重
 * @param {Array} arr 原始数组
 * @returns {Array} 去重后的新数组
 */
function uniqueWithIncludes(arr) {
    const uniqueArr = [];
    for (let i = 0; i < arr.length; i++) {
        // 如果 uniqueArr 中不包含当前元素 arr[i]，则将其添加
        if (!uniqueArr.includes(arr[i])) {
            uniqueArr.push(arr[i]);
        }
    }
    return uniqueArr;
}

// 示例运行
console.log("--- 使用 includes() 方法去重 ---");
console.log("原始数组: [1, 2, 3, 2, 2], 去重后: ", uniqueWithIncludes([1, 2, 3, 2, 2])); // 输出: [1, 2, 3]
console.log("原始数组: [1, 1, 1, 1, 1], 去重后: ", uniqueWithIncludes([1, 1, 1, 1, 1])); // 输出: [1]
console.log("原始数组: [1, 2, 3, 2, 1], 去重后: ", uniqueWithIncludes([1, 2, 3, 2, 1])); // 输出: [1, 2, 3]
console.log("原始数组: [], 去重后: ", uniqueWithIncludes([]));             // 输出: []

工作原理：

这种方法通过外层循环遍历原始数组 arr 的每个元素。在每次迭代中，它使用 uniqueArr.includes(arr[i]) 来检查当前元素 arr[i] 是否已存在于 uniqueArr 中。如果 includes() 返回 false（即 uniqueArr 中不包含该元素），则 !uniqueArr.includes(arr[i]) 为 true，此时将 arr[i] 添加到 uniqueArr。这种方式逻辑清晰，易于理解和维护。

注意事项：

includes() 方法在内部执行的是线性搜索。这意味着每次调用 includes() 都可能需要遍历 uniqueArr 中的所有元素。因此，对于非常大的数组，其性能可能会随着数组长度的增加而下降，导致整体时间复杂度接近 O(N^2)，其中 N 是原始数组的长度。

方法二：利用 Set 对象

ES6 引入的 Set 对象提供了一种更简洁、性能更优的数组去重方案。Set 是一种新的数据结构，它允许你存储任何类型的唯一值，无论是原始值还是对象引用。Set 中的值是唯一的，这意味着一个值在 Set 中只会出现一次。

/**
 * 使用 Set 对象去重
 * @param {Array} arr 原始数组
 * @returns {Array} 去重后的新数组
 */
function uniqueWithSet(arr) {
    // 将数组转换为 Set，Set 会自动去除重复项
    const uniqueSet = new Set(arr);
    // 将 Set 转换回数组
    return Array.from(uniqueSet);
    // 或者使用展开运算符：return [...uniqueSet];
}

// 示例运行
console.log("\n--- 使用 Set 对象去重 ---");
console.log("原始数组: [1, 2, 3, 2, 2], 去重后: ", uniqueWithSet([1, 2, 3, 2, 2])); // 输出: [1, 2, 3]
console.log("原始数组: [1, 1, 1, 1, 1], 去重后: ", uniqueWithSet([1, 1, 1, 1, 1])); // 输出: [1]
console.log("原始数组: [1, 2, 3, 2, 1], 去重后: ", uniqueWithSet([1, 2, 3, 2, 1])); // 输出: [1, 2, 3]
console.log("原始数组: [], 去重后: ", uniqueWithSet([]));             // 输出: []

工作原理：

Set 的核心优势在于它天然地保证了元素的唯一性。我们只需将原始数组传入 Set 构造函数 (new Set(arr))，Set 就会自动处理重复项，只保留唯一的值。之后，可以通过 Array.from() 方法或展开运算符 (...) 将 Set 对象转换回一个新的数组。

优点：

• 代码简洁性： 仅需一行代码即可完成去重操作，极大地提高了代码的可读性和维护性。
• 性能优越： 由于 Set 的内部实现通常基于哈希表（或类似的快速查找结构），其添加和检查元素唯一性的操作通常具有 O(1) 的平均时间复杂度。因此，将数组转换为 Set 的平均时间复杂度为 O(N)，再转换回数组也是 O(N)。总体而言，其平均时间复杂度为 O(N)，远优于 includes() 方法在大型数组时的表现。

注意事项：

• Set 是 ES6 特性，在非常老的浏览器环境中可能需要 Polyfill。
• Set 在判断对象唯一性时，是基于对象的引用，而不是对象的值。这意味着 {a:1} 和 {a:1} 会被视为两个不同的对象，并分别存储。

性能考量与选择建议

在选择数组去重方法时，除了代码的简洁性和可读性，性能也是一个重要的考量因素。

1. Array.prototype.includes() 方法：

   • 优点: 逻辑直观，代码易于理解和调试。
   • 缺点: 每次调用 includes() 都需要对已去重数组进行线性搜索，导致整体时间复杂度为 O(N*M)，其中 N 是原数组长度，M 是去重后数组的平均长度。对于大型数组，性能较差。

2. Set 对象：

   • 优点: 代码极其简洁，性能优越。其平均时间复杂度为 O(N)，因为 Set 内部使用哈希结构进行快速查找。
   • 缺点: Set 是 ES6 特性，在极少数旧版浏览器中可能需要 Polyfill。对于非常小的数组，其优势可能不明显，但对于中大型数组，性能提升显著。

选择建议：

• 对于小型数组或对浏览器兼容性有严格要求（且不使用 Polyfill）的场景，includes() 方法是一个简单可行的选择。 它的性能开销在小数据量下可以忽略不计。
• 对于大多数现代Web开发场景，尤其是处理中大型数组时，强烈推荐使用 Set 对象进行去重。 它提供了最佳的性能和代码简洁性，是现代JavaScript中处理数组去重的首选方案。

总结

在 JavaScript 中实现数组去重，应避免使用逻辑复杂的嵌套循环，因为它们容易出错且效率低下。Array.prototype.includes() 提供了一种清晰的去重方式，但其性能在大数组下受限。Set 对象是现代 JavaScript 中去重操作的首选方案，它不仅代码简洁，而且在性能上表现出色。根据实际项目需求、数据规模和对浏览器兼容性的要求，选择最合适的去重方法至关重要。

本篇关于《JavaScript数组去重技巧大全》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！