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. 全国计算机二级python备考

    选择题: https://www.itkaoshi.net/3476.html 操作题: https://www.bilibili.com/video/BV1Zj411f7ey?p=1 经典题讲解: ...

  2. linux上安装python3(yum方式)

    可联通外网的linux系统终端上安装python3 1,建立yum仓库: https://mirrors.163.com/centos/7.9.2009/os/x86_64/ 2,使用yum下载安装对 ...

  3. Spark 要点总结及优化

    Spark Components:  角色组成: Driver :  由SparkContext创建,运行在main方法,负责资源申请与调度,程序分发,接收每个分区的计算结果 Cluster mana ...

  4. HBase架构及读写流程

    HBase架构: Client    访问HBase的接口并维护cache来加快对HBase的访问 Zookeeper    ​ 1.保证任何时候,集群中只有一个活跃master    ​ 2.存储所 ...

  5. spring boot 3.x 配置spring security

    参考文章:https://spring.io/guides/gs/securing-web/ 导入maven <dependency> <groupId>org.springf ...

  6. pytho获取C函数返回值

    python调用C语言接口 注:本文所有示例介绍基于linux平台 在底层开发中,一般是使用C或者C++,但是有时候为了开发效率或者在写测试脚本的时候,会经常使用到python,所以这就涉及到一个问题 ...

  7. 鉄道旅行 (Railroad Trip)

    题意 有 \(n\) 个城市, \(n-1\) 条道路.其中第 \(i\) 个城市和第 \(i+1\) 个城市由第 \(i\) 条道路连接.通过一条道路有两种付费方式:每次支付费用 \(a_i\) , ...

  8. ASP.net EF动态映射实体

    1.配置EF与建立实体模型这里不做过多介绍.主要介绍如何动态映射实体模型 1.1.实现过程有很多种方式我们这里使用接口.然后扫描所有继承了该接口的实体类然后映射(也可以自行扩展使用特性) 首先我们新建 ...

  9. C# DevExpress中GridControl控件的基本属性设置和使用方法

    1.GridControl隐藏GroupPanel(主面板) 隐藏:鼠标单击Run Designer-OptionsView-ShowGroupPanel=False; 修改:鼠标单击Run Desi ...

  10. VMware-安装rpm包出现警告:tigervnc-1.1.0-24.el6.x86_64.

    警告:tigervnc-1.1.0-24.el6.x86_64. 解决方法:rpm -ivh tigervnc-1.1.0-24.el6.x86_64.rpm --force --nodeps --n ...