专栏首页web前端技术分享超实用的JS数组去重

超实用的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 条评论
登录 后参与评论

相关文章

  • JavaScript中break、continue和return的区别

    break: 直接跳出 当前 的循环,从当前循环外面开始执行,忽略循环体中任何其他语句和循环条件测试。它只能跳出一层循环,如果你的循环是嵌套循环,那么你需要按照...

    TimothyJia
  • 如何渲染几万条数据并不卡住界面?

    如何在不卡住页面的情况下渲染数据,也就是说不能一次性将几万条 都渲染出来,而应该一次渲染部分 DOM,那么就可以通过 requestAnimationFrame...

    TimothyJia
  • 手写Promise A+ 规范

    TimothyJia
  • ES6 的内置对象扩展

    方法还可以接受第二个参数,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组

    清出于兰
  • react 同构初步(1)

    单页面应用(SPA)在传统的实现)上,面临着首页白屏加载时间过长,seo难以优化的难题。解决这个问题的思路之一就是ssr(服务端渲染)。

    一粒小麦
  • TarsGo支持Protocol Buffer

    Tars是腾讯从2008年到今天一直在使用的后台逻辑层的统一应用框架TAF(Total Application Framework),目前支持C++,Java,...

    陈明杰
  • 就是要你懂 TCP

    看过太多tcp相关文章,但是看完总是不过瘾,似懂非懂,反复考虑过后,我觉得是那些文章太过理论,看起来没有体感,所以吸收不了。 希望这篇文章能做到言简意赅,帮助大...

    用户1263954
  • 从代码开源到社区共建:腾讯发起成立 TARS 微服务基金会

    美国时间 2020 年 3 月 10 日,Linux 基金会宣布成立专注微服务领域的子基金会:TARS 基金会。这是与云原生软件基金会(CNCF)平级的基金会,...

    温铭@APISIX
  • Linux vi/vim

    所有的 Unix Like 系统都会内建 vi 文书编辑器,其他的文书编辑器则不一定会存在。

    于小勇
  • Node 直出理论与实践总结

    直出是什么?到底是怎样的性能优化?本文将结合从在浏览器输入url,到展示最终页面的过程来对其进行一步步分析,并将在手Q web 中的实际应用实践进行总结。

    腾讯AlloyTeam

扫码关注云+社区

领取腾讯云代金券