超实用的JS数组去重

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

// 最简单数组去重法
/*
* 新建一新数组,遍历传入数组,值不在新数组就push进该新数组中
* IE8以下不支持数组的indexOf方法
* */
let array = [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可以实现,不影响功能实现~

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏达达前端

web开发技术-javascript

快速入门 JavaScript 指南 中级教程 高级 内置对象 表达式和运算符 语句和声明 函数 Classes Errors 更多 Ne...

6910
来自专栏趣谈前端

《前端实战》之变量提升,函数声明提升及变量作用域详解

之所以会写这篇文章,主要源于笔者在重构老项目的时候发现了一个bug,导致某个插件不生效了,在review加search code加断点调试之后,发现了原因:一个...

7510
来自专栏Creator星球游戏开发社区

在Creator3D中使用protobuf的快速解决方法!

在这里分享一下在 Creator 3D 中集成 protobufjs 遇到的问题,如果你在 Creator 3D 中使用其它JS三方库,也会有一定的帮助。

8920
来自专栏前端自习课

【MobX】390- MobX 入门教程(上)

observable 是一种让数据的变化可以被观察的方法,底层是通过把该属性转化成 getter / setter 来实现的。。

8120
来自专栏京程一灯

我们应该为 JavaScript 重新命名吗?[每日前端夜话0xDA]

非官方的,社区制作的JavaScript徽标。资料来源:https://github.com/voodootikigod/logo.js

8030
来自专栏AndroidTv

模拟实现 bind

title: 模拟实现 bind date: 2019/10/24 22:30:25 categories:

4010
来自专栏迈向前端工程师

JS高级测试: 在数组的解构赋值中,var [ a,b,c ] = [ 1,2 ]结果中,a、b、c的值分别是

ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。

11710
来自专栏前端自习课

【MobX】391- MobX 入门教程(下)

在上一部分内容中,我们了解到,对可观察的数据做出反应的时候,需要我们手动修改可观察数据的值。这种修改是通过直接向变量赋值来实现的,虽然简单易懂,但是这样会带来一...

6220
来自专栏前端黑板报

ES2019新特性的学习

前端技术更新的实在是太快了,各种框架百花齐放,随着NodeJs不断的兴起,各种构建工具也是层出不穷,这不,前两周尤雨溪开源了Vue.js3.0源码之后,很多大佬...

5910
来自专栏全栈前端精选

【THE LAST TIME】一文吃透所有JS原型相关知识点

首先我想说,【THE LAST TIME】系列的的内容,向来都是包括但不限于标题的范围。

7510

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励