JavaScript 集合分别用sort和选择排序算法来排序

效果图：

针对集合的分数进行了排序

下面看代码：

引用了jquery-1.10.2.js

html代码：

<body style="position:absolute;top:0px;right:0px;left:0px;bottom:0px;width:100%;height:100%;margin: 0px; padding: 0px;">
    <div style="max-width: 100%;overflow: hidden;">
        <b style="padding:0px 100px;">排序前：</b>
        <div id="oldDiv" style="height:230px;width:400px;border:1px solid #000;margin:0px 100px;"></div>
        <br />
        <div style="height:50px;width:100%;padding:0px 100px;">
            <div style="width:250px;float:left;">排序类型：<label><input type="radio" checked="checked" name="sortType" id="sort1" value="1"/>升序</label>
                <label style="margin-left:10px;"><input type="radio"  name="sortType" id="sort2" value="2" />降序</label></div>
            <input type="button" style="width:100px;height:45px;margin-left:100px;" onclick="sortData1()" value="sort排序"/>
            <input type="button" style="width:200px;height:45px;margin-left:100px;" onclick="sortData2()"  value="选择排序算法排序" />
        </div>
        <br />
        <b style="padding:0px 100px;">排序后：</b>
        <div id="newDiv" style="height:230px;width:400px;border:1px solid #000;margin:0px 100px;"></div>
    </div>
</body>

js代码：

var arr = [
            { name: '李白', sex: '男', fraction :90},
            { name: '张飞', sex: '男', fraction: 80 },
            { name: '亚瑟', sex: '男', fraction: 75 },
            { name: '黄忠', sex: '男', fraction: 60 },
            { name: '李元芳', sex: '男', fraction: 95 },
            { name: '鲁班', sex: '未知', fraction: 96 },
            { name: '孙悟空', sex: '男', fraction: 99 },
            { name: '露娜', sex: '女', fraction: 97 },
            { name: '凯', sex: '男', fraction: 55 }, ];
        $(function () {          
            for (var i = 0; i < arr.length; i++) {
                $('#oldDiv').append('<div>姓名：' + arr[i].name + ' 性别：' + arr[i].sex + ' 分数：' + arr[i].fraction + '</div>');
            }
        });

        function sortData1() {
            function sortid(a, b) {
                if (document.getElementById('sort1').checked) {
                    return  a.fraction - b.fraction;//升序
                }
                else {
                    return b.fraction - a.fraction;//降序
                }
            }
            var html = '';
            arr.sort(sortid);
            for (var i = 0; i < arr.length; i++) {
                html+='<div>姓名：' + arr[i].name + ' 性别：' + arr[i].sex + ' 分数：' + arr[i].fraction + '</div>';
            }
            $('#newDiv').html(html);
        }

        function sortData2() {       
            var len = arr.length;
            for (var i = 0; i < len; i++) {          
                index = i;
                for (var j = i + 1; j < len; j++) {
                    if (document.getElementById('sort1').checked) {
                        //升序                     
                        if (arr[j].fraction < arr[index].fraction) {
                           index = j;
                        }
                    }
                    else {
                        //降序
                        if (arr[j].fraction > arr[index].fraction) {

                            index = j;
                        }
                    }
                }
                if (index!=i) {
                    temp = arr[i];
                    arr[i] = arr[index];
                    arr[index] = temp;
                }              
            }
            var html = '';      
            for (var i = 0; i < arr.length; i++) {
                html += '<div>姓名：' + arr[i].name + ' 性别：' + arr[i].sex + ' 分数：' + arr[i].fraction + '</div>';
            }
            $('#newDiv').html(html);
        }

整个页面的代码：

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <title>集合排序</title>
    <script type="text/javascript">
        var arr = [
            { name: '李白', sex: '男', fraction :90},
            { name: '张飞', sex: '男', fraction: 80 },
            { name: '亚瑟', sex: '男', fraction: 75 },
            { name: '黄忠', sex: '男', fraction: 60 },
            { name: '李元芳', sex: '男', fraction: 95 },
            { name: '鲁班', sex: '未知', fraction: 96 },
            { name: '孙悟空', sex: '男', fraction: 99 },
            { name: '露娜', sex: '女', fraction: 97 },
            { name: '凯', sex: '男', fraction: 55 }, ];
        $(function () {          
            for (var i = 0; i < arr.length; i++) {
                $('#oldDiv').append('<div>姓名：' + arr[i].name + ' 性别：' + arr[i].sex + ' 分数：' + arr[i].fraction + '</div>');
            }
        });

        function sortData1() {
            function sortid(a, b) {
                if (document.getElementById('sort1').checked) {
                    return  a.fraction - b.fraction;//升序
                }
                else {
                    return b.fraction - a.fraction;//降序
                }
            }
            var html = '';
            arr.sort(sortid);
            for (var i = 0; i < arr.length; i++) {
                html+='<div>姓名：' + arr[i].name + ' 性别：' + arr[i].sex + ' 分数：' + arr[i].fraction + '</div>';
            }
            $('#newDiv').html(html);
        }

        function sortData2() {       
            var len = arr.length;
            for (var i = 0; i < len; i++) {          
                index = i;
                for (var j = i + 1; j < len; j++) {
                    if (document.getElementById('sort1').checked) {
                        //升序                     
                        if (arr[j].fraction < arr[index].fraction) {
                           index = j;
                        }
                    }
                    else {
                        //降序
                        if (arr[j].fraction > arr[index].fraction) {

                            index = j;
                        }
                    }
                }
                if (index!=i) {
                    temp = arr[i];
                    arr[i] = arr[index];
                    arr[index] = temp;
                }              
            }
            var html = '';      
            for (var i = 0; i < arr.length; i++) {
                html += '<div>姓名：' + arr[i].name + ' 性别：' + arr[i].sex + ' 分数：' + arr[i].fraction + '</div>';
            }
            $('#newDiv').html(html);
        }
    </script>
</head>
<body style="position:absolute;top:0px;right:0px;left:0px;bottom:0px;width:100%;height:100%;margin: 0px; padding: 0px;">
    <div style="max-width: 100%;overflow: hidden;">
        <b style="padding:0px 100px;">排序前：</b>
        <div id="oldDiv" style="height:230px;width:400px;border:1px solid #000;margin:0px 100px;"></div>
        <br />
        <div style="height:50px;width:100%;padding:0px 100px;">
            <div style="width:250px;float:left;">排序类型：<label><input type="radio" checked="checked" name="sortType" id="sort1" value="1"/>升序</label>
                <label style="margin-left:10px;"><input type="radio"  name="sortType" id="sort2" value="2" />降序</label></div>
            <input type="button" style="width:100px;height:45px;margin-left:100px;" onclick="sortData1()" value="sort排序"/>
            <input type="button" style="width:200px;height:45px;margin-left:100px;" onclick="sortData2()"  value="选择排序算法排序" />
        </div>
        <br />
        <b style="padding:0px 100px;">排序后：</b>
        <div id="newDiv" style="height:230px;width:400px;border:1px solid #000;margin:0px 100px;"></div>
    </div>
</body>
</html>

JavaScript 集合排序

JavaScript 集合分别用sort和选择排序算法来排序

猜你喜欢