列表li排序去重的实现与优化

本文链接：https://blog.csdn.net/power8988/article/details/78029892

请看以下html:


<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
<div class="aBox" style="">
    <a href="javascript:void(0)" tabid="15">数学</a>
    <a href="javascript:void(0)" tabid="6">诚信</a>
    <a href="javascript:void(0)" tabid="10">奉献</a>
    <a href="javascript:void(0)" tabid="1">爱情</a>
    <a href="javascript:void(0)" tabid="23">感恩</a>
    <a href="javascript:void(0)" tabid="9">勤奋</a>
    <a href="javascript:void(0)" tabid="2">读书</a>
    <a href="javascript:void(0)" tabid="12">道德</a>
    <a href="javascript:void(0)" tabid="24">目标</a>
    <a href="javascript:void(0)" tabid="14">人生</a>
    <a href="javascript:void(0)" tabid="17">母爱</a>
    <a href="javascript:void(0)" tabid="16">英语</a>
    <a href="javascript:void(0)" tabid="22">童年</a>
    <a href="javascript:void(0)" tabid="3">励志</a>
    <a href="javascript:void(0)" tabid="18">劳动</a>
    <a href="javascript:void(0)" tabid="19">亲情</a>
    <a href="javascript:void(0)" tabid="7">爱国</a>
    <a href="javascript:void(0)" tabid="8">激励</a>
    <a href="javascript:void(0)" tabid="11">真理</a>
    <a href="javascript:void(0)" tabid="4">时间</a>
    <a href="javascript:void(0)" tabid="21">团结</a>
    <a href="javascript:void(0)" tabid="20">创新</a>
    <a href="javascript:void(0)" tabid="5">友情</a>
    <a href="javascript:void(0)" tabid="13">理想</a>
    <a href="javascript:void(0)" tabid="1">爱情</a>
    <a href="javascript:void(0)" tabid="23">感恩</a>
    <a href="javascript:void(0)" tabid="9">勤奋</a>
    <a href="javascript:void(0)" tabid="2">读书</a>
    <a href="javascript:void(0)" tabid="12">道德</a>
    <a href="javascript:void(0)" tabid="24">目标</a>
    <a href="javascript:void(0)" tabid="14">人生</a>
    <a href="javascript:void(0)" tabid="17">母爱</a>
    <a href="javascript:void(0)" tabid="16">英语</a>
</div>

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

假设根据li下的tabid来排序，这里涉及到去重和排序两个问题；
A 同学的代码如下：

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script>
    $(function(){
        let arr=[],
            alla=$('.aBox').find('a');
        $('.aBox').find('a').remove();
        for(let i=0;i<alla.length;i++){
            arr.push(alla[i])
        }
        arr.sort(function(a1,a2){
            let n1=Number($(a1).attr('tabid'));
            let n2=Number($(a2).attr('tabid'));
            return n1-n2;
        });
        for(let m=0;m<arr.length;m++){
            for(let n=m+1;n<arr.length;n++){
                if($(arr[m]).attr('tabid')==$(arr[n]).attr('tabid')){
                    arr.splice(n,1);
                    m--;
                    n--;
                }
            }
        }
       for(let j=0;j<arr.length;j++){
           $('.aBox').append(arr[j]);
       }
    })

我们看到，她用了4次循环；
我的第一版代码如下：

var ar = document.querySelectorAll(".aBox");
    var ara=document.querySelectorAll(".aBox a");
    var frag=document.createDocumentFragment();
    for (var i = 0,l=ara.length ; i < l; i++) {
        var k='a[tabid=\"'+i+'\"]';
        var x=document.querySelectorAll(k)[0];
        if(x){
            frag.appendChild(x);
        }
    }
    $(".aBox a").remove();
    $(".aBox").append($(frag));

能否优化？

第二版如下:

    $(
                function () {
                    var ar = $(".aBox");
                    var frag = document.createDocumentFragment();
                    var i = 1;
                    while (i) {
                        let x = ar.find('a[tabid=\"' + i++ + '\"]')[0];
                        x ? frag.appendChild(x) : i = 0;
                    }
                    ar.empty().append($(frag))
                }
        )

虽然看着代码少了，
但是重要的是性能,而非代码行数，这里主要包括，l=arr.length，这样能减少对数组的操作；ar：首先将变量保存，这是很好的习惯，然后ar.find能减少对DOM的遍历；虽然find()括号中属性选择器一般遍历的时间会更长，但是这里不存在这个问题，主要因为只需要对已经保存了的ar进行遍历，绕开了DOM，所以性能会有提高；
但推荐用原生js写比较好；用兴趣的小伙伴可以试一试，也很简单的；
也有小伙伴是这样写的，供大家参考，也是一种思路：

Array.prototype.reset=function(attr){
this.sort((a, b) => a.getAttribute(attr) - b.getAttribute(attr));
var hash={},res= [];
var len=this.length;
for(var i=0;i<len;i++){
var key= this[i].innerHTML;
if(!hash[key]){
res.push(this[i]);
hash[key]=1;
}
}
return res
}
var container=document.querySelector('.aBox');
var arr=document.querySelectorAll('.aBox>a');
var frag = document.createDocumentFragment();
var list=[],len=arr.length;
for(var i=0;i<len;i++){
list.push(arr[i])
}
var b=list.reset('tabid')
len=b.length;
for(var i=0;i<len;i++){
frag.appendChild(b[i])
}
container.innerHTML='';
container.appendChild(frag)