一、简单的去重方法,利用数组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. 【经验分享】如何搭建本地MQTT服务器(Windows ),并进行上下行调测

    网上查了很多资料,实际动手的时候踩了很多坑,现在把我的经验分享给大家: 一.安装和启动 使用EMQTT,下载完直接到bin目录下执行emqttd start就可以了,简单方便 下载地址:https:/ ...

  2. 一图读懂基于鲲鹏处理器的全栈混合云华为云Stack6.5

    [摘要] 够料的全栈混合云干货信息,速戳! 近日,在2019华为云城市峰会广州站上,华为云发布基于鲲鹏处理器的全栈混合云解决方案HCS 6.5.x86+鲲鹏,双驱动开启云上新架构;云上+本地,双平台无 ...

  3. 【集合系列】- 深入浅出的分析 Properties

    一.摘要 在集合系列的第一章,咱们了解到,Map 的实现类有 HashMap.LinkedHashMap.TreeMap.IdentityHashMap.WeakHashMap.Hashtable.P ...

  4. LightOJ1284 Lights inside 3D Grid (概率DP)

    You are given a 3D grid, which has dimensions X, Y and Z. Each of the X x Y x Z cells contains a lig ...

  5. 2018HDU多校训练-3-Problem G. Interstellar Travel

    链接:http://acm.hdu.edu.cn/showproblem.php?pid=6325                                   Interstellar Tra ...

  6. Bootstrap响应式栅格系统设计

    为了方便起见,我们通过1200px宽的屏幕来讲解bootstrap中container.row.col的css属性值为何这样设置的原理 在1200px屏幕中为何container的宽度设置为1170p ...

  7. webpack 环境搭建

    Webpack环境搭建 一.安装node 1.node官网下载node并安装----node里面内置了npm所以用在安装npm了 2.命令行输入node -v查看node是否安装成功 二.全局安装we ...

  8. pv操作与信号量详解

    对于信号量,可以认为是一个仓库,有两个概念,容量和当前的货物个数. P操作从仓库拿货,如果仓库中没有货,线程一直等待,直到V操作,往仓库里添加了货物,为了避免P操作一直等待下去,会有一个超时时间. V ...

  9. tinymce插件preview改造增加全屏按钮

    近期需要用到tinymce的preview插件,但preview出来的界面太小了,通过投影仪出来看的不清晰,于是想在preview的预览界面中增加全屏.放大和缩小的按钮,改造内容如下: 由于previ ...

  10. 你不知道的JavaScript(上)this和对象原型(四)原型

    五章 原型 1.[[ Prototype ]] JavaScript 中的对象有一个特殊的 [[Prototype]] 内置属性,其实就是对于其他对象的引用.几乎所有的对象在创建时 [[Prototy ...