JavaScript中按照字母排序列表的两种方法

最新推荐文章于 2025-05-14 09:05:05 发布

壹间show

最新推荐文章于 2025-05-14 09:05:05 发布

阅读量2.5w

点赞数

CC 4.0 BY-SA版权

分类专栏：浅谈javascript 前端杂文文章标签：字母列表排序 sort函数的应用

本文链接：https://blog.youkuaiyun.com/xpf_show/article/details/27707065

前端杂文同时被 2 个专栏收录

28 篇文章

订阅专栏

浅谈javascript

19 篇文章

订阅专栏

本文探讨JavaScript中使用sort()函数对字母列表进行排序的方法。博主在实践中遇到sort()排序的疑惑，通过自我研究和理解，分享了排序原理和示例，欢迎读者指正交流。

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

写这篇博客的时候，是刚刚好我看到一道这样的字母列表排序，跟着里面有点小困惑，就上网搜了下，虽然没有比较好的解释，但lz我就自己看着整理下，跟着大家如果有什么问题或者发现哪里有问题的话，麻烦一定要帮我指正哦~~~~

这是第一种方法：

function sortkids(e){
if(typeof e=="string") e=document.getElementById(e);
var kids=[];
for (var x=e.firstChild;x!=null;x=x.nextSibling)
   if(x.nodeType==1) kids.push(x);
   
   kids.sort(function (n,m){
    var s=n.firstChild.data; alert(s);
 var t=m.firstChild.data;  alert(t);
 if(s<t) return -1;
 else if(s>t) return 1;
 else return 0;
 });
 
 for(var i=0;i<kids.length;i++) e.appendChild(kids[i]);
 }

<body>
测试列表 
<ul id="list">
<li>one</li><li>two</li><li>three</li><li>four</li>
</ul>
<p><button onclick="sortkids('list')">click</button></p>
</body>

这个程序输出排序结果为：four one three two

楼主我的困惑是sort()函数里面的排序

   var s=n.firstChild.data; alert(s);
 var t=m.firstChild.data;  alert(t);

为什么是s和t是一样的呢？、

sort是js中数组Array的排序方法

sort 方法
返回一个元素已经进行了排序的 Array 对象。 
arrayobj.sort(sortfunction) 
参数
arrayObj
必选项。任意 Array 对象。

sortFunction
可选项。是用来确定元素顺序的函数的名称。如果这个参数被省略，那么元素将按照 ASCII 字符顺序进行升序排列。 

说明
sort 方法将 Array 对象进行适当的排序；在执行过程中并不会创建新的 Array 对象。 

如果为 sortfunction 参数提供了一个函数，那么该函数必须返回下列值之一： 
负值，如果所传递的第一个参数比第二个参数小。 
零，如果两个参数相等。 
正值，如果第一个参数比第二个参数大。 

他首先将li对象放进数组，然后指定一个方法，告诉这个数组两个元素之间该怎么排序，具体的排序js引擎中已经定死了的，不用去关心了，只要在排序函数中，告诉Array，两个内容对象该怎么比较就可以了。

第二种方法：个人认为比较好理解些

<script type="text/javascript">  
    /** 
     * @param string ul 
     * 
     */  
    function sortLis(ul){  
        var u=document.getElementById(ul);  
        var lis=u.getElementsByTagName('li');  
        var tmp=[];  
  
        for(var i=0;i<lis.length;i++){  
            tmp.push(lis[i]);  
        }  
        tmp.sort(function(m,n){  
            var s=m.firstChild.data;  
            var e=n.firstChild.data;  
            if(s>e){  
                return 1  
            }else if(s<e){  
                return -1;  
            }else{  
                return 0;  
            }  
        });  
        for(var i=0;i<tmp.length;i++){  
            u.appendChild(tmp[i]);  
        }  
    }  
      
</script>