队列（基于数组）

厉害的成成

已于 2024-04-13 11:02:42 修改

阅读量528

点赞数 14

文章标签：前端

于 2024-04-13 11:02:09 首次发布

本文链接：https://blog.csdn.net/ZLOCP/article/details/137710546

版权

本文介绍了如何使用JavaScript自定义队列，包括enqueue、dequeue、front等方法，并通过击鼓传花游戏示例展示了队列在实际场景中的应用。

摘要由CSDN通过智能技术生成

先进先出只能在前端进行删除操作在后端进行插入操作

队列封装

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    // 自定义队列
    function Queue() {
        var items = []

        // 队列操作的方法
        // enter queue方法
        this.enqueue = function (element) {
            items.push(element)
        }

        // delete queue方法
        this.dequeue = function () {
            return items.shift()
        }

        // 查看前端的元素
        this.front = function () {
            return items[0]
        }

        // 查看队列是否为空
        this.isEmpty = function () {
            return items.length == 0
        }

        // 查看队列中元素的个数
        this.size = function () {
            return items.length
        }
    }

    // 创建队列对象
    var queue = new Queue()

    // 在队列中添加元素
    queue.enqueue("abc")
    queue.enqueue("cba")
    queue.enqueue("nba")

    // 查看一下队列前端元素
    alert(queue.front())

    // 查看队列是否为空和元素个数
    alert(queue.isEmpty())
    alert(queue.size())

    // 从队列中删除元素
    alert(queue.dequeue())
    alert(queue.dequeue())
    alert(queue.dequeue())

</script>
</body>
</html>

队列的应用（击鼓传花）

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>队列</title>
    <script type="text/javascript">
        function Queue() {
            //1.添加数组
            this.items = [];
            //2.添加元素
            Queue.prototype.enqueue = function (element) {
                this.items.push(element)
            }
            //3.删除元素
            Queue.prototype.dequeue = function () {
                return this.items.shift()
            }
            //4.查看第一个元素
            Queue.prototype.front = function () {
                return this.items[0];
            }
            //5.判断队列是否为空
            Queue.prototype.isEmpty = function () {
                return this.items.length == 0;
            }
            //6.查看元素个数
            Queue.prototype.size = function () {
                return this.items.length;
            }
            //7.队列内容转换成字符串形式
            Queue.prototype.toString = function () {
                var resultstring = ""
                for (var i = 0; i < this.items.length; i++) {
                    resultstring = resultstring + this.items[i] + ' '
                }
                return resultstring;
            }

        }
        var duilie = new Queue();


        /*duilie.enqueue("赵四")
        duilie.enqueue("刘能")
        duilie.enqueue("广坤")
        duilie.enqueue("老七")
        console.log(duilie)
    
        duilie.dequeue()
        console.log(duilie)
    
        alert(duilie.front())
    
        alert(duilie.isEmpty());
    
        alert(duilie.size())
    
        document.write(duilie.toString())*/


        function passgame(namelist, num) {
            //1.创建队列
            var queue = new Queue()
            //2.放人
            for (var i = 0; i < namelist.length; i++) {
                queue.enqueue(namelist[i]);
            }
            //3.不是num的队列删除重新队尾添加
            //是num直接删除
            //num之前的被重新添加，num直接淘汰
            while (queue.size() > 1) {
                for (var i = 0; i < num - 1; i++) {
                    queue.enqueue(queue.dequeue())
                }
                queue.dequeue()
            }

            //4.查看最后一个人；
            alert(queue.size());
            //最后那个人的名字
            var endname = queue.front()
            alert("最后那个人的名字 ：" + endname)
            //查看下标值
            alert(namelist.indexOf(endname))

        }
        namelist = ["tom", "jarry", "susan", "赵四"]
        passgame(namelist, 3)
    </script>
</head>

<body>

</body>

</html>