JS数组去重方法的比较

作者: 荞叶 | 来源:发表于2016-12-19 11:44 被阅读15次

JS数组去重方法的比较
js数组去重的几种方法
js中数组对象去重的方法
前端开发备忘录
js 数组去重方法
JS数组去重常见方法分析
JS 数组去重的方法
js数组去重的方法
js 数组去重的方法
5.18 总结

Paste_Image.png

直接上代码，代码注释详细

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo4</title>
    <style>
        .g{
            background-color: green;
            height:5px;
            display:inline-block;
        }
    </style>
</head>
<body>
    <div>
        <div id="unique1">
            <label>unique1</label>
            <div class="g"></div>
        </div>
        <div id="unique2">
            <label>unique2</label>
            <div class="g"></div>
        </div>
        <div id="unique3">
            <label>unique3</label>
            <div class="g"></div>
        </div>
        <div id="unique4">
            <label>unique4</label>
            <div class="g"></div>
        </div>
    </div>
    <script>

    Array.prototype.unique1 = function()
    {
        var n = []; //一个新的临时数组
        for(var i = 0; i < this.length; i++) //遍历当前数组
        {
            //如果当前数组的第i已经保存进了临时数组，那么跳过，
            //否则把当前项push到临时数组里面
            if (n.indexOf(this[i]) == -1) n.push(this[i]);
        }
        return n;
    }
    Array.prototype.unique2 = function()
    {
        var n = {},r=[]; //n为hash表，r为临时数组
        for(var i = 0; i < this.length; i++) //遍历当前数组
        {
            if (!n[this[i]]) //如果hash表中没有当前项
            {
                n[this[i]] = true; //存入hash表
                r.push(this[i]); //把当前数组的当前项push到临时数组里面
            }
        }
        return r;
    }
    Array.prototype.unique3 = function(){
        var n = [ this[ 0 ] ]; //结果数组
        for( var i = 1; i < this.length; i++ ) //从第二项开始遍历
        {
            //如果当前数组的第i项在当前数组中第一次出现的位置不是i，
            //那么表示第i项是重复的，忽略掉。否则存入结果数组
            if( this.indexOf( this[ i ] ) == i ) n.push( this[ i ] );
        }
        return n;
    }

    Array.prototype.unique4 = function(){
        //数组排序
        this.sort();
        var re = [ this[ 0 ] ];
        for( var i = 1; i < this.length; i++ )
        {
            //取数组的第i项和临时数组的最后一项目对比，如果不等，就存入临时数组。
            if( this[ i ] !== re[ re.length - 1 ] )
            {
                re.push( this[ i ] );
            }
        }
        return re;
    }

    //随机生成数组
    function randomArr(num){
        var arr = [];
        for( var i = 0; i < num; i++ )
        {
            //随机生成1-num之间的数字
            arr.push( Math.floor( Math.random() * num ) + 1 );
        }
        return arr;
    }

    function cuttime(idname){
        var sTime = new Date().getTime();
        //调用数组去重的方法
        arr[idname]&&arr[idname]();
        var eTime = new Date().getTime();
        var _time = eTime-sTime;
        //改变横条的长度
        document.getElementById(idname).children[1].style.width = _time+"px";
    }

    //随机生成1-10000的数字的数组
    var arr = randomArr(10000);

    cuttime("unique1");
    cuttime("unique2");
    cuttime("unique3");
    cuttime("unique4");


    </script>
</body>
</html>

总结：结果表明第二种方法远远快于其他两种方法。但是内存占用方面应该第二种方法比较多，因为多了一个hash表。这就是所谓的空间换时间。