一、简单的去重方法,利用数组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. 华为云BigData Pro解读: 鲲鹏云容器助力大数据破茧成蝶

    华为云鲲鹏云容器 见证BigData Pro蝶变之旅大数据之路顺应人类科技的进步而诞生,一直顺风顺水,不到20年时间,已渗透到社会生产和人们生活的方方面面,.然而,伴随着信息量的指数级增长,大数据也开 ...

  2. SpringBoot-自动配置原理(七)

    自动配置原理 本节内容分为三个部分 配置文件的写法 分析自动配置原理 @Conditional 一. 配置文件的写法 配置文件可以写什么? 是与/META-INF/spring.factories配置 ...

  3. UVA11324 The Lagest Lique(SCC缩点+DP)

    Given a directed graph G, con- sider the following transformation. First, create a new graph T(G) to ...

  4. 原生js 复制内容到剪切板

    代码: function copyHandle(content){ let copy = (e)=>{ e.preventDefault() e.clipboardData.setData('t ...

  5. 【面试】386- JavaScript 面试 20 个核心考点

    点击上方"前端自习课"关注,学习起来~ 引言 Javascript是前端面试的重点,本文重点梳理下 Javascript 中的常考基础知识点,然后就一些容易出现的题目进行解析.限于 ...

  6. 【重温基础】JS中的常用高阶函数介绍

    Ps. 晚上加班到快十点,回来赶紧整理整理这篇文章,今天老大给我推荐了一篇文章,我从写技术博客中收获到了什么?- J_Knight_,感受也是很多,自己也需要慢慢养成记录博客的习惯,即使起步艰难,难以 ...

  7. 【Git】学习开始

    [Git]学习开始 转载:https://www.cnblogs.com/yangchongxing/p/10172683.html 在线电子书籍:https://git-scm.com/book/z ...

  8. Elasticsearch系列---补充几个知识点

    概要 bulk api有趣的json格式 前面<简单入门实战>一节中,有介绍bulk的使用示例,大家一定很奇怪,还有这么有趣的JSON格式,必须严格照他的换行来做,我想把JSON搞得美观可 ...

  9. Vue大纲

    Vue框架 Vue ---- vue的基本使用 文本/事件/属性指令 补充: js面向对象 js函数 Vue ---- 表单指令 条件指令 循环指令 分隔符 过滤器 计算属性 监听属性 Vue --- ...

  10. nginx代理grafana

    希望通过Nginx为服务器上的grafana进行代理,实现通过在当前域名后加/grafana在公网进行访问,开始按照百度的方法弄了几个小时都不行,后面仔细看了官方的文档才弄好,Mark一下. Ngin ...