奕玖科技 > 新闻中心 > 技术文章

几种javaScript数组去重的方法

来源: 奕玖科技 瘦死的猪 | 2023/3/7 14:25:19

在JavaScript中,数组去重是一种非常常见的操作。在处理数据时,我们常常需要把数组中的重复元素去掉,以方便后续的数据处理和分析。在这篇文章中,我们将介绍一些常见的数组去重方法。

20230221638125902963813173.jpg

1.使用Set

ES6引入了Set数据结构,它是一种类似于数组的数据结构,但是它的元素不会重复。因此,我们可以使用Set来实现数组去重。代码如下:

Let arr = [1, 2, 2, 3, 3, 4, 5, 5];
let set = new Set(arr);
let result = Array.from(set);
console.log(result); // [1, 2, 3, 4, 5]

上述代码中,我们首先创建一个数组arr,然后使用Set将其转换成Set对象。接着,我们将Set对象转换成数组result,最后输出结果。

2.使用indexOf

另一种实现数组去重的方法是使用indexOfindexOf方法可以返回数组中某个元素的位置,如果数组中不存在该元素,则返回-1。我们可以遍历数组,将元素添加到新的数组中,但是在添加之前先检查新数组中是否已经存在该元素,如果存在,则不添加。代码如下:

let arr = [1, 2, 2, 3, 3, 4, 5, 5];
let result = [];
for (let i = 0; i < arr.length; i++) {
  if (result.indexOf(arr[i]) === -1) {
    result.push(arr[i]);
  }
}
console.log(result); // [1, 2, 3, 4, 5]

上述代码中,我们首先创建一个空数组result,然后遍历原数组arr。在遍历过程中,我们使用indexOf方法检查元素是否已经存在于result数组中。如果不存在,则将该元素添加到result数组中。最后输出result数组。

3.使用includes

ES7引入了includes方法,它可以用来检查数组中是否包含某个元素。我们可以利用includes方法来实现数组去重。代码如下:

let arr = [1, 2, 2, 3, 3, 4, 5, 5];
let result = [];
for (let i = 0; i < arr.length; i++) {
  if (!result.includes(arr[i])) {
    result.push(arr[i]);
  }
}
console.log(result); // [1, 2, 3, 4, 5]

上述代码中,我们首先创建一个空数组result,然后遍历原数组arr。在遍历过程中,我们使用includes方法检查元素是否已经存在于result数组中。如果不存在,则将该元素添加到result数组中。最后输出result数组。

4.使用reduce

我们可以使用reduce方法来实现数组去重。reduce方法可以将

一个数组中的每个元素依次传入一个回调函数,将回调函数的返回值作为下一次迭代的初始值,最终返回一个值。我们可以利用reduce方法来遍历数组,将元素添加到新的数组中,但是在添加之前先检查新数组中是否已经存在该元素,如果存在,则不添加。代码如下:

let arr = [1, 2, 2, 3, 3, 4, 5, 5];
let result = arr.reduce((acc, cur) => {
  if (!acc.includes(cur)) {
    acc.push(cur);
  }
  return acc;
}, []);
console.log(result); // [1, 2, 3, 4, 5]

上述代码中,我们首先创建一个空数组result,然后使用reduce方法遍历原数组arr。在遍历过程中,我们使用includes方法检查元素是否已经存在于result数组中。如果不存在,则将该元素添加到result数组中。最后输出result数组。

5.使用filter

我们可以使用filter方法来实现数组去重。filter方法可以用于筛选出符合条件的元素,并返回一个新的数组。我们可以利用filter方法来遍历数组,筛选出不重复的元素。代码如下:

let arr = [1, 2, 2, 3, 3, 4, 5, 5];
let result = arr.filter((value, index, self) => {
  return self.indexOf(value) === index;
});
console.log(result); // [1, 2, 3, 4, 5]

上述代码中,我们使用filter方法遍历原数组arr,在回调函数中使用indexOf方法检查元素是否在原数组中第一次出现的位置,如果当前位置和第一次出现的位置相同,则表示当前元素不重复,将其保留在新的数组中。最后输出result数组。

6.使用Map

我们可以使用Map数据结构来实现数组去重。Map数据结构可以用于存储键值对,并且可以根据键来查找对应的值。我们可以利用Map数据结构来遍历数组,将元素添加到新的Map对象中,但是在添加之前先检查Map对象中是否已经存在该元素,如果存在,则不添加。最后将Map对象转换成数组。代码如下:

let arr = [1, 2, 2, 3, 3, 4, 5, 5];
let map = new Map();
for (let i = 0; i < arr.length; i++) {
  if (!map.has(arr[i])) {
    map.set(arr[i], i);
  }
}
let result = Array.from(map.keys());
console.log(result); // [1, 2, 3, 4, 5]

上述代码中,我们首先创建一个空的Map对象map,然后遍历原数组arr。在遍历过程中,我们使用has方法检查元素是否已经存在于map对象中。如果不存在,则将该元素作为键,其下标作为值,添加到map对象中。最后,我们使用Array.from方法将map对象的键转换成数组,即为去重后的数组。最后输出result数组。

7.使用Set

我们可以使用Set数据结构来实现数组去重。Set数据结构可以用于存储不重复的值,因此我们可以直接将数组转换成Set对象,然后再将其转换成数组,即可实现数组去重。代码如下:

let arr = [1, 2, 2, 3, 3, 4, 5, 5];
let set = new Set(arr);
let result = Array.from(set);
console.log(result); // [1, 2, 3, 4, 5]

