jquery数组(排序)

2015年03月27日 javascript 暂无评论 阅读 78 views 次

HTML:

1 <h3>字符串数组排序前</h3>
2 <div id="show5"></div>
3 <h3>排序后</h3>
4 <div id="show6"></div>

jquery:

var animals = ['dog','cat','tiger','pig','bird'];
$('#show5').html(animals.join('<br/>'));

          
animals = animals.sort();
$('#show6').html(animals.join('<br/>'));

61d2652dx74b847a12dec&690

显示结果:

复制代码
字符串数组排序前
dog
cat
tiger
pig
bird
排序后
bird
cat
dog
pig
tiger
复制代码

如果数组换成了数值数组呢?结果会什么怎么样的?

如下:

HTML:

<h3>数值数组排序前</h3>
<div id="show7"></div>
<h3>排序后</h3>
<div id="show8"></div>

jquery:

ar nums = ['12','2','5','36','4'];
$('#show7').html(nums.join('<br/>'));
       
nums = nums.sort();
$('#show8').html(nums.join('<br/>'));

显示结果:

复制代码
数值数组排序前
12
2
5
36
4
排序后
12
2
36
4
5
复制代码

很明显,数值数组最后的排序结果不是我们想要的。这是为什么呢?
因为sort()方法排序,是基于ASCII值进行排序的。故它会认为36小于4(因为3的ASCII值小于4的ASCII值)。所以要对排序的sort()方法定义一个比较函数:

jquery:

复制代码
ar nums = ['12','2','5','36','4'];
$('#show7').html(nums.join('<br/>'));

//定义了sort的比较函数
nums = nums.sort(function(a,b){
return a-b;
});

$('#show8').html(nums.join('<br/>'));
复制代码

显示结果:

复制代码
数值数组排序前
12
2
5
36
4
排序后
2
4
5
12
36
复制代码

这才是我想要的结果!

知识点:

1,sort(function(a,b){return a-b;})对传入的一对值进行比较,然后返回的的值为:小于0,大于0,等于0;(大于0交换位置,反之则不)

  * 当小于0时,说明b>a,故b的排序靠后(即不变).

  * 当大于0时,说明a>b,故a的排序靠后.

  * 当等于0时,说明a=b,故不改变排序.

如果对数值数组的值进行降序排序。那么只要把返回的值改为b-a!

个人觉得这个方法包含了排序算法的实现过程

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>jQuery数组和字符串--对象数组排序</title>

    <script type="text/javascript" src="rs/js/jquery.js"></script>

    <script type="text/javascript">

    <!--

    $(

        function()

        {

            var students =[

                {'sid':'ST001','sname':'张三','sage':18},

                {'sid':'ST004','sname':'赵六','sage':23},

                {'sid':'ST002','sname':'李四','sage':42},

                {'sid':'ST003','sname':'王五','sage':35}

            ];

            //表格显示

            $.each(students,

                function(index, value)

                {

                    $('#ia').append('<tr><td>' + value.sid +

                        '</td><td>' + value.sname +

                        '</td><td>' + value.sage + '</td></tr>');

                }

            );

            //按照SID排序

            var sidOrder = students.sort(

                function(a, b)

                {

                    if(a.sid < b.sid) return -1;

                    if(a.sid > b.sid) return 1;

                    return 0;

                }

            );

            $.each(sidOrder,

                function(index, value)

                {

                    $('#ib').append('<tr><td>' + value.sid +

                        '</td><td>' + value.sname +

                        '</td><td>' + value.sage + '</td></tr>')

                }

            );

            //按照SAGE排序

            var sageOrder = students.sort(

                function(a, b)

                {

                    return (a.sage - b.sage);

                }

            );

            $.each(sageOrder,

                function(index, value)

                {

                    $('#ic').append('<tr><td>' + value.sid +

                        '</td><td>' + value.sname +

                        '</td><td>' + value.sage + '</td></tr>')

                }

            );

        }

    );

    //-->

    </script>

  </head>

  <body>

    <h5>未排序对象数组:</h5>

    <table id='ia' border="1"></table>

    <h5>按照SID排序对象数组:</h5>

    <table id='ib' border="1"></table>

    <h5>按照SAGE排序对象数组:</h5>

    <table id='ic' border="1"></table>

  </body>

</html>

给我留言

您必须 登录 才能发表留言!