数组去重及原理总结

本文总结了JavaScript中实现数组去重的多种方法,包括Set、indexOf、reduce、对象属性利用以及splice等,并探讨了各自的原理和性能优化。例如,Set的唯一性、indexOf结合filter或forEach的使用,以及对象属性的唯一性等。同时,文章还提到了双波浪线运算符在处理数字时的特点。最后,讨论了splice方法在去重时如何通过排序来提高效率。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

数组去重及原理总结

1. Set 去重原理

  1. 利用 set 元素是唯一,不重复的特性;
  2. arr1 使用 … 扩展运算符 将 set 集合展开;
  3. arr2 利用 es6 新特性 —— Array.from( ) : 将一个类数组对象或可遍历对象转换为一个真正的数组;
// Set 去重
        let arr = [1, 2, 3, 4, 3, 2];

        // set 去重
        let arr1 = [...new Set(arr)];
        let arr2 = Array.from(new Set(arr));

		console.log('arr1:', arr1);  //[1,2,3,4]
        console.log('arr2:', arr2);  //[1,2,3,4]

2. indexOf 去重原理

  1. 数组的 indexOf 方法 可以找到指定元素在数组中第一次出现的索引下标,如果不存在,则返回 -1
  2. arr3 : forEach + indexOf
  3. arr4 : filter + indexOf filter 不会改变原数组 会自动创建新数组并将通过条件或条件为 true 的元素添加到新数组当中 所以不需要创建新的空数组了;
 // indexOf 去重
        let arr = [1, 2, 3, 4, 3, 2];
      
        //indexOf 返回 -1 证明元素不在数组当中 arr3 中没有该元素
        let arr3 = [];
        arr.forEach(item => {
            if(arr3.indexOf(item) == -1) { 
                arr3.push(item);
            }
        })
        console.log('arr3:', arr3);  //[1,2,3,4]


        // filter + indexOf
        // indexOf 返回元素在数组中第一次出现的下标 如果相等 证明数组元素第一次出现在数组中
        let arr4 = arr.filter( function(item,index) {
            return arr.indexOf(item) === index;  
        })
 		console.log('arr4:', arr4);  //[1,2,3,4]
        

3. reduce 去重原理

  1. 数组的 reduce( ) 方法;
  2. 数组的 includes( ) 方法 :判断一个元素是否存在在数组当中,返回一个布尔值;
 // reduce 去重
        let arr = [1, 2, 3, 4, 3, 2];
        
        //reduce + includes
        let arr5 = arr.reduce(function(pre,item) {
            return pre.includes(item) ? pre : [...pre,item]; //本行同下面注释代码效果一样
            // if(!pre.includes(item)) {
            //     pre.push(item);
            // }
            // return pre;
        },[])
        console.log('arr5:' ,arr5);  //[1,2,3,4]

4. 对象去重原理

  1. 利用‘对象的属性是唯一,不重复’ 的特点,将数组元素作为对象的属性添加到对象中,属性值任意;
  2. Object.keys() 获取到对象的属性名,以数组形式输出 Object.keys[arr] => [‘1’,‘2’,‘3’,‘4’];
  3. ~~ 双波浪线:可以将小数取整;也可以将字符串类型的小数转换为数值类型的整数;
    对于正数来说,双波浪线 ~~ 和 Math.floor( ) 的效果一样,
    对于负数来说,双波浪线 ~~ 和 Math.ceil( ) 的效果一样,
    双波浪线的速度可能要比 Math.floor( ) 、Math.ceil( )的速度快
 // 对象去重
        let arr = [1, 2, 3, 4, 3, 2];
        
        let arr6 = {};
        arr.forEach(item => {
            arr6[item] = 'oo';
        })
        arr6 = Object.keys(arr6).map( item => ~~item);
        console.log('arr6:' ,arr6);  //[1,2,3,4]

在这里插入图片描述

以下两种是最基础的 侧重算法解决 第一种时间复杂度为n^2 第二种使用 sort 排序 降低了时间复杂度为 n

5. splice 去重原理

  1. splice 方法会改变原数组:通过删除或替换现有元素或原地添加新元素类修改数组,返回修改后的数组
  2. j = i +1 : j 从 i+1开始 不从头开始循环 优化代码性能;
  3. sort 方法:将数组元素进行排序, 降低了时间复杂度,节省了代码运行时间;
 // splice + 双重 for 循环 去重
        let arr = [1, 2, 3, 4, 3, 2]; 
        
         for(let i=0; i<arr.length; i++) {
             for(let j=i+1; j<arr.length; j++) {
                 if(arr[i] == arr[j]) {
                     arr.splice(j,1); // splice 直接在 arr 上删除重复元素
                     j--;
                 }
            } 
         }
          console.log(arr);  //[1,2,3,4]

// sort + splice去重
        let arr = [1, 2, 3, 4, 3, 2];
       
         arr = arr.sort();
         for(let i = 1; i < arr.length; i++) {
             if(arr[i] == arr[i-1]) {
                 arr.splice(i,1);
             }
         }
         console.log(arr);  //[1,2,3,4]
<script>
        // sort + push 去重
        let arr = [1, 2, 3, 4, 3, 2];

        let arr8 = [];
        arr = arr.sort();
        for(let i = 0; i < arr.length; i++) {
            if(arr[i] !== arr[i+1]) {
                arr8.push(arr[i]);
            }
        }
        console.log('arr8:' ,arr8);  //[1,2,3,4]

    </script>
let arr = [1, 2, 3, 4, 3, 2];
      
        // 不做推荐
         let arr7 = [];
         var flag;
         for(let i = 0; i < arr.length; i++) {
             flag = false;
             for(let j = i+1; j < arr.length; j++) {
                 if(arr[j] === arr[i]) {
                     flag = true;
                }
             }
             if(!flag) {
                 arr7.push(arr[i]);
             } 
         }
        console.log('arr7:' ,arr7);  //[1,4,3,2]

参考视频:
https://www.bilibili.com/video/BV1pK411j7Hy?spm_id_from=333.337.search-card.all.click&vd_source=6de9d6d1eee23ee3b8cd1ac0620e8986

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值