JavaScript数组去重技巧分享

本文深入探讨了JavaScript数组中提取唯一元素（即只出现一次的元素）的实用技巧。重点讲解如何巧妙利用 `Array.prototype.indexOf()` 和 `Array.prototype.lastIndexOf()` 方法，结合 `filter` 函数高效筛选出目标元素，避免常见的去重误区。通过详细的代码示例和步骤剖析，帮助读者理解该方法的原理及其在实际应用中的优势。同时，文章也指出了该方法在处理大数据量数组时可能存在的性能问题，并提供了一种基于哈希表的更高效替代方案。掌握这些技巧，能显著提升JavaScript数组数据处理的效率和准确性，让开发者能够根据实际场景选择最佳实践。

理解问题：何谓“只出现一次的元素”？

在处理数组数据时，我们经常会遇到需要找出其中“唯一”元素的需求。这里的“只出现一次的元素”特指那些在整个数组中，其值仅出现过一次的元素，而不是指去除重复项后保留的第一个元素。例如，对于数组 [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 查找）必然是相同的。如果这两个索引不相等，则说明该元素在数组中出现了多次。

基于此原理，我们可以结合 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. 数组： [1, 2, 3, 1, 2]

2. 第一次迭代：处理元素 1 (索引 0)

   • filter 指针指向第一个 1。
   • data.indexOf(1)：从左向右查找 1，找到的第一个索引是 0。
   • data.lastIndexOf(1)：从右向左查找 1，找到的最后一个索引是 3。
   • 比较：0 === 3 为 false。因此，第一个 1 不会被保留。

3. 第二次迭代：处理元素 2 (索引 1)

   • filter 指针指向第一个 2。
   • data.indexOf(2)：从左向右查找 2，找到的第一个索引是 1。
   • data.lastIndexOf(2)：从右向左查找 2，找到的最后一个索引是 4。
   • 比较：1 === 4 为 false。因此，第一个 2 不会被保留。

4. 第三次迭代：处理元素 3 (索引 2)

   • filter 指针指向 3。
   • data.indexOf(3)：从左向右查找 3，找到的第一个索引是 2。
   • data.lastIndexOf(3)：从右向左查找 3，找到的最后一个索引是 2。
   • 比较：2 === 2 为 true。因此，3 会被保留。

5. 第四次迭代：处理元素 1 (索引 3)

   • filter 指针指向第二个 1。
   • data.indexOf(1)：从左向右查找 1，找到的第一个索引是 0。
   • data.lastIndexOf(1)：从右向左查找 1，找到的最后一个索引是 3。
   • 比较：0 === 3 为 false。因此，第二个 1 不会被保留。

6. 第五次迭代：处理元素 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数组数据。

好了，本文到此结束，带大家了解了《JavaScript数组去重技巧分享》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！