JavaScript数组管理程序报错排查求助：无法读取undefined的'key'属性

首先，你遇到的Uncaught TypeError: Cannot read properties of undefined (reading 'key')错误，主要源于代码里的索引计算错误、变量名拼写失误以及数组方法使用不当这几个核心问题，我来帮你逐个拆解并修复：

错误点1：变量名拼写与DOM元素获取错误 #

• 你写了lista.appendChild(li)，但之前定义的变量是list，拼写错误会导致找不到DOM元素；还有globalni.splice，正确的数组变量名是globalArray，拼写错误直接导致无法调用数组方法。
• document.querySelectorAll("ul")返回的是所有ul的集合，如果你页面只有一个目标ul，用document.querySelector("ul")直接获取单个元素更稳妥，避免后续处理集合索引的麻烦。

错误点2：数组中间位置索引计算错误 #

当数组长度为奇数时，Math.round(globalArray.length / 2)会得到超出合理范围的索引。比如数组长度是3，3/2=1.5，round后是2，这时候取的是最后一个元素，并非真正的中间位置（应该是索引1）。更准确的中间索引计算可以用Math.floor((globalArray.length - 1)/2)，无论数组长度是奇是偶，都能稳定取到中间偏左的位置，不会出现索引越界导致取到undefined的情况。

错误点3：splice方法使用错误 #

Array.splice()的第一个参数要求是要删除元素的索引值，而不是元素本身。你之前写的globalArray.splice(globalArray[xxx], 1)是把数组元素作为索引传入，逻辑完全错误，应该直接传入计算好的索引值。

修正后的完整代码 #

let globalArray = [];

function add() {
  // 建议给input加id，这样获取更准确，避免表单元素顺序变化导致出错
  var key = document.querySelectorAll("input")[0];
  var manufacturer = document.querySelectorAll("input")[1];
  var model = document.querySelectorAll("input")[2];
  
  // 增加简单非空校验，避免添加空对象
  if (key.value && manufacturer.value && model.value) {
    var car = { 
      key: key.value, 
      manufacturer: manufacturer.value, 
      model: model.value 
    };
    globalArray.push(car);
    // 添加后清空表单，提升用户体验
    key.value = "";
    manufacturer.value = "";
    model.value = "";
    // 清空提示信息
    const msg = document.querySelector("p");
    if (msg) msg.innerHTML = "";
  }
}

function fill(){
  const msg = document.querySelector("p");
  if (globalArray.length === 0){
    msg.innerHTML = "The array is empty.";
    msg.style.color = "red";
  } else {
    // 清空之前的提示
    msg.innerHTML = "";
    // 获取页面上的目标ul元素（假设只有一个）
    const list = document.querySelector("ul");
    // 计算正确的中间索引
    const middleIndex = Math.floor((globalArray.length - 1) / 2);
    const middleCar = globalArray[middleIndex];
    
    // 创建li元素并添加到列表
    const li = document.createElement("li");
    li.innerHTML = `${middleCar.key} ${middleCar.manufacturer} ${middleCar.model}`;
    list.appendChild(li);
    
    // 从数组中移除该元素：splice(索引, 删除数量)
    globalArray.splice(middleIndex, 1);
  }
}

额外优化建议 #

• 给表单的input元素添加id属性（比如id="keyInput"、id="manufacturerInput"），然后用document.getElementById()获取，比querySelectorAll更可靠，避免后续调整表单顺序导致获取错误的输入值。
• 保留输入非空校验，防止用户添加无效的空汽车对象。
• 保留表单清空逻辑，提升用户操作体验。

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