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闭包 实例分析
Dec 25 Javascript
js jquery数组介绍
Jul 15 Javascript
Node.js与PHP、Python的字符处理性能对比
Jul 06 Javascript
使用Jquery实现每日签到功能
Apr 03 Javascript
javascript实现行拖动的方法
May 27 Javascript
jquery表单验证需要做些什么
Nov 17 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
几种响应式文字详解
May 19 Javascript
基于zepto.js实现登录界面
Oct 09 Javascript
Vue实现简单分页器
Dec 29 Javascript
js中对象和面向对象与Json介绍
Jan 21 Javascript
js回文数的4种判断方法示例
Jun 04 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 执行系统命令的方法
2009/07/07 PHP
PHP读取txt文件的内容并赋值给数组的代码
2011/11/03 PHP
php通过COM类调用组件的实现代码
2012/01/11 PHP
ThinkPHP3.2.2的插件控制器功能
2015/03/05 PHP
PHP网站建设的流程与步骤分享
2015/09/25 PHP
YII Framework框架教程之日志用法详解
2016/03/14 PHP
php reset() 函数指针指向数组中的第一个元素并输出实例代码
2016/11/21 PHP
Yii2实现跨mysql数据库关联查询排序功能代码
2017/02/10 PHP
PHP下载大文件失败并限制下载速度的实例代码
2019/05/10 PHP
IE8 兼容性问题(属性名区分大小写)
2009/06/04 Javascript
Jquery对select的增、删、改、查操作
2015/02/06 Javascript
JavaScript实现url参数转成json形式
2016/09/25 Javascript
最细致的vue.js基础语法 值得收藏!
2016/11/03 Javascript
微信小程序实现3D轮播图效果(非swiper组件)
2019/09/21 Javascript
[54:51]Ti4 冒泡赛第二轮LGD vs C9 3
2014/07/14 DOTA
详解python里使用正则表达式的分组命名方式
2017/10/24 Python
Python生成8位随机字符串的方法分析
2017/12/05 Python
python中redis查看剩余过期时间及用正则通配符批量删除key的方法
2018/07/30 Python
使用Python防止SQL注入攻击的实现示例
2020/05/21 Python
基于python实现MQTT发布订阅过程原理解析
2020/07/27 Python
Python实现扫码工具的示例代码
2020/10/09 Python
Pandas替换及部分替换(replace)实现流程详解
2020/10/12 Python
使用sublime text3搭建Python编辑环境的实现
2021/01/12 Python
python 批量将中文名转换为拼音
2021/02/07 Python
Fanatics法国官网:美国体育电商
2019/08/27 全球购物
酒店管理毕业生自荐信
2013/10/24 职场文书
专科文秘应届生求职信
2013/11/18 职场文书
计算机毕业大学生推荐信
2013/12/01 职场文书
求职面试个人自我评价
2014/02/28 职场文书
小学生综合素质评语
2014/04/23 职场文书
二年级学生评语大全
2014/04/23 职场文书
趣味运动会新闻稿
2015/07/17 职场文书
婚礼迎宾词大全
2015/08/10 职场文书
pytorch 如何使用float64训练
2021/05/24 Python
CSS实现切角+边框+投影+内容背景色渐变效果
2021/11/01 HTML / CSS
SQL Server #{}可以防止SQL注入
2022/05/11 SQL Server