IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

javascript数组排序的问题

RockUX | WEB、前端、JavaScript、PHP 2011-06-23 13:42:28 累计浏览 3,927 次
本机暂存

    看看下面的代码,你觉得输出是什么呢?

1
2
3
var a = [30,2,1,9,15];  
a.sort();  
alert(a);

    如果你觉得输出是1,2,9,15,30,那就错了,真正的结果是1,15,2,30,9。不过,在没真正搞清楚javascript的数组排序之前还是先别放弃这个强大的语言。

    那么这是怎么回事呢?当排序的方法没有参数的时候,所有的值都会被转化成为字符串,然后根据字典顺序排序。所以15会排在2前面,10和19999也一样。

    为了解决这个问题,我们需要给sort()方法传递一个比较函数,这个函数需要两个参数,我们暂且命名为a和b,然后返回:

  • 如果a
  • 如果a>b,那么返回一个正数。
  • 如果a=b,就返回0。
  •     最简单的数字比较的函数如下:

    1
    2
    3
    function compare(a,b){
        return a-b;
    }

        我们可以直接把比较函数写在sort里面作为参数传入:

    1
    2
    3
    var a = [30,2,1,9,15];  
    a.sort(function(a,b) { return a-b; });  
    alert(a);

        现在的结果就是1,2,9,15,30了

        排序函数另外一个强大的地方在于,他可以比较任何类型的对象的任何属性。我们看看下面的例子:

    1
    2
    3
    4
    5
    6
    7
    8
    // location co-ordinates  
    var locations = [  
        { name: "shops", x:3, y:4 },  
        { name: "library", x:5, y:3 },  
        { name: "pub", x:1, y:2 }  
    ];  
    // home co-ordinates  
    var home = { name: "home", x:0, y:0 };

        然后我们定义一个公式来比较:

    1
    2
    3
    function distance(p1,p2){
    return Math.sqrt(Math.pow(p1.x-p2.x,2)+Math.pow(p1.y-p2.y,2)); 
    }

        现在我们就可以根据离家距离来排序了。

    1
    2
    3
    4
    5
    6
    locations.sort(  
        function(a, b) {  
            return distance(home,a)-distance(home,b);  
        }  
    );  
    // locations sorted: pub, shops, library

        或者也可以由远到近的距离排序。

    1
    2
    3
    4
    5
    6
    locations.sort(  
        function(b, a) {  
            return distance(home,a)-distance(home,b);  
        }  
    );  
    // locations sorted: pub, shops, library

        或者根据字母顺序来对地点排序。

    1
    2
    3
    4
    5
    6
    7
    8
    locations.sort(  
        function(a, b) {  
            if (a.name < b.name) return -1;  
            if (a.name > b.name) return 1;  
            return 0;  
        }  
    );  
    // locations sorted: library, pub, shops

        基于javascript的数组排序,我们可以很容易的开发出可以重复使用、可用于任何对象、对象属性的排序方法。从这点上来说,javascript的排序比其他语言的更加灵活。

    同分类推荐文章

    1. translateZ() (2026-06-25 21:18:56)
    2. translateY() (2026-06-25 21:17:56)
    3. translateX() (2026-06-25 21:16:01)

    查看更多 前端 文章 →

    建议继续学习

    1. JQuery实现Excel表格呈现 (累计阅读 48,349)
    2. 深入理解Javascript之执行上下文(Execution Context) (累计阅读 18,404)
    3. 从输入 URL 到页面加载完成的过程中都发生了什么事情? (累计阅读 15,933)
    4. 图片动态局部毛玻璃模糊效果的实现 (累计阅读 14,848)
    5. 天朝第二代身份证号码的验证机制 (累计阅读 14,762)
    6. HTML 5 的data-* 自定义属性 (累计阅读 14,349)
    7. 分享一个JQUERY颜色选择插件 (累计阅读 14,223)
    8. 什么是全栈工程师? (累计阅读 14,038)
    9. 快速排序(Quicksort)的Javascript实现 (累计阅读 11,735)
    10. 7 天打造前端性能监控系统 (累计阅读 11,187)