如何仅显示输入字段添加到数组中的最新元素？

我正在编写一个程序，允许将零件添加到队列中，并在单独的div标签中显示零件。我只想显示数组中最新添加的元素，以便用户清楚了解当前处理的零件。我曾尝试设置零件显示仅展示特定索引（如[0]），但这只会显示数组的第一个元素，不会被新添加的元素覆盖。

原代码 #

JavaScript

var p = "";

let parts = [{
    "Type": "gear",
    "Width": 2,
    "Length": 5,
    "Thickness": 2
  },
  {
    "Type": "screw",
    "Width": 2,
    "Length": 1,
    "Thickness": 1
  },
  {
    "Type": "tube",
    "Width": 3,
    "Length": 8,
    "Thickness": 2
  },
  {
    "type": "socket",
    "Width": 10,
    "Length": 3,
    "Thickness": 5
  }
];

let queue = [];

function queuePart() {
  p = document.getElementById("parts").value;
  queue.push(p);
  //Display items added to queue.
  document.getElementById("arr").innerHTML = queue;
  if (queue.length > 4) {
    queue.shift();
  }
  //Display newest added item to queue in parts display.
  document.getElementById("disp").innerHTML = queue[0];
}

let compPart = [];

function completePart() {
  p = document.getElementById("parts").value;
  compPart.push(p);
  queue.shift();
  //Display the first few completed parts from queue.
  document.getElementById("compDisp").innerHTML = compPart;

  function removeAllText(element) {
    var nodes = element.childNodes;
    for (var i = 0; i < nodes.length; i++) {
      var node = nodes[i];
      if (node.nodeType == Node.TEXT_NODE) {
        node.parentNode.removeChild(node);
        i--;
      } else if (node.nodeType == Node.ELEMENT_NODE) {
        removeAllText(node);
      }
    }
  }
  var disp = document.getElementById("disp");
  removeAllText(disp);
}

HTML

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Machine Web UI</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="display" id="screen1">
    <h1>Queue Area</h1>
    <pre id="arr">Currently No Parts In Queue</pre>
    <input type="text" id="parts"></input>
    <button type="button" onclick="queuePart()"> Add a Part </button>
  </div>
  <div class="display" id="screen2">
    <h1>Part Display Area</h1>
    <pre id="disp"></pre>
    <button type="button" onclick="completePart()"> Complete Part </button>
  </div>
  <div class="display" id="screen3">
    <h1>Completed Parts Area</h1>
    <pre id="compDisp">Currently no parts completed</pre>
  </div>
  <div class="display" id="screen4">
    <h1>Log Area</h1>
    <pre id="logList"> </pre>
  </div>
  <script>
  </script>
</body>

</html>

问题核心是获取最新元素的方式错误：queue[0]对应队列第一个加入的元素，而最新添加的元素是队列的最后一个，可以通过queue.at(-1)（ES6+语法，直观获取倒数第一个元素）或queue[queue.length - 1]获取。

同时优化队列更新和完成逻辑，避免空值添加，让显示更合理：

修改后的JavaScript代码 #

var p = "";

let parts = [{
    "Type": "gear",
    "Width": 2,
    "Length": 5,
    "Thickness": 2
  },
  {
    "Type": "screw",
    "Width": 2,
    "Length": 1,
    "Thickness": 1
  },
  {
    "Type": "tube",
    "Width": 3,
    "Length": 8,
    "Thickness": 2
  },
  {
    "type": "socket",
    "Width": 10,
    "Length": 3,
    "Thickness": 5
  }
];

let queue = [];

function queuePart() {
  p = document.getElementById("parts").value.trim();
  // 避免添加空字符串
  if (!p) return;
  
  queue.push(p);
  // 用逗号分隔显示队列元素，更美观
  document.getElementById("arr").innerHTML = queue.join(", ");
  
  // 限制队列长度不超过4，超出则移除最早加入的元素
  if (queue.length > 4) {
    queue.shift();
  }
  
  // 显示最新添加的元素（队列最后一个）
  document.getElementById("disp").innerHTML = queue.at(-1);
}

let compPart = [];

function completePart() {
  // 队列为空时不执行操作
  if (queue.length === 0) return;
  
  // 取出队列第一个元素作为已完成零件
  const completedItem = queue.shift();
  compPart.push(completedItem);
  
  // 更新队列显示：队列为空时恢复默认提示
  document.getElementById("arr").innerHTML = queue.length > 0 
    ? queue.join(", ") 
    : "Currently No Parts In Queue";
  
  // 更新已完成零件显示
  document.getElementById("compDisp").innerHTML = compPart.join(", ");
  
  // 更新当前处理零件显示：队列还有元素则显示第一个待处理的，否则清空
  document.getElementById("disp").innerHTML = queue.length > 0 ? queue[0] : "";
}

关键修改点 #

• 添加零件时，用queue.at(-1)获取最新加入的元素，替换原有的queue[0]
• 新增空值判断，避免向队列添加空字符串
• 完成零件时，直接更新disp内容，移除冗余的removeAllText函数
• 队列和已完成零件显示用join(", ")格式化，提升可读性
• 队列为空时恢复默认提示，优化用户体验

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