上述代码中,我们首先创建一个Set对象set,并将原数组arr传入Set对象的构造函数中。Set对象会自动去重,因此我们可以将set对象转换成数组,即为去重后的数组。最后输出result数组。

8.使用for循环嵌套

我们可以使用两个嵌套的for循环来实现数组去重。外层循环用于遍历原数组arr,内层循环用于检查当前元素是否已经存在于新数组result中。如果不存在,则将该元素添加到result数组中。代码如下:

let arr = [1, 2, 2, 3, 3, 4, 5, 5];
let result = [];
for (let i = 0; i < arr.length; i++) {
  let flag = true;
  for (let j = 0; j < result.length; j++) {
    if (arr[i] === result[j]) {
      flag = false;
      break;
    }
  }
  if (flag) {
    result.push(arr[i]);
  }
}
console.log(result); // [1, 2, 3, 4, 5]

上述代码中,我们首先创建一个空数组result,然后使用两个嵌套的for循环遍历原数组arr和新数组result。在内层循环中,我们使用===运算符检查元素是否相等,如果相等,则表示当前元素已经存在于新数组result中,将flag变量置为false,跳出内层循环。在外层循环中,我们使用flag变量判断当前元素是否已经存在于新数组result中,如果不存在,则将该元素添加到result数组中。最后输出result数组。

9.使用Object键值对

我们可以使用一个空对象作为存储容器来实现数组去重。在遍历原数组arr的同时,将数组元素作为键添加到对象中,然后将对象的键

转换成数组即为去重后的数组。代码如下:

let arr = [1, 2, 2, 3, 3, 4, 5, 5];
let obj = {};
for (let i = 0; i < arr.length; i++) {
  let item = arr[i];
  obj[item] = item;
}
let result = Object.values(obj);
console.log(result); // [1, 2, 3, 4, 5]

上述代码中,我们首先创建一个空对象obj,然后使用for循环遍历原数组arr,将数组元素作为键添加到obj对象中。在添加键的过程中,由于对象中的键必须是唯一的,因此重复的键会被自动去重。最后,我们使用Object.values方法将obj对象的键转换成数组,即为去重后的数组。最后输出result数组。

10.使用reduce方法

我们可以使用reduce方法来实现数组去重。在reduce方法的回调函数中,我们使用includes方法检查元素是否已经存在于新数组result中。如果不存在,则将该元素添加到result数组中。代码如下:

let arr = [1, 2, 2, 3, 3, 4, 5, 5];
let result = arr.reduce((acc, cur) => {
  if (!acc.includes(cur)) {
    acc.push(cur);
  }
  return acc;
}, []);
console.log(result); // [1, 2, 3, 4, 5]

上述代码中,我们首先创建一个空数组result,然后使用reduce方法遍历原数组arr。在reduce方法的回调函数中,我们使用includes方法检查当前元素cur是否已经存在于新数组acc中。如果不存在,则将该元素添加到新数组acc中。最后,我们将新数组acc返回,即为去重后的数组。最后输出result数组。

总结

在本文中,我们介绍了10种常见的JavaScript数组去重方法,分别是使用indexOf方法、使用includes方法、使用filter方法、使用for循环、使用Map对象、使用Set数据结构、使用for循环嵌套、使用Object键值对、使用reduce方法。这些方法各有优缺点,具体使用哪种方法取决于具体场景的需求和性能要求。

其中,使用Set数据结构、使用Map对象、使用for循环嵌套、使用Object键值对这四种方法在性能方面较为优秀,尤其是使用Set数据结构,它是ES6新增的一种数据结构,可以实现非常高效的数组去重。而使用indexOf方法、使用includes方法、使用filter方法这三种方法在性能方面相对较差,但它们的代码相对简单,可以用于处理小规模的数组。使用reduce方法则比较灵活,既可以用于处理小规模的数组,也

可以用于处理大规模的数组,但其性能相对较差。

在实际开发中,我们可以根据具体场景的需求和性能要求选择合适的数组去重方法。如果处理的数组规模较小,可以选择代码较简单的方法,如使用indexOf方法、使用includes方法、使用filter方法。如果处理的数组规模较大,可以选择性能较优的方法,如使用Set数据结构、使用Map对象、使用for循环嵌套、使用Object键值对。如果需要灵活处理数组元素,可以选择使用reduce方法。

除了上述介绍的方法,还有其他一些方法可以实现数组去重,例如使用ES6的Symbol类型、使用ES6的Proxy对象等。但这些方法较为复杂,且在实际开发中使用较少,因此本文不做详细介绍。

最后需要注意的是,虽然数组去重是一项常见的任务,但在实际开发中需要注意一些细节问题。例如,当数组中的元素是对象或数组时,需要对对象或数组进行深度比较;当数组中的元素是NaN时,需要使用特殊的方法进行去重;当数组中的元素是函数时,需要特殊处理等等。因此,在实际开发中需要根据具体情况进行处理,保证代码的正确性和健壮性。

栏目导航
相关文章
文章标签
关于我们
公司简介
企业文化
资质荣誉
服务项目
高端网站定制
微信小程序开发
SEO排名推广
新闻动态
行业新闻
技术学院
常见问题
联系我们
联系我们
人才招聘
联系方式
Q Q:24722
微信:24722
电话:13207941926
地址:江西省抚州市赣东大道融旺国际3栋
Copyright©2008-2022 抚州市奕玖科技有限公司 备案号:赣ICP备2022010182号-1