一、简单的去重方法,利用数组indexOf方法

// 最简单数组去重法
/*
* 新建一新数组,遍历传入数组,值不在新数组就push进该新数组中
* IE8以下不支持数组的indexOf方法
* */
let ary = [1, 2, 3, 2, 2, 3, 4, 3, 4, 5];
// 数组去重
function unique(ary) {
let newAry = [];
for (let i = 0; i<ary.length; i++) {
if (newAry.indexOf(ary[i]) === -1) {
newAry.push(ary[i]);
}
}
return newAry;
}
array = unique(ary);
console.log(array);

二、优化遍历数组法

/*==数组去重==*/
let ary = [1, 2, 3, 2, 2, 3, 4, 3, 4, 5];
/*
* 1.依次拿出数组中的每一项(排除最后一项:最后一项后面没有需要比较的内容)
* 2.和当前拿出项后面的每一项依次比较
* 3.如果发现有重复的,我们把找到的这个重复项在原有数组中删除掉(splice)
*/
//=>i<ary.length-1:不用拿最后一项
for (let i = 0; i < ary.length - 1; i++) {
let item = ary[i];
//=>item:依次拿出的每一项
//=>i:当前拿出项的索引
//=>和当前项后面的每一项比较:起始索引应该是i+1 k < ary.length找到末尾依次比较
for (let k = i + 1; k < ary.length; k++) {
//ary[k]:后面需要拿出来和当前项比较的这个值
if (item === ary[k]) {
//=>相等:重复了,我们拿出来的K这个比较项在原有数组中删除
// ary.splice(k, 1);
/*
* 这样做会导致数组塌陷问题:当我们把当前项删除后,后面每一项都要向前进一位,也就是原有数组的索引发生了改变,此时我们k继续累加1,下一次在拿出来的结果就会跳过一位
* 原数组 [1,2,3,4]
* i=1 =>2 我们把这一项干掉,然后i++,i=2
* 原数组 [1,3,4]
* i=2这一项是4,3这一项就错过了
* ...
*/
ary.splice(k, 1);//=>删除后不能让k累加了
k--;//=>删除后先减减,在加加的时候相当于没加没减
}
}
}
console.log(ary);

三、对象键值法去重

let ary = [1, 2, 3, 2, 2, 3, 4, 3, 4, 5];
// 使用对象属性名不重复的特点去重
let obj={};
let newAry = [];
for (let i=0; i<ary.length; i++) {
let item = ary[i];
if (typeof obj[item] === 'undefined') {
// 如果obj[item]是undefined说明对象obj中还未存入键值item,我们向newAry中加入item
newAry.push(item)
}
obj[item] = item;
}
ary = newAry
console.log(ary)

四、ES6中Set方法去重

let ary = [1, 2, 2, 2, 1, 2, 3, 2, 3, 2, 1],
console.log(Array.from(new Set(ary))); //=>基于ES6 SET实现去重
或者console.log([...new Set(ary)]);

我用let代替了var声明变量,还未学ES6的同学用var可以实现,不影响功能实现~

