本教程将深入探讨如何在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() 方法的执行过程：
-
数组初始化: arr = [1, 2, 3, 1, 2]
-
第一次迭代: value = 1 (位于索引 0)
- data.indexOf(1) 返回 0 (1 第一次出现在索引 0)
- data.lastIndexOf(1) 返回 3 (1 最后一次出现在索引 3)
- 0 === 3 为 false。因此，元素 1 不会被保留。
-
第二次迭代: value = 2 (位于索引 1)
- data.indexOf(2) 返回 1 (2 第一次出现在索引 1)
- data.lastIndexOf(2) 返回 4 (2 最后一次出现在索引 4)
- 1 === 4 为 false。因此，元素 2 不会被保留。
-
第三次迭代: value = 3 (位于索引 2)
- data.indexOf(3) 返回 2 (3 第一次出现在索引 2)
- data.lastIndexOf(3) 返回 2 (3 最后一次出现在索引 2)
- 2 === 2 为 true。因此，元素 3 被保留。
-
第四次迭代: value = 1 (位于索引 3)
- data.indexOf(1) 返回 0 (1 第一次出现在索引 0)
- data.lastIndexOf(1) 返回 3 (1 最后一次出现在索引 3)
- 0 === 3 为 false。因此，元素 1 不会被保留。
-
第五次迭代: value = 2 (位于索引 4)
- data.indexOf(2) 返回 1 (2 第一次出现在索引 1)
- data.lastIndexOf(2) 返回 4 (2 最后一次出现在索引 4)
- 1 === 4 为 false。因此，元素 2 不会被保留。
经过所有迭代，最终 filter() 方法返回的数组将只包含 [3]，这正是我们期望的只出现一次的元素。
注意事项与性能考量
-
时间复杂度: 这种方法虽然简洁易懂，但在性能上存在一定的局限性。filter() 方法会遍历数组中的每个元素，而对于每个元素，indexOf() 和 lastIndexOf() 又会分别对整个数组进行一次或多次遍历。因此，在最坏情况下（例如，数组中所有元素都是唯一的），其时间复杂度将达到 O(n^2)，其中 n 是数组的长度。对于包含大量元素的数组，这可能会导致性能问题。
-
适用场景: 这种方法最适合于数组长度适中，且明确需要找出“只出现一次”的元素的场景。如果仅仅是需要去重（即保留每个元素的第一个副本，不关心是否只出现一次），使用 new Set(arr) 或 Array.from(new Set(arr)) 会更高效，时间复杂度通常为 O(n)。
-
替代方案（针对大规模数据）: 对于非常大的数组，如果性能成为瓶颈，可以考虑使用哈希表（如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代码。
