JavaScript中查找数组唯一元素的高效方法：利用indexOf与lastIndexOf

本教程将深入探讨如何在JavaScript数组中高效地识别并提取只出现一次的唯一元素。我们将介绍一种巧妙利用indexOf()和lastIndexOf()方法结合filter()函数的技术，通过代码示例和详细逻辑解析，帮助开发者清晰理解其工作原理，从而轻松解决数组去重中的特定需求。

识别数组中的唯一元素

在javascript开发中，我们经常会遇到需要从数组中筛选出特定元素的场景。其中一个常见需求是找出那些在数组中只出现过一次的元素，即非重复元素。例如，给定数组 [100, 123, 100, 122, 119, 203, 123, 76, 89]，我们期望得到的结果是 [122, 119, 203, 76, 89]。

传统的去重方法（如使用 Set）通常会移除所有重复项，只保留每个元素的第一个副本，但它们不会区分元素是否只出现过一次。要实现我们期望的“只保留唯一出现元素”的目标，我们需要一种更精确的判断机制。

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

解决此问题的关键在于巧妙地利用JavaScript数组的两个内置方法：indexOf() 和 lastIndexOf()。

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

当一个元素在数组中只出现一次时，它的第一个出现位置（由indexOf()返回）和最后一个出现位置（由lastIndexOf()返回）将是相同的。反之，如果一个元素出现多次，那么indexOf()会返回其第一次出现的索引，而lastIndexOf()会返回其最后一次出现的索引，这两个索引将不相同。

基于此原理，我们可以结合 Array.prototype.filter() 方法来遍历数组，并对每个元素应用这个判断条件。

立即学习“Java免费学习笔记（深入）”；

实现代码示例

以下是使用 filter()、indexOf() 和 lastIndexOf() 组合实现此功能的JavaScript代码：

const arr = [100, 123, 100, 122, 119, 203, 123, 76, 89];
/**
* 过滤出数组中只出现一次的元素
* @param {Array} data - 输入数组
* @returns {Array} 包含只出现一次元素的数组
*/
const getUniqueOccurrences = (data) => {
return data.filter((value) => data.indexOf(value) === data.lastIndexOf(value));
};
const result = getUniqueOccurrences(arr);
console.log(result); // 输出: [122, 119, 203, 76, 89]

详细逻辑解析

为了更好地理解上述代码的工作原理，我们以一个简单的数组 [1, 2, 3, 1, 2] 为例，逐步分析 filter() 方法的执行过程：

1. 数组初始化: arr = [1, 2, 3, 1, 2]

2. 第一次迭代: value = 1 (位于索引 0)

   • data.indexOf(1) 返回 0 (1 第一次出现在索引 0)
   • data.lastIndexOf(1) 返回 3 (1 最后一次出现在索引 3)
   • 0 === 3 为 false。因此，元素 1 不会被保留。

3. 第二次迭代: value = 2 (位于索引 1)

   • data.indexOf(2) 返回 1 (2 第一次出现在索引 1)
   • data.lastIndexOf(2) 返回 4 (2 最后一次出现在索引 4)
   • 1 === 4 为 false。因此，元素 2 不会被保留。

4. 第三次迭代: value = 3 (位于索引 2)

   • data.indexOf(3) 返回 2 (3 第一次出现在索引 2)
   • data.lastIndexOf(3) 返回 2 (3 最后一次出现在索引 2)
   • 2 === 2 为 true。因此，元素 3 被保留。

5. 第四次迭代: value = 1 (位于索引 3)

   • data.indexOf(1) 返回 0 (1 第一次出现在索引 0)
   • data.lastIndexOf(1) 返回 3 (1 最后一次出现在索引 3)
   • 0 === 3 为 false。因此，元素 1 不会被保留。

6. 第五次迭代: value = 2 (位于索引 4)

   • data.indexOf(2) 返回 1 (2 第一次出现在索引 1)
   • data.lastIndexOf(2) 返回 4 (2 最后一次出现在索引 4)
   • 1 === 4 为 false。因此，元素 2 不会被保留。

经过所有迭代，最终 filter() 方法返回的数组将只包含 [3]，这正是我们期望的只出现一次的元素。

注意事项与性能考量

1. 时间复杂度: 这种方法虽然简洁易懂，但在性能上存在一定的局限性。filter() 方法会遍历数组中的每个元素，而对于每个元素，indexOf() 和 lastIndexOf() 又会分别对整个数组进行一次或多次遍历。因此，在最坏情况下（例如，数组中所有元素都是唯一的），其时间复杂度将达到 O(n^2)，其中 n 是数组的长度。对于包含大量元素的数组，这可能会导致性能问题。

2. 适用场景: 这种方法最适合于数组长度适中，且明确需要找出“只出现一次”的元素的场景。如果仅仅是需要去重（即保留每个元素的第一个副本，不关心是否只出现一次），使用 new Set(arr) 或 Array.from(new Set(arr)) 会更高效，时间复杂度通常为 O(n)。

3. 替代方案（针对大规模数据）: 对于非常大的数组，如果性能成为瓶颈，可以考虑使用哈希表（如JavaScript中的 Map 或 Object）来记录元素的出现次数。这种方法的步骤如下：

   • 第一次遍历数组，使用 Map 存储每个元素及其出现次数。
   • 第二次遍历 Map，筛选出出现次数为 1 的元素。

   这种基于哈希表的方案通常具有 O(n) 的时间复杂度，因为它只需要两次线性遍历。

   const arrLarge = [100, 123, 100, 122, 119, 203, 123, 76, 89, /* ...大量数据 */];
   const getUniqueOccurrencesEfficient = (data) => {
   const counts = new Map();
   for (const item of data) {
   counts.set(item, (counts.get(item) || 0) + 1);
   }
   const result = [];
   for (const item of data) { // 再次遍历原数组以保持原始顺序，或遍历Map的key
   if (counts.get(item) === 1) {
   result.push(item);
   }
   }
   // 如果不关心顺序，可以直接从Map中筛选：
   // const result = Array.from(counts.entries())
   //                     .filter(([key, value]) => value === 1)
   //                     .map(([key, value]) => key);
   return result;
   };
   // console.log(getUniqueOccurrencesEfficient(arrLarge));

   请注意，上述基于 Map 的方法在第二次遍历 data 时，如果 data 很大，可能会再次导致 O(n) 的查找开销。更优化的方式是直接从 Map 的 keys() 或 entries() 中筛选，但这会丢失原始数组的顺序。如果需要保持原始顺序，则需要第二次遍历原始数组。

总结

利用 indexOf() 和 lastIndexOf() 判断元素是否在数组中只出现一次，是一种简洁且易于理解的JavaScript技巧。它非常适合处理中小型数组中筛选唯一出现元素的需求。然而，在处理大规模数据时，开发者应考虑其 O(n^2) 的时间复杂度，并根据实际性能要求选择更优化的哈希表方案。理解不同方法的优缺点，能够帮助我们编写出更高效、更健壮的JavaScript代码。