JS数组去重：巧用indexOf和lastIndexOf去重技巧

JS数组去重技巧：告别重复值，精准提取唯一元素！本文深入讲解如何利用JavaScript的`indexOf()`和`lastIndexOf()`方法，结合`filter()`函数，高效实现数组去重，并精准提取只出现一次的唯一元素。通过代码示例和详细步骤解析，让你轻松掌握这一实用技巧，解决日常开发中遇到的数组处理难题。告别传统低效的去重方式，掌握更简洁、更高效的JavaScript数组去重方案，让你的代码更优雅、性能更卓越！

本教程将详细介绍如何利用 JavaScript 中数组的 indexOf() 和 lastIndexOf() 方法，结合 filter() 函数，高效地从一个数组中筛选出所有只出现一次的唯一元素。文章通过代码示例和逐步解析，帮助读者深入理解该方法的原理和应用，实现精确的去重操作。

数组唯一元素提取的需求

在日常的 JavaScript 开发中，我们经常会遇到需要处理数组中重复数据的情况。有时，我们不仅需要移除所有重复项以获得一个不包含任何重复值的数组（即去重），更具体的需求是，我们希望从数组中找出那些只出现过一次的元素，而将所有出现多次的元素全部剔除。例如，给定数组 [100, 123, 100, 122, 119, 203, 123, 76, 89]，我们期望的输出是 [122, 119, 203, 76, 89]。

核心原理：indexOf() 与 lastIndexOf() 的结合应用

解决上述问题的关键在于巧妙地利用 JavaScript 数组的两个原生方法：Array.prototype.indexOf() 和 Array.prototype.lastIndexOf()。

• indexOf(searchElement[, fromIndex]): 该方法返回在数组中可以找到一个给定元素的第一个（最小）索引，如果不存在，则返回 -1。它从数组的开头（索引0）开始向后查找。
• lastIndexOf(searchElement[, fromIndex]): 该方法返回在数组中可以找到一个给定元素的最后一个（最大）索引，如果不存在，则返回 -1。它从数组的末尾开始向前查找。

当一个元素在数组中只出现一次时，它的 indexOf() 和 lastIndexOf() 返回的索引值将是相同的。因为无论是从左侧查找还是从右侧查找，它都只会找到同一个位置的该元素。反之，如果一个元素在数组中出现多次，那么它的 indexOf()（第一次出现的索引）将与 lastIndexOf()（最后一次出现的索引）不同。

利用这一特性，我们可以结合 Array.prototype.filter() 方法来遍历数组，并根据每个元素 indexOf(val) === lastIndexOf(val) 的条件进行筛选。

代码实现

以下是使用 filter()、indexOf() 和 lastIndexOf() 方法实现该功能的 JavaScript 代码示例：

const arr = [100, 123, 100, 122, 119, 203, 123, 76, 89];

/**
 * 从数组中筛选出只出现一次的唯一元素
 * @param {Array} data - 输入数组
 * @returns {Array} - 包含唯一元素的数组
 */
const getUniqueElements = (data) => {
    return data.filter((val) => data.indexOf(val) === data.lastIndexOf(val));
};

const result = getUniqueElements(arr);
console.log(result); // 输出: [122, 119, 203, 76, 89]

逐步解析示例

为了更深入地理解上述代码的工作原理，我们以一个更简单的数组 [1, 2, 3, 1, 2] 为例，逐步分析 filter() 方法在每个元素上的判断过程。

假设我们有数组 arr = [1, 2, 3, 1, 2]。

1. 处理第一个元素 1 (索引 0):

   • arr.indexOf(1) 返回 0 (从左侧找到的第一个 1 的索引)。
   • arr.lastIndexOf(1) 返回 3 (从右侧找到的最后一个 1 的索引)。
   • 0 === 3 为 false。因此，1 被过滤掉。

2. 处理第二个元素 2 (索引 1):

   • arr.indexOf(2) 返回 1 (从左侧找到的第一个 2 的索引)。
   • arr.lastIndexOf(2) 返回 4 (从右侧找到的最后一个 2 的索引)。
   • 1 === 4 为 false。因此，2 被过滤掉。

3. 处理第三个元素 3 (索引 2):

   • arr.indexOf(3) 返回 2 (从左侧找到的第一个 3 的索引)。
   • arr.lastIndexOf(3) 返回 2 (从右侧找到的最后一个 3 的索引)。
   • 2 === 2 为 true。因此，3 被保留。

4. 处理第四个元素 1 (索引 3):

   • arr.indexOf(1) 返回 0 (从左侧找到的第一个 1 的索引)。
   • arr.lastIndexOf(1) 返回 3 (从右侧找到的最后一个 1 的索引)。
   • 0 === 3 为 false。因此，1 被过滤掉。

5. 处理第五个元素 2 (索引 4):

   • arr.indexOf(2) 返回 1 (从左侧找到的第一个 2 的索引)。
   • arr.lastIndexOf(2) 返回 4 (从右侧找到的最后一个 2 的索引)。
   • 1 === 4 为 false。因此，2 被过滤掉。

经过所有元素的迭代，最终 filter() 方法将返回一个只包含 [3] 的新数组。这完美地符合了我们的预期，即只保留那些在原数组中只出现过一次的元素。

注意事项与总结

• 性能考量: 尽管这种方法简洁易懂，但在处理非常大的数组时，其性能可能不是最优的。因为对于数组中的每个元素，indexOf() 和 lastIndexOf() 都可能需要遍历整个数组，导致时间复杂度接近 O(n^2)。对于百万级别以上的数据量，可以考虑使用哈希表（Map 或 Object）来统计元素出现次数，从而达到 O(n) 的时间复杂度。
• 适用类型: 此方法适用于数组中包含基本数据类型（如数字、字符串、布尔值）的场景。对于包含对象或数组等引用类型的数组，indexOf() 和 lastIndexOf() 会进行严格相等（===）比较，这意味着它们只会查找引用地址完全相同的对象，而不会比较对象的内容。
• 可读性: 这种解决方案的可读性非常好，通过 indexOf 和 lastIndexOf 的语义，能够直观地理解其筛选唯一元素的逻辑。

通过本文的讲解，您应该已经掌握了如何利用 JavaScript 的 indexOf() 和 lastIndexOf() 方法结合 filter() 函数，高效且准确地从数组中提取出所有只出现一次的唯一元素。在实际开发中，根据具体的数据规模和性能要求，您可以选择最适合的方案。

到这里，我们也就讲完了《JS数组去重：巧用indexOf和lastIndexOf去重技巧》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！