JavaScript常用8种数组去重代码实例


Posted in Javascript onSeptember 09, 2020

在我们学习和使用JavaScript的中,会经常使用到数组的去重,接下来的内容,来给大家分享一下,我们在开发过程中,常用到的数组去重方法,这些方法都是有在实战中真实实践过的,非常值得大家学习和收藏,我们一起来看看都有哪些方法吧!

1.利用对象的属性

使用对象属性不重名的特性。

var arr = ['qiang','ming','tao','li','liang','you','qiang','tao'];
console.time("nonredundant1");
var nonredundant1 = Object.getOwnPropertyNames(arr.reduce(function(seed, item, index) {
  seed[item] = index;
  return seed;
},{}));
console.timeEnd("nonredundant1");
console.log(nonredundant1);

结果如下:

JavaScript常用8种数组去重代码实例

2. 使用Set数据结构

set是一种类似数组的结构,但是set成员中没有重复的值。set()函数可以接受一个数组或者类数组的参数,生成一个set对象。而Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object和可遍历iterable)的对象包括 ES6 新增的数据结构 Set 和 Map)。

var arr = ['qiang','ming','tao','li','liang','you','qiang','tao'];
function unique (arr) {
  return Array.from(new Set(arr))
}
console.time("nonredundant2");
var nonredundant2 = unique(arr);
console.timeEnd("nonredundant2");
console.log(nonredundant2);

结果如下:

JavaScript常用8种数组去重代码实例

3. 使用for循环和splice

function unique(arr) {
  for (var i = 0; i < arr.length; i++) {
    for (var j = i + 1; j < arr.length; j++) {
      if (arr[i] == arr[j]) {     //第一个等同于第二个,splice方法删除第二个
        arr.splice(j, 1);
        j--;
      }
    }
  }
  return arr;
}
console.time("nonredundant3");
var arr = ['qiang', 'ming', 'tao', 'li', 'liang', 'you', 'qiang', 'tao'];
var nonredundant3 = unique(arr);
console.timeEnd("nonredundant3");
console.log(nonredundant3);

结果如下:

JavaScript常用8种数组去重代码实例

4.使用indexOf判断去重

function unique(arr) {
  var array = [];
  for (var i = 0; i < arr.length; i++) {
    if (array .indexOf(arr[i]) === -1) {
      array .push(arr[i])
    }
  }
  return array;
}
var arr = ['qiang', 'ming', 'tao', 'li', 'liang', 'you', 'qiang', 'tao'];
console.time("nonredundant4");
var nonredundant4 = unique(arr);
console.timeEnd("nonredundant4");
console.log(nonredundant4);

结果如下:

JavaScript常用8种数组去重代码实例

5.使用sort排序去重

function unique(arr) {
  arr = arr.sort()
  var arrry = [arr[0]];
  for (var i = 1; i < arr.length; i++) {
    if (arr[i] !== arr[i - 1]) {
      arrry.push(arr[i]);
    }
  }
  return arrry;
}

var arr = ['qiang', 'ming', 'tao', 'li', 'liang', 'you', 'qiang', 'tao'];
console.time("nonredundant5");
var nonredundant5 = unique(arr);
console.timeEnd("nonredundant5");

结果如下:

JavaScript常用8种数组去重代码实例

6.使用filter

function unique(arr) {
  var obj = {};
  return arr.filter(function(item, index, arr){
    return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
  })
}
var arr = ['qiang', 'ming', 'tao', 'li', 'liang', 'you', 'qiang', 'tao'];
console.time("nonredundant6");
var nonredundant6 = unique(arr);
console.timeEnd("nonredundant6");
console.log(nonredundant6);

结果如下:

JavaScript常用8种数组去重代码实例

7.使用Map数据结构去重

function unique(arr) {
  let map = new Map();
  let array = new Array(); // 数组用于返回结果
  for (let i = 0; i < arr.length; i++) {
    if (map.has(arr[i])) { // 如果有该key值
      map.set(arr[i], true);
    } else {
      map.set(arr[i], false);  // 如果没有该key值
      array.push(arr[i]);
    }
  }
  return array;
}

var arr = ['qiang', 'ming', 'tao', 'li', 'liang', 'you', 'qiang', 'tao'];
console.time("nonredundant7");
var nonredundant7 = unique(arr);
console.timeEnd("nonredundant7");
console.log(nonredundant7);

结果如下:

JavaScript常用8种数组去重代码实例

8.使用reduce和include去重

