JavaScript中数组去重的5种方法


Posted in Javascript onJuly 04, 2020

正常情况下,数据去重的工作一般都是由后端同事来完成的,但是前端也要掌握好处理数据的能力,万一去重的工作交给我们大前端处理,我们也不能怂呀。现在我总结了一些去重的方法,希望对大家有点帮助。

方法一:new Set()实现数组去重

ES6 提供了新的数据结构 Set,它类似于数组,但是成员的值都是唯一的,没有重复的值。 Set 本身是一个构造函数,用来生成 Set 数据结构。Set函数可以接受一个数组,用于初始化。根据 Set的数据特性,我们可以实现数组去重。

let list = [1, 1, 'a', 'a', true, true, false, false, null, '', null, '', undefined, undefined];
let list1 = Array.from(new Set(list)); // [ 1, "a", true, false, null, "", undefined ]
let list2 = [...new Set(list)]; // [ 1, "a", true, false, null, "", undefined ]

方法二:some()+循环去重

some() 方法用于检测数组中的元素是否满足指定条件(函数提供) 。 如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。 如果没有满足条件的元素,则返回false。 我们可以定义一个新数组来承接没有重复的数据,遍历原始数组的时候,用新数组来判断数据是否已经出现过。

function distinct(list) {
   let result = [list[0]];// 用于承接没有重复的数据,初始时将原始数组的第一个值赋给它。
   for (let i = 1; i < list.length; i++) {
     // 判断结果数组中是否存在一样的值,若果没有的话则将数据存入结果数组中。
     if (!(result.some(val => list[i] === val))) {
       result.push(list[i]);
     }
   }
   return result;
 }
let arr = [1, 1, 'a', 'a', true, true, false, false, null, '', null, '', undefined, undefined];
distinct(arr); // [ 1, "a", true, false, null, "", undefined ]

方法三:双重for循环去重

双重for循环,第一层循环确保数组中的每一项都能被比较,第二层循环确保被比较项后的每一项都能跟被比较项比较。

function distinct2(list) {
  for (let i = 0; i < list.length; i++) {
    for (let j = i + 1; j < list.length; j++) {
      // 后面数据的若跟前一项数据相同,则重复,需要去除。
      if (list[i] === list[j]) {
        list.splice(j, 1); // 去除后面的相同项
        j--;
      }
    }
  }
  return list;
}
let arr = [1, 1, 'a', 'a', true, true, false, false, null, '', null, '', undefined, undefined];
distinct2(arr); // [ 1, "a", true, false, null, "", undefined ]

方法四:hasOwnProperty()方法去重

hasOwnProperty() 方法用来检测一个属性是否是对象的自有属性,而不是从原型链继承的。如果该属性是自有属性,那么返回 true,否则返回 false。

function unique(arr) {
 var obj = {}; // 用来记录数组中的数据
 return arr.filter(function(item, index, arr){
   // 如果记录对象中存在某个数据,则返回false过滤掉;否则obj进行记录并筛选出来
   return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
 })
}
let arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
unique(arr) // [ 1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, 'a', {}]

方法五:利用filter()+indexOf()方法去重

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。

function unique(arr) {
 return arr.filter(function(item, index, arr) {
  // 从数组0位开始查,如果当前元素在原始数组中的第一个索引==当前索引值,说明它是第一次出现。
  return arr.indexOf(item, 0) === index;
 });
}
let list = [1, 1, 'a', 'a', true, true, false, false, null, '', null, '', undefined, undefined];
unique(list); // [ 1, "a", true, false, null, "", undefined ]

此外,数组去重还可以利用filter()、includes()等方法实现,但是思路都跟上面几种方法类似,这里就不一一列举了。

以上就是JavaScript中数组去重的5种方法的详细内容,更多关于JavaScript中数组去重的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
收集的网上用的ajax之chat.js文件
Apr 08 Javascript
在多个页面使用同一个HTML片段的代码
Mar 04 Javascript
JavaScript 里的类数组对象
Apr 08 Javascript
jQuery图片渐变特效的简单实现
Jun 25 Javascript
关于原生js中bind函数的简单实现
Aug 10 Javascript
jQuery中页面返回顶部的方法总结
Dec 30 Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
Dec 27 Javascript
使用classList来实现两个按钮样式的切换方法
Jan 24 Javascript
vue webpack实用技巧总结
Apr 24 Javascript
详解Angularjs 自定义指令中的数据绑定
Jul 19 Javascript
详解ES6系列之私有变量的实现
Nov 21 Javascript
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
JS制作简易计算器的实例代码
Jul 04 #Javascript
基于原生js实现九宫格算法代码实例
Jul 03 #Javascript
JavaScript DOM常用操作代码汇总
Jul 03 #Javascript
JavaScript缺少insertAfter解决方案
Jul 03 #Javascript
原生javascript如何实现共享onload事件
Jul 03 #Javascript
Vue如何实现监听组件原生事件
Jul 03 #Javascript
如何在node环境实现“get数据解析”代码实例
Jul 03 #Javascript
You might like
php REMOTE_ADDR之获取访客IP的代码
2008/04/22 PHP
php设计模式 Chain Of Responsibility (职责链模式)
2011/06/26 PHP
解析如何用php screw加密php源代码
2013/06/20 PHP
PHP判断表单复选框选中状态完整例子
2014/06/24 PHP
PHP命名空间和自动加载类
2016/04/03 PHP
php 使用html5 XHR2实现上传文件与进度显示功能示例
2020/03/03 PHP
Javascript模块化编程(一)模块的写法最佳实践
2013/01/17 Javascript
js触发asp.net的Button的Onclick事件应用
2013/02/02 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
2015/10/27 Javascript
理解AngularJs指令
2015/12/10 Javascript
AngularJS 作用域详解及示例代码
2016/08/17 Javascript
Node.js编写CLI的实例详解
2017/05/17 Javascript
angularjs实现搜索的关键字在正文中高亮出来
2017/06/13 Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
2018/09/10 Javascript
使用canvas实现一个vue弹幕组件功能
2018/11/30 Javascript
Vue中util的工具函数实例详解
2019/07/08 Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
2019/09/03 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
2020/03/07 Javascript
Node.js API详解之 util模块用法实例分析
2020/05/09 Javascript
Element Tooltip 文字提示的使用示例
2020/07/26 Javascript
[53:10]Secret vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[03:33]TI9战队采访 - Infamous
2019/08/20 DOTA
python和shell变量互相传递的几种方法
2013/11/20 Python
基于python3 类的属性、方法、封装、继承实例讲解
2017/09/19 Python
python和c语言的主要区别总结
2019/07/07 Python
基于python3 pyQt5 QtDesignner实现窗口化猜数字游戏功能
2019/07/15 Python
Python内置数据类型list各方法的性能测试过程解析
2020/01/07 Python
Python调用Windows命令打印文件
2020/02/07 Python
英国评分最高的女性剃须刀订阅盒:FFS Beauty
2018/01/25 全球购物
英国可持续奢侈品包包品牌:Elvis & Kresse
2018/08/05 全球购物
C#软件工程师英语面试题
2015/06/07 面试题
保险公司晨会主持词
2014/03/22 职场文书
小学生推普周国旗下讲话稿
2014/09/21 职场文书
2014年项目工作总结
2014/11/24 职场文书
MySQL系列之十四 MySQL的高可用实现
2021/07/02 MySQL
ant design charts 获取后端接口数据展示
2022/05/25 Javascript