本文深入探讨了在JavaScript数组中识别并提取仅出现一次的元素的方法。通过详细解析Array.prototype.indexOf()和Array.prototype.lastIndexOf()的巧妙结合，我们展示了如何精确筛选出数组中的唯一项，并区分其与传统去重操作的区别。文章提供了清晰的代码示例和分步解释，旨在帮助开发者高效处理数组数据，尤其是在需要精确识别非重复元素时。
引言：精确识别数组中的唯一元素
在javascript开发中，我们经常需要处理数组数据。一个常见的需求是从数组中找出那些只出现过一次的元素，即非重复（non-multiple occurrence）元素。这与简单的数组去重（移除重复项，保留每个元素的第一个副本）有所不同。例如，给定数组 [100, 123, 100, 122, 119, 203, 123, 76, 89]，我们期望的输出是 [122, 119, 203, 76, 89]。
常见误区：indexOf(val) === ind 的局限性
一些开发者可能会尝试使用 Array.prototype.Filter() 结合 indexOf() 来实现去重：
const arr = [100, 123, 100, 122, 119, 203, 123, 76, 89]; const removeDuplicates = (data) => { return data.filter((val, ind) => data.indexOf(val) === ind); }; console.log(removeDuplicates(arr)); // 预期输出：[100, 123, 122, 119, 203, 76, 89] // 实际输出：[100, 123, 122, 119, 203, 76, 89]
这种方法的作用是移除重复项，但它会保留每个元素第一次出现的实例。例如，对于数组 [1, 2, 3, 1, 2]，上述方法会返回 [1, 2, 3]。然而，如果我们的目标是仅提取那些在整个数组中只出现过一次的元素，那么 1 和 2 都不应该被包含在内，因为它们都出现了多次。在这种情况下，我们期望的结果是 [3]。显然，这种方法不适用于我们当前的需求。
核心策略：indexOf 与 lastIndexOf 的巧妙结合
要精确识别数组中只出现一次的元素，我们可以巧妙地利用 Array.prototype.indexOf() 和 Array.prototype.lastIndexOf() 这两个方法。
- Array.prototype.indexOf(searchElement)：返回在数组中可以找到给定元素的第一个（最小）索引。
- Array.prototype.lastIndexOf(searchElement)：返回在数组中可以找到给定元素的最后一个（最大）索引。
原理阐述： 如果一个元素在数组中只出现一次，那么它第一次出现的索引 (indexOf) 和最后一次出现的索引 (lastIndexOf) 必然是相同的。反之，如果一个元素在数组中出现了多次，那么它的第一次出现索引和最后一次出现索引将不同。我们可以利用这一特性来筛选出唯一的元素。
实现代码：
立即学习“Java免费学习笔记（深入）”；
const arr = [100, 123, 100, 122, 119, 203, 123, 76, 89]; /** * 提取数组中仅出现一次的元素 * @param {Array} data - 输入数组 * @returns {Array} - 仅包含出现一次的元素的数组 */ const getUniqueOccurrences = (data) => { return data.filter((val) => data.indexOf(val) === data.lastIndexOf(val)); }; console.log(getUniqueOccurrences(arr)); // 预期输出：[122, 119, 203, 76, 89]
逐步解析示例： 让我们以一个更简单的数组 [1, 2, 3, 1, 2] 为例，详细解释 filter 函数的判断过程：
-
处理元素 1 (第一个)：
- val 为 1。
- data.indexOf(1) 返回 0 (第一个 1 的索引)。
- data.lastIndexOf(1) 返回 3 (最后一个 1 的索引)。
- 比较：0 === 3 为 false。因此，第一个 1 不会被保留。
-
处理元素 2 (第一个)：
- val 为 2。
- data.indexOf(2) 返回 1 (第一个 2 的索引)。
- data.lastIndexOf(2) 返回 4 (最后一个 2 的索引)。
- 比较：1 === 4 为 false。因此，第一个 2 不会被保留。
-
处理元素 3：
- val 为 3。
- data.indexOf(3) 返回 2 ( 3 的索引)。
- data.lastIndexOf(3) 返回 2 ( 3 的索引)。
- 比较：2 === 2 为 true。因此，3 会被保留。
-
处理元素 1 (第二个)：
- val 为 1。
- data.indexOf(1) 返回 0 (第一个 1 的索引)。
- data.lastIndexOf(1) 返回 3 (最后一个 1 的索引)。
- 比较：0 === 3 为 false。因此，第二个 1 不会被保留。
-
处理元素 2 (第二个)：
- val 为 2。
- data.indexOf(2) 返回 1 (第一个 2 的索引)。
- data.lastIndexOf(2) 返回 4 (最后一个 2 的索引)。
- 比较：1 === 4 为 false。因此，第二个 2 不会被保留。
经过整个过滤过程，最终结果为 [3]，这正是我们期望的单次出现元素。
性能考量与优化方案
尽管 indexOf 和 lastIndexOf 的结合方法简洁直观，但其性能在处理大型数组时可能成为瓶颈。
时间复杂度分析： 在 Array.prototype.filter() 内部，对于数组中的每一个元素，我们都调用了 indexOf() 和 lastIndexOf()。这两个方法在最坏情况下都需要遍历整个数组。因此，这种方法的整体时间复杂度为 O(n^2)，其中 n 是数组的长度。对于包含成千上万个元素的大型数组，O(n^2) 的复杂度会导致执行时间急剧增加。
优化方案（使用 map 或对象统计频率）： 为了提高性能，我们可以采用基于哈希表（如 Map 或普通对象）的方法来统计每个元素的出现频率。这种方法通常具有 O(n) 的时间复杂度，因为它只需要对数组进行两次线性遍历。
const arr = [100, 123, 100, 122, 119, 203, 123, 76, 89]; /** * 优化版：提取数组中仅出现一次的元素 * 使用 Map 统计元素频率，提高性能 * @param {Array} data - 输入数组 * @returns {Array} - 仅包含出现一次的元素的数组 */ const getUniqueOccurrencesOptimized = (data) => { const counts = new Map(); // 使用 Map 存储元素及其出现次数 // 第一次遍历：统计每个元素的出现次数 for (const item of data) { counts.set(item, (counts.get(item) || 0) + 1); } // 第二次遍历：过滤出出现次数为 1 的元素 return data.filter(item => counts.get(item) === 1); }; console.log(getUniqueOccurrencesOptimized(arr)); // 预期输出：[122, 119, 203, 76, 89]
这个优化方案首先通过一次遍历构建一个频率映射表，然后通过另一次遍历过滤出频率为 1 的元素。虽然增加了 O(n) 的空间复杂度（用于存储 Map），但将时间复杂度降低到了 O(n)，这对于处理大型数据集来说是一个显著的改进。
总结
在JavaScript数组中识别并提取仅出现一次的元素，可以通过 Array.prototype.filter() 结合 indexOf() 和 lastIndexOf() 的相等性判断来实现。这种方法简洁直观，易于理解，适用于处理中小型数组。
对于性能要求较高的场景，特别是当处理大型数组时，推荐使用基于哈希表（如 Map 或普通对象）来统计元素频率，然后进行过滤。这种优化方案将时间复杂度从 O(n^2) 降低到 O(n)，显著提高了处理效率。开发者应根据具体的数组大小和性能需求，选择最适合的实现方法。
