JavaScript常用的8个数组去重实战源码

在我们学习和使用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);

结果如下:

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);

结果如下:

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);

结果如下:

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);

结果如下:

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");

结果如下:

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);

结果如下:

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);

结果如下:

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);

结果如下:

 
转发

@WEB开发李家靖

JavaScript常用的8个数组去重实战源码「实战干货」

0/2000字

 

JavaScript常用的8个数组去重实战源码的更多相关文章

  1. Atitit.常用语言的常用内部api 以及API兼容性对源码级别可移植的重要性 总结

    Atitit.常用语言的常用内部api 以及API兼容性对源码级别可移植的重要性 总结 1.1. 要兼容的重要语言api1 1.2. 常用基础api分类 core api1 1.3. 比较常用的扩展库 ...

  2. Spring Boot 揭秘与实战 源码分析 - 工作原理剖析

    文章目录 1. EnableAutoConfiguration 帮助我们做了什么 2. 配置参数类 – FreeMarkerProperties 3. 自动配置类 – FreeMarkerAutoCo ...

  3. Spring Boot 揭秘与实战 源码分析 - 开箱即用,内藏玄机

    文章目录 1. 开箱即用,内藏玄机 2. 总结 3. 源代码 Spring Boot提供了很多”开箱即用“的依赖模块,那么,Spring Boot 如何巧妙的做到开箱即用,自动配置的呢? 开箱即用,内 ...

  4. CentOS7 实战源码安装mysql5.7.17数据库服务器

    CentOS7 实战源码安装mysql5.7.17数据库服务器 简介:实战演练mysql数据库服务器的搭建  mysql简介: mysql是一个开源的关系型数据库管理系统,现在是oracle公司旗下的 ...

  5. CentOS7 实战源码部署php服务与nginx 的整合

    简介:实战演练php服务的搭建 PHP是一种脚本语言,常用于做动态网站的. 源码编译安装: 安装依赖组件: yum -y install gcc gcc-c++ bzip2 bzip2-devel b ...

  6. JDK数组阻塞队列源码深入剖析

    JDK数组阻塞队列源码深入剖析 前言 在前面一篇文章从零开始自己动手写阻塞队列当中我们仔细介绍了阻塞队列提供给我们的功能,以及他的实现原理,并且基于谈到的内容我们自己实现了一个低配版的数组阻塞队列.在 ...

  7. JavaScript常见的五种数组去重的方式

    ▓▓▓▓▓▓ 大致介绍 JavaScript的数组去重问题在许多面试中都会遇到,现在做个总结 先来建立一个数组 var arr = [1,2,3,3,2,'我','我',34,'我的',NaN,NaN ...

  8. javascript高逼格代码实现数组去重,JSON深度拷贝,匿名函数自执行,数字取整等

    1.如何装逼用代码骂别人傻逼 (!(~+[])+{})[--[~+""][+[]]*[~+[]] + ~~!+[]]+({}+[])[[~!+[]]*~+[]] 2.如何优雅的用代 ...

  9. Javascript系列——对象元素的数组去重实现

    概要 这是一篇记录文,记录数组操作对象去重的实现. 需求 有这样一个数组 [{ _id: 123, name: '张三' },{ _id: 124, name: '李四' },{ _id: 123, ...

  10. Scala实战高手****第8课:零基础实战Scala最常用数据结构Map和Tuple及Spark源码鉴赏

    本课内容1.Map和Tuple在Spark源码中的鉴赏2.Map和Tuple代码操作实战 ------------------------------------------------------- ...

随机推荐

  1. Postgresql清理WAL日志

    WAL是Write Ahead Log的简写,和oracle的redo日志类似,存放在$PGDATA/pg_xlog中,10版本以后在$PGDATA/pg_wal目录. 1.如果开启了归档,在目录ar ...

  2. pip换源和制作虚拟环境操作步骤讲解

    目录 一.pip换源及虚拟环境 二.虚拟环境 一.pip换源及虚拟环境 我们Python的强大之处就是有非常多的牛逼的第三方模块,后面的程序员只需要下载第三方模块,然后站在大佬们的肩膀上开发,第三方开 ...

  3. ESXi 安装 Truenas Core 解决企业共享存储免费方案

    服务器配置 创建虚拟机内存最少8+,建议选择32,CPU没啥用,我给了2,硬盘我选择了50G+8T,因为一个虚拟机无法使用两个存储池,所以全部使用非SSD硬盘,自带网卡删除,单独给一个直通网卡,建议上 ...

  4. 云服务器 CentOS 的使用历程

    ------------恢复内容开始------------ CentOS图形页面的下载 安装X(X Window System),命令如下: yum groupinstall "X Win ...

  5. Docker安装和基础命令

    每个优秀的人,背后都有一段沉默的时光 前言 学习Docker基础知识 安装 docker常见的有3种安装方式,yum.rpm包.脚本. 我们采用相对简单但对各种环境比较友好的方式:(关防火墙和seli ...

  6. element-ui下表格头部字段hover显示tips信息

    记录一下表格头部加hover之后显示tips信息循环,或单独的el-table-column都可以哦 <el-table-column             prop="name&q ...

  7. Bug的分类及优先级划分

    P0等级(功能无法正常使用.Block测试流程) 严重花屏 内存泄漏 用户数据丢失或破坏 系统崩溃/死机/冻结 模块无法启动或异常退出 严重的数值计算错误 功能设计与需求严重不符 其它导致无法测试的错 ...

  8. c++中int转string

    在muduo库中看见的一个函数,写的有点秀 const char digits[] = "9876543210123456789"; const char* zero = digi ...

  9. Dependency Analyzer

    Dependency Analyzer  idea插件  查找maven依赖 1.Setting---->Plugins------>Dependency Analyzer 2.使用 po ...

  10. Echarts 设置Y轴 || X轴的刻度只显示整数

    目前的效果如下:(有小数) 想要的效果如下:(整数) 解决方案: 在配置项的yAxis或者xAxis对象中添加属性:minInterval: 1,表示将刻度的最小间距设置为1 注意: minInter ...