运行简易JavaScript卡拉OK队列代码时出现push属性读取错误求助

错误原因分析 #

出现Uncaught TypeError: Cannot read properties of undefined (reading 'push')的核心原因有两个：

1. addNewSinger函数无返回值导致队列变量变为undefined
   第一次调用addNewSinger(singerQueue, 'Some Name')时，进入空队列分支，执行完queue.push后函数没有返回值，默认返回undefined。此时singerQueue被赋值为undefined，第二次调用时inputArray是undefined，queue变量也随之变为undefined，调用queue.push自然触发类型错误。

2. rotateQueue函数中方法名大小写错误
   JavaScript是大小写敏感语言，queue.Push(currentSinger)里的Push应该改为小写的push，否则会因找不到该方法报错。

额外逻辑问题（影响预期输出） #

当前addNewSinger的插入逻辑有误：你想把新用户添加到最后报名者之后，但queue.splice(index, 0, ...)是插入到目标位置的前面，应该改为splice(index + 1, 0, ...)才能实现需求。

修复后的完整代码 #

var queueCounter = 0;
var singerQueue = [];

function rotateQueue(inputArray) {
  let queue = inputArray;
  let currentSinger = queue.shift();
  queue.push(currentSinger); // 修正方法名大小写
  return queue;
}

function addNewSinger(inputArray, newSinger) {
  let queue = inputArray;
  if (singerQueue == undefined || singerQueue.length == 0) {
    queueCounter++;
    queue.push([queueCounter, newSinger]);
    return queue; // 添加返回值，避免队列变量变为undefined
  } else {
    let lastSinger;
    queue.forEach(value => {
      if (value[0] == queueCounter) {
        lastSinger = value;
      }
    });
    if (lastSinger == undefined) {
      return 'ERROR';
    } else {
      let index = queue.indexOf(lastSinger);
      queueCounter++;
      queue.splice(index + 1, 0, [queueCounter, newSinger]); // 修正插入位置到目标项之后
      return queue;
    }
  }
}

singerQueue = addNewSinger(singerQueue, 'Some Name');
singerQueue = addNewSinger(singerQueue, 'Another Name');
singerQueue = rotateQueue(singerQueue);
console.log(singerQueue);
// 输出：[[2, 'Another Name'], [1, 'Some Name']]

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