数组sort方法实现列表的正序和倒序

71 阅读 0 评论 47 点赞

我是靠谱客的博主高高黑猫，最近开发中收集的这篇文章主要介绍数组sort方法实现列表的正序和倒序，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

数组sort方法实现列表的正序和倒序

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            margin: 0 auto;
            border: 1px solid #ccc;
            border-spacing: 0;
        }
        
        th,
        td {
            width: 200px;
            text-align: center;
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>分数</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <button>按照分数排序</button>
    <script>
        var tbody = document.querySelector('tbody');
        var btn = document.querySelector('button');
        //sort方法排序
        var GZ2006 = [{
            name: "刘德华",
            age: 20,
            sex: '男',
            score: 99
        }, {
            name: "张学友",
            age: 22,
            sex: '男',
            score: 10
        }, {
            name: "黎明",
            age: 26,
            sex: '男',
            score: 55

        }, {
            name: "梁朝伟",
            age: 60,
            sex: '男',
            score: 20
        }];
        //排序
        // GZ2006.sort(function(a, b) {
        //     return a.score - b.score
        // })
        // console.log(GZ2006);
        //函数的作用：循环当前数组  并将数组中的值渲染到列表中
        function render() {
            var arr = GZ2006.map((item) => {
                return '<tr><td>' + item.name + '</td><td>' + item.age + '</td><td>' + item.sex + '</td><td>' + item.score + '</td></tr>'
            })
            tbody.innerHTML = arr.join('');
        }
        render();
		//标志位  标志的是当前是正序还是倒序
        var flag = true;
        btn.onclick = function() {
            if (flag) {
            //将数组根据score的值改成正序
                GZ2006.sort((a, b) => {
                    return a.score - b.score;
                })
                render();
            } else {
            //将数组根据score的值改成倒序
                GZ2006.sort((a, b) => {
                    return b.score - a.score;
                })
                render();

            }
            flag = !flag;
        }
    </script>
</body>

</html>