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 相关文章推荐
实现png图片和png背景透明(支持多浏览器)的方法
Sep 08 Javascript
jQuery中阻止冒泡事件的方法介绍
Apr 12 Javascript
基于JQuery打造无缝滚动新闻步骤详解
Mar 31 Javascript
DIV+CSS+jQ实现省市联动可扩展
Jun 22 Javascript
Vue.js中组件中的slot实例详解
Jul 17 Javascript
20170918 前端开发周报之JS前端开发必看
Sep 18 Javascript
JavaScript 数组的进化与性能分析
Sep 18 Javascript
JavaScript数组push方法使用注意事项
Oct 30 Javascript
详解RequireJs官方使用教程
Oct 31 Javascript
JS实现获取进今年第几天是周几的方法分析
Jun 27 Javascript
javscript 数组扁平化的实现
Feb 03 Javascript
weui上传多图片,压缩,base64编码的示例代码
Jun 22 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
ThinkPHP模板IF标签用法详解
2014/07/01 PHP
php实现每天自动变换随机问候语的方法
2015/05/12 PHP
PHP中使用GD库绘制折线图 折线统计图的绘制方法
2015/11/09 PHP
thinkphp配置文件路径的实现方法
2016/08/30 PHP
php解析mht文件转换成html的实例
2017/03/13 PHP
php下载远程大文件(获取远程文件大小)的实例
2017/06/17 PHP
thinkPHP框架通过Redis实现增删改查操作的方法详解
2019/05/13 PHP
laravel5表单唯一验证的实例代码
2019/09/30 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
PhpStorm 2020.3:新增开箱即用的PHP 8属性(推荐)
2020/10/30 PHP
(function($){...})(jQuery)的意思
2010/07/22 Javascript
javascript innerHTML使用分析
2010/12/03 Javascript
js使用eval解析json(js中使用json)
2014/01/17 Javascript
js获取及判断键盘按键的方法
2015/12/01 Javascript
jquery zTree异步加载、模糊搜索简单实例分享
2016/03/24 Javascript
详解在 Angular 项目中添加 clean-blog 模板
2017/07/04 Javascript
JavaScript中三个等号和两个等号你了解多少
2017/07/04 Javascript
快速解决vue在ios端下点击响应延时的问题
2018/08/27 Javascript
解决Angular2 router.navigate刷新页面的问题
2018/08/31 Javascript
javascript实现下拉菜单效果
2021/02/09 Javascript
python实现在目录中查找指定文件的方法
2014/11/11 Python
python+selenium开发环境搭建图文教程
2017/08/11 Python
uwsgi+nginx部署Django项目操作示例
2018/12/04 Python
python Dijkstra算法实现最短路径问题的方法
2019/09/19 Python
Python ArgumentParse的subparser用法说明
2020/04/20 Python
python能自学吗
2020/06/18 Python
python处理写入数据代码讲解
2020/10/22 Python
REISS英国官网:伦敦High Street最受欢迎品牌
2016/12/21 全球购物
兰芝美国网上商城:购买LANEIGE睡眠面膜等
2017/06/30 全球购物
垃圾回收的优点和原理
2014/05/16 面试题
高中毕业自我鉴定范文
2013/10/02 职场文书
教师专业理论水平的自我评价分享
2013/11/09 职场文书
小人国观后感
2015/06/11 职场文书
2016元旦文艺汇演主持词(开场白+结束语)
2015/12/03 职场文书
SpringBoot+Redis实现布隆过滤器的示例代码
2022/03/17 Java/Android
win10搭建配置ftp服务器的方法
2022/08/05 Servers