zoukankan      html  css  js  c++  java
  • 数组去重

    在JavaScript中,数组常常被用到,自然数组去重在项目中就会经常碰到了,本文总结了一些常见的数组去重方法。

    ES6 Set去重

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>数组去重</title>
    </head>
    <body>
        <script>
            function unique(arr){
                return Array.from(new Set(arr))
            }
            var a = [1,2,,'tr',,'N','n',0,0,{},true,false,'true','false',false,
                    'false',NaN,'NaN',NaN,'NaN',undefined,'undefined',undefined,'undefined',
                    {},2,1,true];
            var b = unique(a);
            console.log(b);
            console.log(a);
        </script>    
    </body>
    </html>

    这种方法不会改变原数组,但是不能去掉重复的“{}”

    ES5中的splice

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>数组去重</title>
    </head>
    <body>
        <script>
            function unique(arr){
                for(var i=0;i<arr.length;i++){
                    for(var j=i+1;j<arr.length;j++){
                        if(arr[i] === arr[j]){
                            arr.splice(j,1);
                            j--;
                        }
                    }
                }
                return arr;
            }
            var a = [1,2,,'tr',,'N','n',0,0,{},true,false,'true','false',false,
                    'false',NaN,'NaN',NaN,'NaN',undefined,'undefined',undefined,'undefined',
                    {},2,1,true];
            var b = unique(a);
            console.log(b);
            console.log(a);
        </script>    
    </body>
    </html>

    这种方法利用双层循环,外层循环元素,内层循环时比较值。值相同时,则删去这个值。在对数组进行去重的同时也改变了原数组,但是不能去掉NaN和{}。

    indexOf去重

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>数组去重</title>
    </head>
    <body>
        <script>
            function unique(arr){
                if(!Array.isArray(arr)){
                    console.log('type error')
                    return
                }
                var array = [];
                for(var i = 0; i <arr.length; i++){
                    if(array.indexOf(arr[i])== -1){
                        array.push(arr[i])
                    }
                }
                return array;
            }
            var a = [1,2,,'tr',,'N','n',0,0,{},true,false,'true','false',false,
                    'false',NaN,'NaN',NaN,'NaN',undefined,'undefined',undefined,'undefined',
                    {},2,1,true];
            var b = unique(a);
            console.log(b);
            console.log(a);
        </script>    
    </body>
    </html>

    新建一个空的结果数组,for 循环原数组,判断结果数组是否存在当前元素,如果有相同的值则跳过,不相同则push进数组。这种方法不会改变原数组,但是也不能去掉NaN和{}。

    sort()去重

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>数组去重</title>
    </head>
    <body>
        <script>
            function unique(arr){
                if(!Array.isArray(arr)){
                    console.log('type error')
                    return
                }
                arr = arr.sort();
                var array=[arr[0]];
                for(var i = 1; i < arr.length; i++){
                    if(arr[i] !== arr[i-1]){
                        array.push(arr[i]);
                    }
                }
                return array;
            }
            var a = [1,2,,'tr',,'N','n',0,0,{},true,false,'true','false',false,
                    'false',NaN,'NaN',NaN,'NaN',undefined,'undefined',undefined,'undefined',
                    {},2,1,true];
            var b = unique(a);
            console.log(b);
            console.log(a);
        </script>    
    </body>
    </html>

    新建一个空的结果数组,for 循环原数组,判断结果数组是否存在当前元素,如果有相同的值则跳过,不相同则push进数组。这种方法虽然没有改变原数组的数据项,但是改变了原有的顺序,所以依旧是改变了原数组,并且该方法不能去掉重复的NaN,{}和“NaN”。

    利用对象的属性不能相同的特点进行去重

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>数组去重</title>
    </head>
    <body>
        <script>
            function unique(arr){
                if(!Array.isArray(arr)){
                    console.log('type error')
                    return
                }
                var array = [];
                var obj ={};
                for(var i = 0; i< arr.length; i++){
                    if(!obj[arr[i]]){
                        array.push(arr[i])
                        obj[arr[i]] = 1;
                    }else{
                        obj[arr[i]]++
                    }
                }
                return array;
            }
            var a = [1,2,,'tr',,'N','n',0,0,{},true,false,'true','false',false,
                    'false',NaN,'NaN',NaN,'NaN',undefined,'undefined',undefined,'undefined',
                    {},2,1,true];
            var b = unique(a);
            console.log(b);
            console.log(a);
        </script>    
    </body>
    </html>

    这种方法也不会改变原数组,并且是去重最完整的方法,但是还去掉了一些并没有重复的数据,例如false和“false”,NaN和‘NaN’等。

    includes去重

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>数组去重</title>
    </head>
    <body>
        <script>
            function unique(arr){
                if(!Array.isArray(arr)){
                    console.log('type error')
                    return
                }
                var array = [];
                for(var i = 0; i < arr.length; i++){
                    if(!array.includes(arr[i])){
                        array.push(arr[i]);
                    }
                }
                return array;
            }
            var a = [1,2,,'tr',,'N','n',0,0,{},true,false,'true','false',false,
                    'false',NaN,'NaN',NaN,'NaN',undefined,'undefined',undefined,'undefined',
                    {},2,1,true];
            var b = unique(a);
            console.log(b);
            console.log(a);
        </script>    
    </body>
    </html>

    这种方法不会改变原数组,但是不能去掉重复的{}

    filter去重

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>数组去重</title>
    </head>
    <body>
        <script>
            function unique(arr){
                return arr.filter(function(item,index,arr){
                    return arr.indexOf(item,0) == index;
                })
            }
            var a = [1,2,,'tr',,'N','n',0,0,{},true,false,'true','false',false,
                    'false',NaN,'NaN',NaN,'NaN',undefined,'undefined',undefined,'undefined',
                    {},2,1,true];
            var b = unique(a);
            console.log(b);
            console.log(a);
        </script>    
    </body>
    </html>

    递归去重

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>数组去重</title>
    </head>
    <body>
        <script>
            function unique(arr){
                var array = arr;
                var len = array.length;
                array.sort(function(a,b){
                    return a - b;
                })
                function loop(index){
                    if(index >= 1){
                        if(array[index] === array[index -1]){
                            array.splice(index,1);
                        }
                        loop(index - 1);
                    }
                }
                loop(len - 1);
                return array;
            }
            var a = [1,2,,'tr',,'N','n',0,0,{},true,false,'true','false',false,
                    'false',NaN,'NaN',NaN,'NaN',undefined,'undefined',undefined,'undefined',
                    {},2,1,true];
            var b = unique(a);
            console.log(b);
            console.log(a);
        </script>    
    </body>
    </html>

  • 相关阅读:
    python_xrange和range的异同
    python_学习笔记
    Python IDLE快捷键一览
    Git命令详解
    Git 分支-利用分支进行开发的工作流程
    JavaScript-面向对象
    getWritableDatabase()与getReadableDatabase()的区别:
    「学习笔记」爬山算法与模拟退火
    python基础2
    python基础1
  • 原文地址:https://www.cnblogs.com/yuyujuan/p/9782179.html
Copyright © 2011-2022 走看看