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通过控制节点实现仅在前台通过get方法完成参数传递
Feb 02 Javascript
13个PHP函数超实用
Oct 21 Javascript
JavaScript的MVVM库Vue.js入门学习笔记
May 03 Javascript
Laravel中常见的错误与解决方法小结
Aug 30 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
Jul 03 Javascript
老生常谈js数据类型
Aug 03 Javascript
vue使用jsonp抓取qq音乐数据的方法
Jun 21 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
Sep 15 Javascript
js中this的指向问题归纳总结
Nov 28 Javascript
js 实现ajax发送步骤过程详解
Jul 25 Javascript
JS面向对象编程实现的Tab选项卡案例详解
Mar 03 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
Feb 05 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制作简单的内容采集器的代码
2007/11/28 PHP
php.ini中的php-5.2.0配置指令详解
2008/03/27 PHP
ubuntu10.04配置 nginx+php-fpm模式的详解
2013/06/03 PHP
PHP 如何利用phpexcel导入数据库
2013/08/24 PHP
PHP函数addslashes和mysql_real_escape_string的区别
2014/04/22 PHP
PHP获取短链接跳转后的真实地址和响应头信息的方法
2014/07/25 PHP
js中查找最近的共有祖先元素的实现代码
2010/12/30 Javascript
css值转换成数值请抛弃parseInt
2011/10/24 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
2015/04/24 Javascript
在JavaScript的AngularJS库中进行单元测试的方法
2015/06/23 Javascript
javascript实现九宫格相加数值相等
2020/05/28 Javascript
webpack+vue中使用别名路径引用静态图片地址
2017/11/20 Javascript
基于vue-resource jsonp跨域问题的解决方法
2018/02/03 Javascript
layui数据表格跨行自动合并的例子
2019/09/02 Javascript
vue实现Input输入框模糊查询方法
2021/01/29 Javascript
JavaScript canvas绘制圆弧与圆形
2020/02/18 Javascript
python base64 decode incorrect padding错误解决方法
2015/01/08 Python
用实例详解Python中的Django框架中prefetch_related()函数对数据库查询的优化
2015/04/01 Python
在cmder下安装ipython以及环境的搭建
2018/10/19 Python
python实现趣味图片字符化
2019/04/30 Python
如何使用python操作vmware
2019/07/27 Python
利用Python绘制Jazz网络图的例子
2019/11/21 Python
使用Puppeteer爬取微信文章的实现
2020/02/11 Python
Python 实现RSA加解密文本文件
2020/12/30 Python
CSS3实现时间轴特效
2020/11/02 HTML / CSS
CSS3 实现图形下落动画效果
2020/11/13 HTML / CSS
Maje德国官网:法国女性成衣品牌
2017/02/10 全球购物
美国真皮手袋品牌:GiGi New York
2017/03/10 全球购物
IRO美国官网:法国服装品牌
2018/03/06 全球购物
Microsoft Advertising美国:微软搜索广告
2019/05/01 全球购物
联想智利官方网站:Lenovo Chile
2020/06/03 全球购物
导游的职业规划书范文
2013/12/27 职场文书
九年级历史教学反思
2014/01/27 职场文书
公司任命书模板
2014/06/06 职场文书
党员对十八届四中全会的期盼思想汇报范文
2014/10/17 职场文书
中秋节寄语2015
2015/03/24 职场文书