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 相关文章推荐
javascript import css实例代码
Jul 18 Javascript
动态刷新 dorado树的js代码
Jun 12 Javascript
Node.js入门教程:在windows和Linux上安装配置Node.js图文教程
Aug 14 Javascript
JavaScript中的style.cssText使用教程
Nov 06 Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
Apr 27 Javascript
JS实现的自定义网页拖动类
Nov 06 Javascript
jQuery过滤特殊字符及JS字符串转为数字
May 26 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
Sep 20 Javascript
微信小程序开发(二)图片上传+服务端接收详解
Jan 11 Javascript
pm2启动ssr失败的解决方法
Jun 29 Javascript
微信小程序 button样式设置为图片的方法
Jun 19 Javascript
vue+canvas实现拼图小游戏
Sep 18 Javascript
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
动态生成gif格式的图像要注意?
2006/10/09 PHP
php_xmlhttp 乱码问题解决方法
2009/08/07 PHP
php 强制下载文件实现代码
2013/10/28 PHP
Zend Framework教程之视图组件Zend_View用法详解
2016/03/05 PHP
PHP7扩展开发教程之Hello World实现方法示例
2017/08/03 PHP
PHP htmlspecialchars() 函数实例代码及用法大全
2018/09/18 PHP
msn上的tab功能Firefox对childNodes处理的一个BUG
2008/01/21 Javascript
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
2011/07/04 Javascript
JavaScript实现基于Cookie的存储类实例
2015/04/10 Javascript
AngularJS下对数组的对比分析
2016/08/24 Javascript
微信公众号 摇一摇周边功能开发
2016/12/08 Javascript
Vue 实用分页paging实例代码
2017/04/12 Javascript
微信小程序中页面FOR循环和嵌套循环
2017/06/21 Javascript
JS实现的全排列组合算法示例
2017/10/09 Javascript
Vue底层实现原理总结
2018/02/17 Javascript
编写React组件项目实践分析
2018/03/04 Javascript
js中如何完美的解析数据
2018/03/18 Javascript
vue中Axios的封装与API接口的管理详解
2018/08/09 Javascript
Vue项目pdf(base64)转图片遇到的问题及解决方法
2018/10/19 Javascript
[05:49]2014DOTA2TI4正赛第二日综述 昔日冠军纷纷落马 VG LGD占尽先机
2014/07/20 DOTA
[52:12]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
python使用arp欺骗伪造网关的方法
2015/04/24 Python
Python中的日期时间处理详解
2016/11/17 Python
对python使用http、https代理的实例讲解
2018/05/07 Python
python利用百度AI实现文字识别功能
2018/11/27 Python
Python+selenium点击网页上指定坐标的实例
2019/07/05 Python
浅析Python 简单工厂模式和工厂方法模式的优缺点
2020/07/13 Python
通过代码实例解析Pytest运行流程
2020/08/20 Python
Html5移动端弹幕动画实现示例代码
2018/08/27 HTML / CSS
Myprotein西班牙官网:欧洲第一大运动营养品牌
2020/02/24 全球购物
酒店办公室文员岗位职责
2013/12/18 职场文书
大学生实习证明范本
2014/01/15 职场文书
大学生军训自我鉴定范文
2014/09/18 职场文书
法定代表人授权委托书范文
2014/09/22 职场文书
领导班子个人查摆问题对照检查材料
2014/10/02 职场文书
司机岗位职责
2015/02/04 职场文书