function unique(arr){
  return arr.reduce((prev,cur) => prev.includes(cur) ? prev : [...prev,cur],[]);
}
var arr = ['qiang', 'ming', 'tao', 'li', 'liang', 'you', 'qiang', 'tao'];
console.time("nonredundant8");
var nonredundant8 = unique(arr);
console.timeEnd("nonredundant8");
console.log(nonredundant8);

结果如下:

JavaScript常用8种数组去重代码实例

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
May 07 Javascript
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
May 13 Javascript
JavaScript模块随意拖动示例代码
May 27 Javascript
jQuery控制网页打印指定区域的方法
Apr 07 Javascript
使用vue.js实现联动效果的示例代码
Jan 10 Javascript
easyui-edatagrid.js实现回车键结束编辑功能的实例
Apr 12 Javascript
JS简单实现数组去重的方法分析
Oct 14 Javascript
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
Feb 10 Javascript
vue富文本编辑器组件vue-quill-edit使用教程
Sep 21 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
Sep 27 Javascript
在vue中使用echarts(折线图的demo,markline用法)
Jul 20 Javascript
vue封装数字翻牌器
Apr 20 Vue.js
Vue项目配置跨域访问和代理proxy设置方式
Sep 08 #Javascript
如何使用jQuery操作Cookies方法解析
Sep 08 #jQuery
js实现右键弹出自定义菜单
Sep 08 #Javascript
vue 使用原生组件上传图片的实例
Sep 08 #Javascript
使用js和canvas实现时钟效果
Sep 08 #Javascript
javascript使用canvas实现饼状图效果
Sep 08 #Javascript
vue配置多代理服务接口地址操作
Sep 08 #Javascript
You might like
咖啡店都有些什么常规豆子呢?有什么风味在里面
2021/03/04 咖啡文化
解析在PHP中使用全局变量的几种方法
2013/06/24 PHP
PHP实现的简单适配器模式示例
2017/06/22 PHP
php实现的redis缓存类定义与使用方法示例
2017/08/09 PHP
php PDO属性设置与操作方法分析
2018/12/27 PHP
laravel接管Dingo-api和默认的错误处理方式
2019/10/25 PHP
TP3.2.3框架文件上传操作实例详解
2020/01/23 PHP
Extjs入门之动态加载树代码
2010/04/09 Javascript
用jQuery模拟select下拉框的简单示例代码
2014/01/26 Javascript
jquery中EasyUI使用技巧小结
2015/02/10 Javascript
javascript实现瀑布流加载图片原理
2016/02/02 Javascript
nodejs实现发出蜂鸣声音(系统报警声)的方法
2017/01/18 NodeJs
JS得到当前时间的方法示例
2017/03/24 Javascript
浅谈angularjs依赖服务注入写法的注意点
2017/04/24 Javascript
详解nodejs通过响应回写的方式渲染页面资源
2018/04/07 NodeJs
nodejs用gulp管理前端文件方法
2018/06/24 NodeJs
详解bootstrap-fileinput文件上传控件的亲身实践
2019/03/21 Javascript
javascript数据类型中的一些小知识点(推荐)
2019/04/18 Javascript
Typescript 中的 interface 和 type 到底有什么区别详解
2019/06/18 Javascript
layui table单元格事件修改值的方法
2019/09/24 Javascript
原生js实现滑块区间组件
2021/01/20 Javascript
[00:55]2015国际邀请赛中国区预选赛5月23日——28日约战上海
2015/05/25 DOTA
[00:32]2018DOTA2亚洲邀请赛出场——LGD
2018/04/04 DOTA
在python的WEB框架Flask中使用多个配置文件的解决方法
2014/04/18 Python
Python的设计模式编程入门指南
2015/04/02 Python
python转换字符串为摩尔斯电码的方法
2015/07/06 Python
python实现读取并显示图片的两种方法
2017/01/13 Python
Python使用pdb调试代码的技巧
2020/05/03 Python
GLAMGLOW香港官网:明星出镜前的秘密武器
2017/03/16 全球购物
Agoda香港:全球特价酒店预订
2017/05/07 全球购物
大学生社会实践自我鉴定
2014/03/24 职场文书
岗位聘任书范文
2014/03/29 职场文书
电子商务优秀毕业生求职信
2014/07/11 职场文书
党的群众路线教育实践活动个人批评与自我批评
2014/10/16 职场文书
新教师教学工作总结
2015/08/12 职场文书
详解JS数组方法
2021/11/20 Javascript