本教程将详细介绍如何利用 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 代码示例：
立即学习“Java免费学习笔记（深入）”；
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 (索引 0):
- arr.indexOf(1) 返回 0 (从左侧找到的第一个 1 的索引)。
- arr.lastIndexOf(1) 返回 3 (从右侧找到的最后一个 1 的索引)。
- 0 === 3 为 false。因此，1 被过滤掉。
-
处理第二个元素 2 (索引 1):
- arr.indexOf(2) 返回 1 (从左侧找到的第一个 2 的索引)。
- arr.lastIndexOf(2) 返回 4 (从右侧找到的最后一个 2 的索引)。
- 1 === 4 为 false。因此，2 被过滤掉。
-
处理第三个元素 3 (索引 2):
- arr.indexOf(3) 返回 2 (从左侧找到的第一个 3 的索引)。
- arr.lastIndexOf(3) 返回 2 (从右侧找到的最后一个 3 的索引)。
- 2 === 2 为 true。因此，3 被保留。
-
处理第四个元素 1 (索引 3):
- arr.indexOf(1) 返回 0 (从左侧找到的第一个 1 的索引)。
- arr.lastIndexOf(1) 返回 3 (从右侧找到的最后一个 1 的索引)。
- 0 === 3 为 false。因此，1 被过滤掉。
-
处理第五个元素 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() 函数，高效且准确地从数组中提取出所有只出现一次的唯一元素。在实际开发中，根据具体的数据规模和性能要求，您可以选择最适合的方案。
