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 相关文章推荐
getJSON调用后台json数据时函数被调用两次的原因猜想
Sep 29 Javascript
JavaScript中的object转换函数toString()与valueOf()介绍
Dec 31 Javascript
限制复选框最多选择项的实现代码
May 30 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
Oct 24 Javascript
bootstrap datetimepicker2.3.11时间插件使用
Nov 19 Javascript
jQuery解析返回的xml和json方法详解
Jan 05 Javascript
jQuery图片切换动画效果
Feb 28 Javascript
vue resource post请求时遇到的坑
Oct 19 Javascript
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
Sep 25 Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
Feb 28 Javascript
JS实现可控制的进度条
Mar 25 Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
Jun 05 Javascript
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
php循环语句 for()与foreach()用法区别介绍
2012/09/05 PHP
基于ThinkPHP5框架使用QueryList爬取并存入mysql数据库操作示例
2019/05/25 PHP
php自动加载代码实例详解
2021/02/26 PHP
javascript attachEvent绑定多个事件执行顺序问题
2010/10/20 Javascript
javascript笔记 String类replace函数的一些事
2011/09/22 Javascript
简单实用jquery版三级联动select示例
2013/07/04 Javascript
js导入导出excel(实例代码)
2013/11/25 Javascript
鼠标经过tr时,改变tr当前背景颜色
2014/01/13 Javascript
cookie的secure属性详解
2015/04/08 Javascript
jQuery控制Div拖拽效果完整实例分析
2015/04/15 Javascript
jQuery自定义数值抽奖活动代码
2016/06/11 Javascript
在javaScript中检测数据类型的几种方式小结
2017/03/04 Javascript
分享十三个最佳JavaScript数据网格库
2017/04/07 Javascript
NodeJS简单实现WebSocket功能示例
2018/02/10 NodeJs
小程序ios音频播放没声音问题的解决
2018/07/11 Javascript
JavaScript Array对象基本方法详解
2019/09/03 Javascript
vue 微信扫码登录(自定义样式)
2020/01/06 Javascript
JS JQuery获取data-*属性值方法解析
2020/09/01 jQuery
JavaScript常用8种数组去重代码实例
2020/09/09 Javascript
python和pyqt实现360的CLable控件
2014/02/21 Python
python实现得到一个给定类的虚函数
2014/09/28 Python
Python求导数的方法
2015/05/09 Python
Python多进程机制实例详解
2015/07/02 Python
世界上最大的在线旅行社新加坡网站:Expedia新加坡
2016/08/25 全球购物
医学检验专业个人求职信范文
2013/12/04 职场文书
新闻编辑求职信
2014/07/13 职场文书
党旗在我心中演讲稿
2014/09/15 职场文书
拆迁委托协议书
2014/09/15 职场文书
2014年家长学校工作总结
2014/11/20 职场文书
小学教师个人工作总结2015
2015/04/20 职场文书
军训通讯稿范文
2015/07/18 职场文书
2015年数学教研工作总结
2015/07/22 职场文书
2016暑期校本培训心得体会
2016/01/08 职场文书
新西兰:最新留学学习计划书写作指南
2019/07/15 职场文书
Node与Python 双向通信的实现代码
2021/07/16 Javascript