龙空技术网

如何高效删除 JavaScript 数组中的重复元素?

不秃头程序员 133

前言:

现在小伙伴们对“js去除特定字符符号”都比较着重,看官们都想要分析一些“js去除特定字符符号”的相关内容。那么小编也在网络上网罗了一些对于“js去除特定字符符号””的相关知识,希望你们能喜欢,朋友们快快来学习一下吧!

在日常编程中,我们经常会遇到数组去重的问题。今天,我们就来聊聊如何用JavaScript来优雅地解决这个问题。

问题描述

给定一个包含重复元素的数组,我们希望创建一个新的数组,其中只包含原始数组中的唯一值。例如,如果我们有一个数组 [1, 2, 3, 2, 4, 1, 5],期望的输出应该是 [1, 2, 3, 4, 5]

方法一:最原始的方法

我们可以使用最简单的方法——嵌套循环来解决这个问题。遍历每一个元素,检查它是否已经存在于新数组中,如果不存在则添加进去。

function removeDuplicates(arr) {  const result = [];  for (let i = 0; i < arr.length; i++) {    let isDuplicate = false;    for (let j = 0; j < result.length; j++) {      if (arr[i] === result[j]) {        isDuplicate = true;        break;      }    }    if (!isDuplicate) {      result.push(arr[i]);    }  }  return result;}const myArray = [1, 2, 3, 2, 4, 1, 5];const uniqueArray = removeDuplicates(myArray);console.log(uniqueArray); // 输出: [1, 2, 3, 4, 5]

这个方法虽然直观,但当数组很大时,效率会变得非常低,因为时间复杂度是 O(n²)。

方法二:使用indexOf和filter方法

我们还可以使用 indexOf 方法配合 filter 方法来去重,这样看起来会简洁不少。

function removeDuplicates(arr) {  return arr.filter((item, pos) => arr.indexOf(item) === pos);}const myArray = [1, 2, 3, 2, 4, 1, 5];const uniqueArray = removeDuplicates(myArray);console.log(uniqueArray); // 输出: [1, 2, 3, 4, 5]

在这个方法中,我们使用 filter 方法创建了一个新数组,只有满足条件的元素才会被包含进来。条件是当前元素的索引应该等于该元素在数组中第一次出现的位置。这种方法代码看起来更简洁,但是它的时间复杂度依然是 O(n²),因为 indexOf 需要遍历整个数组来查找元素的位置。

使用对象特性优化

在处理大数组去重时,我们可以利用对象的特性来提升性能。通过在对象中记录数组元素,可以有效减少重复元素的检查次数。

function removeDuplicates(arr) {  const seen = {};  return arr.filter((item) => {    if (seen[item]) {      return false;    } else {      seen[item] = true;      return true;    }  });}const myArray = [1, 2, 3, 2, 4, 1, 5];const uniqueArray = removeDuplicates(myArray);console.log(uniqueArray); // 输出: [1, 2, 3, 4, 5]

这个方法创建了一个空对象 seen,然后通过 filter 方法遍历数组。每个元素都会检查是否已存在于 seen 对象中。如果存在,则跳过;否则,加入 seen 对象并保留在新数组中。这种方法对于大数组更高效,但存在一些缺点:

类型转换:对象键只能是字符串或符号,这导致数字和字符串形式的数字无法区分。例如,removeDuplicates([1, "1"]) 会返回 [1]。对象相等性:所有对象在这个解决方案中被认为是相等的。例如,removeDuplicates([{foo: 1}, {foo: 2}]) 会返回 [{foo: 1}]。

如果你的数组只包含基本类型,并且不需要区分类型,这可以放心使用这个方法。

结合对象和数组的线性搜索

我们可以结合对象和数组的线性搜索方法来解决上述问题。

function removeDuplicates(arr) {  const prims = { boolean: {}, number: {}, string: {} };  const objs = [];  return arr.filter((item) => {    const type = typeof item;    if (type in prims) {      if (prims[type].hasOwnProperty(item)) {        return false;      } else {        prims[type][item] = true;        return true;      }    } else {      if (objs.indexOf(item) >= 0) {        return false;      } else {        objs.push(item);        return true;      }    }  });}const myArray = [1, 2, 3, 2, 4, 1, 5, { foo: 1 }, { foo: 2 }];const uniqueArray = removeDuplicates(myArray);console.log(uniqueArray); // 输出: [1, 2, 3, 4, 5, { foo: 1 }, { foo: 2 }]

主要优点

