JavaScript 数组唯一元素提取：利用 indexOf 和 lastIndexOf 精准去重

数组唯一元素提取的需求

在日常的 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. 处理第一个元素 1 (索引 0):

   • arr.indexOf(1) 返回 0 (从左侧找到的第一个 1 的索引)。
   • arr.lastIndexOf(1) 返回 3 (从右侧找到的最后一个 1 的索引)。
   • 0 === 3 为 false。因此，1 被过滤掉。

2. 处理第二个元素 2 (索引 1):

   • arr.indexOf(2) 返回 1 (从左侧找到的第一个 2 的索引)。
   • arr.lastIndexOf(2) 返回 4 (从右侧找到的最后一个 2 的索引)。
   • 1 === 4 为 false。因此，2 被过滤掉。

3. 处理第三个元素 3 (索引 2):

   • arr.indexOf(3) 返回 2 (从左侧找到的第一个 3 的索引)。
   • arr.lastIndexOf(3) 返回 2 (从右侧找到的最后一个 3 的索引)。
   • 2 === 2 为 true。因此，3 被保留。

4. 处理第四个元素 1 (索引 3):

   • arr.indexOf(1) 返回 0 (从左侧找到的第一个 1 的索引)。
   • arr.lastIndexOf(1) 返回 3 (从右侧找到的最后一个 1 的索引)。
   • 0 === 3 为 false。因此，1 被过滤掉。

5. 处理第五个元素 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() 函数，高效且准确地从数组中提取出所有只出现一次的唯一元素。在实际开发中，根据具体的数据规模和性能要求，您可以选择最适合的方案。

以上就是JavaScript 数组唯一元素提取：利用 indexOf 和 lastIndexOf 精准去重的详细内容，更多请关注php中文网其它相关文章！