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 相关文章推荐
模仿JQuery sortable效果 代码有错但值得看看
Nov 05 Javascript
封装的jquery翻页滚动(示例代码)
Nov 18 Javascript
JavaScript修改css样式style动态改变元素样式
Dec 16 Javascript
JavaScript中对象的不同创建方法
Aug 12 Javascript
9个让JavaScript调试更简单的Console命令
Nov 14 Javascript
详解如何使用vue-cli脚手架搭建Vue.js项目
May 19 Javascript
Vue2.0 http请求以及loading展示实例
Mar 06 Javascript
使用Vue.js开发微信小程序开源框架mpvue解析
Mar 20 Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
Apr 04 Javascript
vue 下列表侧滑操作实例代码详解
Jul 24 Javascript
js this 绑定机制深入详解
Apr 30 Javascript
js实现纯前端压缩图片
Nov 16 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学习之PHP运算符
2006/10/09 PHP
php实现把url转换迅雷thunder资源下载地址的方法
2014/11/07 PHP
phpstorm配置Xdebug进行调试PHP教程
2014/12/01 PHP
php blowfish加密解密算法
2016/07/02 PHP
php连接mysql数据库最简单的实现方法
2019/09/24 PHP
JavaScript 拖拉缩放效果
2008/12/10 Javascript
js 利用className得到对象的实现代码
2011/11/15 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
2014/08/15 Javascript
JavaScript简介
2015/02/15 Javascript
一文快速了解JQuery中的AJAX
2019/05/31 jQuery
javascript实现简易聊天室
2019/07/12 Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
2019/09/21 Javascript
五句话帮你轻松搞定js原型链
2020/12/09 Javascript
[01:53]3.19 DOTA2发布会 现场精彩Coser表演
2014/03/25 DOTA
使用numba对Python运算加速的方法
2018/10/15 Python
Python 通过requests实现腾讯新闻抓取爬虫的方法
2019/02/22 Python
numpy数组之存取文件的实现示例
2019/05/24 Python
Falsk 与 Django 过滤器的使用与区别详解
2019/06/04 Python
python向图片里添加文字
2019/11/26 Python
python 实现单通道转3通道
2019/12/03 Python
浅谈在django中使用redirect重定向数据传输的问题
2020/03/13 Python
详解用Pytest+Allure生成漂亮的HTML图形化测试报告
2020/03/31 Python
Python request post上传文件常见要点
2020/11/20 Python
雅诗兰黛澳大利亚官网:Estée Lauder澳大利亚
2019/05/31 全球购物
CK巴西官方网站:Calvin Klein巴西
2019/07/19 全球购物
网络工程与软件技术毕业生自荐信
2013/09/24 职场文书
小学生节约用水倡议书
2014/05/15 职场文书
专科应届毕业生求职信
2014/06/04 职场文书
高考学习决心书
2015/02/04 职场文书
小学生教师节广播稿
2015/08/19 职场文书
消防安全培训工作总结
2015/10/23 职场文书
2016年“5.12”护士节慰问信
2015/11/30 职场文书
温馨祝福晨语:美丽的一天从我的问候开始
2019/11/28 职场文书
导游词之西安骊山
2019/12/20 职场文书
Python中os模块的简单使用及重命名操作
2021/04/17 Python
Nginx如何获取自定义请求header头和URL参数详解
2022/07/23 Servers