分类存储:通过将基本类型和对象类型分别存储,减少了不同类型之间的冲突,逻辑清晰。高效处理基本类型:使用对象存储基本类型,查找和存储操作的时间复杂度为 O(1),效率较高。

存在的问题

1、对象类型处理问题:引用比较:代码使用 indexOf 方法判断对象是否存在于数组中,这实际上是比较对象的引用而不是内容。即使两个对象内容相同,但引用不同,indexOf 也会返回 -1,导致内容相同但引用不同的对象被认为是不同的。例如,{ foo: 1 } 和另一个 { foo: 1 } 会被当作两个不同的对象。性能问题:对于大量对象类型的元素,由于 indexOf 方法需要遍历整个数组,时间复杂度为 O(n),性能较差。2、不能深度比较:对于嵌套对象或数组,该方法无法进行深度比较。例如,{ foo: [1, 2] } 和 { foo: [1, 2] } 这样的对象,内容相同但引用不同,会被认为是不同的对象。

最终方案:编写深度比较函数

编写深度比较函数 isDeepDataStructureEquality,用来比较两个对象的内容是否相同。

function isDeepDataStructureEquality(a, b) {    let isEqual = Object.is(a, b);    if (!isEqual) {      if (Array.isArray(a) && Array.isArray(b)) {        isEqual = (a.length === b.length) && a.every(          (item, idx) => isDeepDataStructureEquality(item, b[idx])        );      } else if (        a && b        && (typeof a === 'object')        && (typeof b === 'object')      ) {        const aKeys = Object.keys(a);        const bKeys = Object.keys(b);        isEqual = (aKeys.length === bKeys.length) && aKeys.every(          (key, idx) => isDeepDataStructureEquality(a[key], b[key])        );      }    }    return isEqual;  }function removeDuplicates(arr) {  const primitives = { boolean: {}, number: {}, string: {} };  const objs = [];  return arr.filter(item => {    const type = typeof item;    if (type in primitives) {      if (primitives[type].hasOwnProperty(item)) {        return false;      } else {        primitives[type][item] = true;        return true;      }    } else {      if (objs.some(obj => isDeepDataStructureEquality(obj, item))) {        return false;      } else {        objs.push(item);        return true;      }    }  });}
方法三:排序去重

另一种去重方法是先排序数组,然后去除连续重复的元素。

function removeDuplicates(arr) {  return arr.sort().filter((item, pos, ary) => !pos || item !== ary[pos - 1]);}const myArray = [1, 2, 3, 2, 4, 1, 5];const uniqueArray = removeDuplicates(myArray);console.log(uniqueArray); // 输出: [1, 2, 3, 4, 5]

这个方法首先使用 sort 方法对数组进行排序,然后使用 filter 方法去除连续的重复元素。虽然对已排序的数组很有效,但无法处理对象数组。

方法四:使用 Set 处理对象

对于包含对象的数组,我们可以利用 Set 数据结构来高效去重。因为 Set 只存储唯一值,我们可以将数组转换为 Set,然后再转换回数组。

function removeDuplicates(arr) {  return [...new Set(arr)];}const myArray = [1, 2, 3, 2, 4, 1, 5, { foo: 1 }, { foo: 2 }];const uniqueArray = removeDuplicates(myArray);console.log(uniqueArray); // 输出: [1, 2, 3, 4, 5, { foo: 1 }, { foo: 2 }]

这个方法通过 new Set(arr) 创建一个新的集合,然后使用扩展运算符 ... 将集合展开为数组,去重过程简单且高效。

优点简洁:代码非常简洁,只需一行代码即可实现数组去重。高效:Set 数据结构在插入元素时自动去重,性能较好,时间复杂度为 O(n)。存在的问题对象引用问题:Set 判断元素是否相等时,使用的是同一对象引用。例如,两个内容相同但引用不同的对象 { foo: 1 } 和 { foo: 1 } 会被视为不同的元素。总结

在实际开发中,选择合适的数组去重方法非常重要。如果数组主要包含基本类型,使用 Set 是一种简洁高效的选择。如果数组中包含复杂结构的对象,可以结合深度比较函数来确保去重的准确性。

无论你选择哪种方法,都要根据具体的应用场景和数据特点来决定。希望这些方法能帮助你在实际开发中更优雅地解决数组去重问题。如果你有其他更好的方法或建议,欢迎在评论区分享哦!

如果你喜欢这篇文章,请点赞并关注,更多前端技巧和小妙招等着你哦!

标签: #js去除特定字符符号 #js返回数组中重复的值 #js数组删除元素的方法 #js遍历列表嵌套字典