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

 更新时间:2017年05月23日 14:25:51   作者:Lee_tanghui  
本篇文章主要介绍了详解JavaScript数组过滤相同元素的5种方法,详细的介绍了5种实用方法,非常具有实用价值,需要的朋友可以参考下

方法一:比较内层循环变量的值.

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);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 鼠标拖动改变DIV等网页元素的大小的实现方法

    鼠标拖动改变DIV等网页元素的大小的实现方法

    下面小编就为大家带来一篇鼠标拖动改变DIV等网页元素的大小的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • css如何让浮动元素水平居中

    css如何让浮动元素水平居中

    css中对于定宽的非浮动元素用margin:0 auto进行水平居中,对于不定宽的浮动元素也有一个常用技巧,这篇文章就给大家介绍下css如何让浮动元素水平居中,需要的朋友可以来学习下
    2015-08-08
  • js中textContent、innerText和innerHTML的用法以及区别

    js中textContent、innerText和innerHTML的用法以及区别

    这篇文章主要介绍了JavaScript中textContent、innerText和innerHTML的用法以及区别,需要的朋友可以参考下
    2023-05-05
  • Display SQL Server Login Mode

    Display SQL Server Login Mode

    Display SQL Server Login Mode...
    2007-06-06
  • 微信小程序scroll-view点击项自动居中效果的实现

    微信小程序scroll-view点击项自动居中效果的实现

    这篇文章主要介绍了微信小程序scroll-view点击项自动居中效果的实现代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-03-03
  • javascript原型链学习记录之继承实现方式分析

    javascript原型链学习记录之继承实现方式分析

    这篇文章主要介绍了javascript原型链学习记录之继承实现方式,结合实例形式分析了javascript使用原型链实现继承的相关操作技巧与注意事项,需要的朋友可以参考下
    2019-05-05
  • JS封装的模仿qq右下角消息弹窗功能示例

    JS封装的模仿qq右下角消息弹窗功能示例

    这篇文章主要介绍了JS封装的模仿qq右下角消息弹窗功能,涉及javascript事件响应、页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
    2018-08-08
  • JavaScript iframe数据共享接口实现方法

    JavaScript iframe数据共享接口实现方法

    在iframe与父窗口或者与子窗口传递数据是一个麻烦的事情,如果我们能够写一个一劳永逸的接口那就再方便不过了,下面就来简答介绍一下如何实现此功能,对js iframe相关知识感兴趣的朋友一起学习吧
    2016-01-01
  • JavaScript中if嵌套assert的方法详解

    JavaScript中if嵌套assert的方法详解

    在JavaScript中,通常我们不会直接使用`assert`这个词,因为JavaScript标准库中并没有直接提供`assert`函数,下面是一个详细的示例,展示如何在JavaScript中模拟`assert`函数,并在`if`语句中嵌套使用它来检查条件,需要的朋友可以参考下
    2024-09-09
  • Webpack中loader打包各种文件的方法实例

    Webpack中loader打包各种文件的方法实例

    这篇文章主要给大家介绍了关于Webpack中loader打包各种文件的相关资料,其中包括处理css文件、less文件、scss文件、url地址以及ES6高级语法的方法,需要的朋友可以参考下
    2019-09-09

最新评论