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 相关文章推荐
JQuery+JS实现仿百度搜索结果中关键字变色效果
Aug 02 Javascript
jQuery 过滤not()与filter()实例代码
May 10 Javascript
Javascript 颜色渐变效果的实现代码
Oct 01 Javascript
jQuery中index()的用法分析
Sep 05 Javascript
javascript实现连续赋值
Aug 10 Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
May 12 Javascript
JS实现页面数据无限加载
Sep 13 Javascript
javascript特殊文本输入框网页特效
Sep 13 Javascript
JQuery 选择器、DOM节点操作练习实例
Sep 28 jQuery
浅谈Angular 的变化检测的方法
Mar 01 Javascript
vue better scroll 无法滚动的解决方法
Jun 07 Javascript
VUE注册全局组件和局部组件过程解析
Oct 10 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
一个php导出oracle库的php代码
2009/04/20 PHP
PHPnow安装服务[apache_pn]失败的问题的解决方法
2010/09/10 PHP
php自定义session示例分享
2014/04/22 PHP
php往mysql中批量插入数据实例教程
2018/12/12 PHP
js 加载时自动调整图片大小
2008/05/28 Javascript
javascript Array数组对象的扩展函数代码
2010/05/22 Javascript
JQuery下的Live方法和$.browser方法使用代码
2010/06/02 Javascript
javascript使用中为什么10..toString()正常而10.toString()出错呢
2013/01/11 Javascript
jquery插件之定时查询待处理任务数量
2014/05/01 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
2016/12/21 Javascript
bootstrap laydate日期组件使用详解
2017/01/04 Javascript
微信小程序中form 表单提交和取值实例详解
2017/04/20 Javascript
angularjs+bootstrap实现自定义分页的实例代码
2017/06/19 Javascript
详解vue中使用express+fetch获取本地json文件
2017/10/10 Javascript
JavaScript常见JSON操作实例分析
2018/08/08 Javascript
JSON生成Form表单的方法示例
2018/11/21 Javascript
JavaScript实现网页动态生成表格
2020/11/25 Javascript
Python 创建子进程模块subprocess详解
2015/04/08 Python
Python 迭代器工具包【推荐】
2016/05/06 Python
python实现Windows电脑定时关机
2018/06/20 Python
[原创]Python入门教程1. 基本运算【四则运算、变量、math模块等】
2018/10/28 Python
使用SQLAlchemy操作数据库表过程解析
2020/06/10 Python
Pycharm调试程序技巧小结
2020/08/08 Python
英国最受欢迎的在线隐形眼镜商店:VisionDirect.co.uk
2018/12/06 全球购物
大学团支书的自我评价分享
2013/12/14 职场文书
会计专业毕业生自荐信范文
2013/12/20 职场文书
水果超市创业计划书
2014/01/27 职场文书
《燕子》教学反思
2014/02/18 职场文书
大学生毕业求职信
2014/06/12 职场文书
销售团队获奖感言
2014/08/14 职场文书
2014幼儿园教师师德师风演讲稿
2014/09/10 职场文书
学校开学标语
2014/10/06 职场文书
2014年电厂个人工作总结
2014/11/27 职场文书
2016寒假社会实践心得体会范文
2015/10/09 职场文书
只需要100行Python代码就可以实现的贪吃蛇小游戏
2021/05/27 Python
SQL实现LeetCode(196.删除重复邮箱)
2021/08/07 MySQL