详解JavaScript数组过滤相同元素的5种方法

作者:闭包旅人

时间:2026-10-23

浏览:313

本文详细解析了JavaScript中去除数组重复元素的五种常见方法。通过内层循环比较、计数法、标志位法、排序后比较以及filter结合indexOf等方式,展示了不同场景下的去重实现。每种方法均附带代码示例与逻辑说明,帮助开发者根据性能需求和代码简洁性选择合适方案。

文章目录

JavaScript数组去重的五种实现方案

第一种方法是通过内层循环直接比较变量的值来实现去重。


var arr = [1, 2, 3, 1, 3, 4, 5, 5];
var resultArr = [];
for (i = 0; i < arr.length; i++) {
  for (j = 0; j < resultArr.length; j++) {
    if (resultArr[j] == arr[i]) {
      break;
    }
  }
  if (j == resultArr.length) {
    resultArr[resultArr.length] = arr[i];
  }
}
console.log(resultArr); //1,2,3,4,5

第二种方法采用计数策略进行判断。


var arr = [1, 2, 3, 1, 3, 4, 5, 5];
var count;
var resultArr = [];
for (i = 0; i < arr.length; i++) {
  count = 0;
  for (j = 0; j < resultArr.length; j++) {
    if (resultArr[j] == arr[i]) {
      count++;
      break;
    }
  }
  if (count == 0) {
    resultArr[resultArr.length] = arr[i];
  }
}
console.log(resultArr); //1,2,3,4,5

第三种方法引入flag标志位,也可称为假设成立法。


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

第四种方法先对数组进行sort()排序,随后比较相邻元素。


var arr = [1, 2, 3, 1, 2, 3, 4, 5, 5];
var resultArr = [];
arr.sort(function (a, b) {
  return a - b;
});
//这个时候arr变成了[1, 1, 2, 2, 3, 3, 4, 5, 5]
for (i = 0; i < arr.length; i++) {
  if (arr[i] != arr[i + 1]) {
    resultArr[resultArr.length] = arr[i];
  }
}
console.log(resultArr);

第五种方法利用filter()函数筛选出非重复的数组元素。


var arr = [1, 2, 3, 1, 2, 3, 4, 5, 5];
var resultArr;
resultArr = arr.filter(function (item, index, self) {
  return self.indexOf(item) == index;

});
console.log(resultArr);

以上内容为本文的全部讲解,旨在为读者的学习提供参考,同时也感谢大家的支持。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章