超实用的JS数组去重的更多相关文章

  1. js数组去重的4种方法

    js数组去重,老生长谈,今天对其进行一番归纳,总结出来4种方法 贴入代码前 ,先对浏览器Array对象进行支持indexOf和forEach的polyfill Array.prototype.inde ...

  2. JS 数组去重(数组元素是对象的情况)

    js数组去重有经典的 几种方法 但当数组元素是对象时,就不能简单地比较了,需要以某种方式遍历各值再判断是否已出现. 因为: 1.如果是哈希判断法,对象作哈希表的下标,就会自动转换成字符型类型,从而导致 ...

  3. js数组去重常用方法

    js数组去重是面试中经常会碰到的问题,无论是前端还是node.js数组常见的有两种形式,一种是数组各元素均为基本数据类型,常见的为数组字符串格式,形如['a','b','c'];一种是数组各元素不定, ...

  4. js 数组去重小技巧

    js 数组去重小技巧 Intro 今天遇到一个问题,需要对数据进行去重,想看一下有没有什么比较方便的方法,果然有些收获. Question 问题描述: 我有一个这样的数据: [ { "Pro ...

  5. JS数组去重的几种常见方法

    JS数组去重的几种常见方法 一.简单的去重方法 // 最简单数组去重法 /* * 新建一新数组,遍历传入数组,值不在新数组就push进该新数组中 * IE8以下不支持数组的indexOf方法 * */ ...

  6. js数组去重五种方法

    今天来聊一聊JS数组去重的一些方法,包括一些网上看到的和自己总结的,总共5种方法(ES5). 第一种:遍历数组法 这种方法最简单最直观,也最容易理解,代码如下: var arr = [2, 8, 5, ...

  7. js数组去重的方法(转)

    JS数组去重的几种常见方法 一.简单的去重方法 // 最简单数组去重法 /* * 新建一新数组,遍历传入数组,值不在新数组就push进该新数组中 * IE8以下不支持数组的indexOf方法 * */ ...

  8. js 数组去重方法汇总

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  9. js数组去重 javascript版

    //js数组去重 //思路: // 1.放入第一个元素 // 2.放入第n个元素,和第n个之前的元素就行比较,如果有重复,则跳过.没有重复就加入数组中 // 3.返回新的去重后数组 Array.pro ...

随机推荐

  1. luogu P2740 [USACO4.2]草地排水Drainage Ditches |网络流

    题目背景 在农夫约翰的农场上,每逢下雨,贝茜最喜欢的三叶草地就积聚了一潭水.这意味着草地被水淹没了,并且小草要继续生长还要花相当长一段时间.因此,农夫约翰修建了一套排水系统来使贝茜的草地免除被大水淹没 ...

  2. hadoop format 重新格式化

    前文:如果格式化完之后,使用jps命令发现进程都已经启动,但是使用web页面打不开hadoop的网页,可能原因就是防火墙没关或者是哪个配置过程配错了. 1.关闭防火墙 一般最好是关闭防火墙比较关闭. ...

  3. Unity3D for iOS初级教程:Part 3/3(下)

    转自:http://www.cnblogs.com/alongu3d/archive/2013/06/01/3111739.html 消息不会自动消除 你基本的游戏功能已经完成了,但是显示一些关于游戏 ...

  4. 使用iCamera 测试mt9d111 200w高分辨率摄像头小结

    使用iCamera 测试mt9d111 200w高分辨率摄像头小结 先看下产品特性 安装效果 根据前面博客的经验,该摄像头,默认配置即有输出,分辨率为800*600,yuv 于是可以写 如果使用默认配 ...

  5. 新版FPC摄像头测评 OV7725 OV7670 OV9650 OV9655 OV5640 OV5642 OV2640 OV3640 MT9D112

    新版FPC摄像头测评 OV7725 OV7670 OV9650 OV9655 OV5640 OV5642 OV2640 OV3640 MT9D112 最新制样新版FPC摄像头板卡,先看看结构尺寸 再瞧 ...

  6. 【Web技术】353- CDN 科普

    点击上方"前端自习课"关注,学习起来~ 一.概述 1.1 含义 CDN 的全称是 Content Delivery Network,即内容分发网络.CDN 是构建在网络之上的内容分 ...

  7. 【Git】安装配置

    [Git]安装配置 转载:https://www.cnblogs.com/yangchongxing/p/10173231.html 1.在 Ubuntu 上安装 $ sudo apt-get ins ...

  8. ELK和EFK的区别

    ELK 是现阶段众多企业单位都在使用的一种日志分析系统,它能够方便的为我们收集你想要的日志并且展示出来 ELK是Elasticsearch.Logstash.Kibana的简称,这三者都是开源软件,通 ...

  9. Spring Cloud Alibaba 新一代微服务解决方案

    本篇是「跟我学 Spring Cloud Alibaba」系列的第一篇, 每期文章会在公众号「架构进化论」进行首发更新,欢迎关注. 1.Spring Cloud Alibaba 是什么 Spring ...

  10. 【原创】这道Java基础题真的有坑!我也没想到还有续集。

    前情回顾 自从我上次发了<这道Java基础题真的有坑!我求求你,认真思考后再回答.>这篇文章后.我通过这样的一个行文结构: 解析了小马哥出的这道题,让大家明白了这题的坑在哪里,这题背后隐藏 ...