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 相关文章推荐
用js生产批量批处理执行命令
Jul 28 Javascript
JQuery验证jsp页面属性是否为空(实例代码)
Nov 08 Javascript
js中函数调用的两种常用方法使用介绍
Jul 17 Javascript
使用jquery 简单实现下拉菜单
Jan 14 Javascript
JavaScript对Cookie进行读写操作实例
Jul 25 Javascript
javascript实现信息增删改查的方法
Jul 25 Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
Nov 29 Javascript
ES6中Math对象新增的方法实例详解
Apr 25 Javascript
Vue-router 中hash模式和history模式的区别
Jul 24 Javascript
AJAX在JQuery中的应用详解
Jan 30 jQuery
JavaScript创建、读取和删除cookie
Sep 03 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
Jan 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使用Smarty的相关注意事项及访问变量的几种方式
2011/12/08 PHP
Smarty的配置与高级缓存技术分享
2012/06/05 PHP
简单的pgsql pdo php操作类实现代码
2016/08/25 PHP
ThinkPHP中类的构造函数_construct()与_initialize()的区别详解
2017/03/13 PHP
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
js分解url参数(面向对象-极简主义法应用)
2012/08/09 Javascript
JavaScript定义类和对象的方法
2014/11/26 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
2015/05/13 Javascript
基于JS实现翻书效果的页面切换样式
2017/02/16 Javascript
浅谈Node Inspector 代理实现
2017/10/19 Javascript
浅谈Node.js CVE-2017-14849 漏洞分析(详细步骤)
2017/11/10 Javascript
js读取本地文件的实例
2017/12/22 Javascript
详解vue axios二次封装
2018/07/22 Javascript
JS实现求5的阶乘示例
2019/01/21 Javascript
vue-cli项目使用mock数据的方法(借助express)
2019/04/15 Javascript
Vue 解决通过this.$refs来获取DOM或者组件报错问题
2020/07/28 Javascript
Python多线程原理与用法详解
2018/08/20 Python
Python tkinter label 更新方法
2018/10/11 Python
对Python生成汉字字库文字,以及转换为文字图片的实例详解
2019/01/29 Python
Python 面向对象之类class和对象基本用法示例
2020/02/02 Python
tensorflow 实现自定义梯度反向传播代码
2020/02/10 Python
Python socket连接中的粘包、精确传输问题实例分析
2020/03/24 Python
python实现数据结构中双向循环链表操作的示例
2020/10/09 Python
Python制作运行进度条的实现效果(代码运行不无聊)
2021/02/24 Python
Html5页面中的返回实现的方法
2018/02/26 HTML / CSS
美国知名男士服饰品牌:Brooks Brothers(布克兄弟)
2016/08/25 全球购物
日本最大化妆品和美容产品的综合口碑网站:cosme shopping
2019/08/28 全球购物
单身联谊活动方案
2014/01/29 职场文书
校园游戏活动新闻稿
2014/10/15 职场文书
整改落实情况汇报材料
2014/10/29 职场文书
药品开票员岗位职责
2015/04/15 职场文书
高一军训感想
2015/08/07 职场文书
幼儿园教师心得体会范文
2016/01/21 职场文书
MySQL中IO问题的深入分析与优化
2022/04/02 MySQL
mysql 体系结构和存储引擎介绍
2022/05/06 MySQL