理解问题：何谓“只出现一次的元素”？
在处理数组数据时，我们经常会遇到需要找出其中“唯一”元素的需求。这里的“只出现一次的元素”特指那些在整个数组中，其值仅出现过一次的元素，而不是指去除重复项后保留的第一个元素。例如，对于数组 [100, 123, 100, 122, 119, 203, 123, 76, 89]，我们期望的输出是 [122, 119, 203, 76, 89]，因为 100 和 123 都出现了不止一次。
常见误区：indexOf(val) === ind 的局限性
一些开发者可能会尝试使用 data.filter((val, ind) => data.indexOf(val) === ind) 这种方法来处理。这种方法确实能达到“去重”的效果，但它保留的是每个元素第一次出现的位置。
const arr = [100, 123, 100, 122, 119, 203, 123, 76, 89];
const removeDuplicatesButKeepFirst = (data) => {
return data.filter((val, ind) => data.indexOf(val) === ind);
};
console.log(removeDuplicatesButKeepFirst(arr));
// 预期输出: [100, 123, 122, 119, 203, 76, 89]
// 实际输出: [100, 123, 122, 119, 203, 76, 89]可以看到，100 和 123 虽然在原数组中出现了多次，但由于它们第一次出现的位置被保留了下来，因此它们仍然出现在结果中。这与我们“只提取只出现一次的元素”的目标不符。
核心方法：巧妙利用 indexOf 和 lastIndexOf
要准确找出只出现一次的元素，我们可以利用 Array.prototype.indexOf() 和 Array.prototype.lastIndexOf() 这两个方法的特性。
- indexOf(element)：返回在数组中可以找到一个给定元素的第一个（最小）索引。
- lastIndexOf(element)：返回在数组中可以找到一个给定元素的最后一个（最大）索引。
原理： 如果一个元素在数组中只出现一次，那么它第一次出现的位置（通过 indexOf 查找）和最后一次出现的位置（通过 lastIndexOf 查找）必然是相同的。如果这两个索引不相等，则说明该元素在数组中出现了多次。
立即学习“Java免费学习笔记（深入）”；
基于此原理，我们可以结合 Array.prototype.filter() 方法来筛选出符合条件的元素。
const arr = [100, 123, 100, 122, 119, 203, 123, 76, 89];
const getUniqueOccurrences = (data) => {
return data.filter((val) => data.indexOf(val) === data.lastIndexOf(val));
};
console.log(getUniqueOccurrences(arr));
// 预期输出: [122, 119, 203, 76, 89]详细工作原理剖析
为了更好地理解 indexOf 和 lastIndexOf 如何协同工作，我们以一个简化数组 [1, 2, 3, 1, 2] 为例，逐步分析 filter 的执行过程：
数组： [1, 2, 3, 1, 2]
-
第一次迭代：处理元素 1 (索引 0)
- filter 指针指向第一个 1。
- data.indexOf(1)：从左向右查找 1，找到的第一个索引是 0。
- data.lastIndexOf(1)：从右向左查找 1，找到的最后一个索引是 3。
- 比较：0 === 3 为 false。因此，第一个 1 不会被保留。
-
第二次迭代：处理元素 2 (索引 1)
- filter 指针指向第一个 2。
- data.indexOf(2)：从左向右查找 2，找到的第一个索引是 1。
- data.lastIndexOf(2)：从右向左查找 2，找到的最后一个索引是 4。
- 比较：1 === 4 为 false。因此，第一个 2 不会被保留。
-
第三次迭代：处理元素 3 (索引 2)
- filter 指针指向 3。
- data.indexOf(3)：从左向右查找 3，找到的第一个索引是 2。
- data.lastIndexOf(3)：从右向左查找 3，找到的最后一个索引是 2。
- 比较：2 === 2 为 true。因此，3 会被保留。
-
第四次迭代：处理元素 1 (索引 3)
- filter 指针指向第二个 1。
- data.indexOf(1)：从左向右查找 1，找到的第一个索引是 0。
- data.lastIndexOf(1)：从右向左查找 1，找到的最后一个索引是 3。
- 比较：0 === 3 为 false。因此，第二个 1 不会被保留。
-
第五次迭代：处理元素 2 (索引 4)
- filter 指针指向第二个 2。
- data.indexOf(2)：从左向右查找 2，找到的第一个索引是 1。
- data.lastIndexOf(2)：从右向左查找 2，找到的最后一个索引是 4。
- 比较：1 === 4 为 false。因此，第二个 2 不会被保留。
最终，只有 3 通过了所有测试，所以输出结果是 [3]。这个详细的步骤展示了 indexOf 和 lastIndexOf 如何精确地识别出数组中只出现一次的元素。
完整代码示例
/**
* 从数组中提取只出现一次的元素。
* @param {Array} data - 输入数组。
* @returns {Array} - 包含只出现一次的元素的新数组。
*/
const getUniqueOccurrences = (data) => {
if (!Array.isArray(data)) {
console.error("输入必须是一个数组。");
return [];
}
return data.filter((val) => data.indexOf(val) === data.lastIndexOf(val));
};
// 示例用法
const myArray = [100, 123, 100, 122, 119, 203, 123, 76, 89];
const uniqueElements = getUniqueOccurrences(myArray);
console.log("原始数组:", myArray);
console.log("只出现一次的元素:", uniqueElements); // 输出: [122, 119, 203, 76, 89]
const anotherArray = ['a', 'b', 'a', 'c', 'd', 'b'];
const uniqueElements2 = getUniqueOccurrences(anotherArray);
console.log("原始数组:", anotherArray);
console.log("只出现一次的元素:", uniqueElements2); // 输出: ['c', 'd']
const emptyArray = [];
const uniqueElements3 = getUniqueOccurrences(emptyArray);
console.log("原始数组:", emptyArray);
console.log("只出现一次的元素:", uniqueElements3); // 输出: []
const allUniqueArray = [1, 2, 3, 4];
const uniqueElements4 = getUniqueOccurrences(allUniqueArray);
console.log("原始数组:", allUniqueArray);
console.log("只出现一次的元素:", uniqueElements4); // 输出: [1, 2, 3, 4] 注意事项与性能考量
虽然 indexOf 和 lastIndexOf 的结合方法简洁且易于理解，但在处理非常庞大的数组时，需要注意其潜在的性能问题。
时间复杂度：在 filter 方法的每次迭代中，indexOf 和 lastIndexOf 都可能需要遍历整个数组。这意味着对于一个包含 N 个元素的数组，其时间复杂度可能接近 O(N^2)。对于小型到中型数组，这通常不是问题，但对于包含成千上万甚至更多元素的数组，性能开销会显著增加。
-
替代方案：对于性能要求极高或处理超大型数据集的场景，更推荐使用基于哈希表（如 JavaScript 中的 Map 或普通对象）的方法来统计元素的出现频率。这种方法通常具有 O(N) 的时间复杂度，因为它只需要遍历数组一次（或两次，如果需要单独筛选）。
const getUniqueOccurrencesEfficient = (data) => { const counts = new Map(); for (const item of data) { counts.set(item, (counts.get(item) || 0) + 1); } return data.filter(item => counts.get(item) === 1); }; const myArray = [100, 123, 100, 122, 119, 203, 123, 76, 89]; console.log("高效方法结果:", getUniqueOccurrencesEfficient(myArray)); // 输出: [122, 119, 203, 76, 89]这种基于 Map 的方法在性能上更优，尤其适用于大数据量。
总结
本教程详细介绍了如何在JavaScript中通过巧妙结合 Array.prototype.indexOf() 和 Array.prototype.lastIndexOf() 方法，配合 filter 函数来高效地提取数组中只出现一次的元素。该方法简洁明了，易于理解和实现，适用于大多数常见场景。同时，我们也讨论了其在处理大数据量时的性能考量，并提供了一种更高效的基于哈希表的替代方案，以便读者根据实际需求选择最合适的实现方式。掌握这些技巧将有助于您更灵活、高效地处理JavaScript数组数据。
