JavaScript队列Dequeue方法异常：单次出队多节点，变量赋值不符预期

执行队列的Dequeue（出队）操作并赋值给变量时，出现两个异常：

• 变量x预期等于队首节点的内容2，但实际得到的是包含3至10的队列对象
• 出队操作本应仅移除单个节点，却一次性移除了8个节点

JavaScript代码 #

var Node = function(_content) { // 创建节点对象
  this.content = _content; // 节点存储的内容
  this.next = null; // 指向下一个节点的指针
  this.last = null; // 指向上一个节点的指针
  this.ID = null;
}

function Queue() {
  this.top = null; // 队列头部
  this.bottom = null; // 队列尾部
  this.length = 0; // 队列长度初始化为0
  this.ID = 0; // 初始化ID，避免NaN问题

  this.toString = function() { // 将队列内容转为字符串
    var str = "";
    var node = this.top;
    while (node != null) {
      str += node.content;
      node = node.next;
    }
    return str;
  }

  this.enqueue = function(_content) { // 入队操作：添加节点到队列尾部
    var newNode = new Node(_content);
    if (this.length === 0) {
      this.top = this.bottom = newNode;
    } else {
      this.bottom.next = newNode;
      this.bottom = newNode;
    }
    this.ID++;
    this.length++;
    return this;
  }

  this.dequeue = function() { // 出队操作：移除队列头部节点
    if (!this.top) return null; // 队列为空时返回null
    const removedContent = this.top.content; // 保存要移除的节点内容
    if (this.top === this.bottom) { // 队列只剩一个节点
      this.top = null;
      this.bottom = null;
    } else {
      this.top = this.top.next;
    }
    this.ID--;
    this.length--;
    return removedContent; // 返回被移除的节点内容，而非队列本身
  }

  this.getLength = function() {
    return this.length
  }
  this.peek = function() {
    return this.top && this.top.content;
  }
  this.hasElements = function() {
    return this.length > 0;
  }
  this.topElem = function() { // 修正参数冗余问题
    return this.top?.content;
  }

  this.getID = function() { // 修正参数冗余和错误访问
    return this.ID;
  }
}

function main() { // 按钮点击触发的主函数
  var n = parseInt(document.getElementById("value").value); // 转为数字类型
  var q1 = createQ1(n);
  var q2 = new Queue();

  printQueue(q1, 0, 1);
  printQueue(q2, 0, 2);
  sieveAlgorithm(q1, q2);
}

function createQ1(n) { // 创建初始队列q1
  var myQueueOne = new Queue();
  for (let i = 2; i <= n; i++) { // 用let声明局部变量i，避免全局污染
    myQueueOne.enqueue(i);
  }
  return myQueueOne;
}

function printQueue(qList, itr, qnumber) { // 打印队列内容到页面
  var string = "";
  if (qnumber == 1) {
    string = `Iteration ${itr}: Q1 = ${qList}`;
  } else {
    string = `  Q2 = ${qList}`;
  }
  var header = document.createElement("h3");
  var t;
  if (qnumber == 1) {
    header.id = `itr${itr}`; // 简化属性设置
    t = document.createTextNode(string);
    header.appendChild(t);
    document.getElementById("output").appendChild(header);
  } else {
    document.getElementById(`itr${itr}`).innerHTML += string;
  }
}

function sieveAlgorithm(q1, q2) {
  var counter = 1;
  var x = q1.dequeue();
  q2.enqueue(x);
  document.getElementById("output2").innerHTML = `出队的内容：${x}`;
  printQueue(q1, 1, 1);
  printQueue(q2, 1, 2);
}

HTML代码 #

<input type="textbox" id="value" value="10" />
<input type="button" id="push" value="Add N" onclick="main()" />

<br><br><br>
<p id="output"></p>
<p id="output2"></p>

1. Dequeue方法返回值错误：原代码中dequeue方法返回队列对象本身（return this），而非被移除的节点内容，导致x拿到整个队列，后续将队列传入enqueue引发异常。修复后改为返回被移除节点的content。
2. 全局变量污染：createQ1中的for循环未声明i，导致i成为全局变量可能引发逻辑异常，修复后用let声明局部变量i。
3. ID初始化缺失：原Queue构造函数中this.ID未初始化，首次自增后变为NaN，修复后初始化为0。
4. 冗余参数与错误访问：topElem和getID方法存在冗余参数和错误属性访问，已修正。

内容的提问来源于stack exchange，提问作者Pops