你好我也许找到了一个解决方案，你可以试试
1.首先我把你所有的代码从showAnimals函数中取出
1.然后我把代码拆分成不同的函数，使其更具可读性
1.删除一些逻辑相同的重复代码
1.最后，我创建了一个函数，在eventListener中实现您的逻辑，并在页面加载时调用它addAnimal(direction)

//Puts everything out of showAnimal()
const animals = { dog: "yellow", cat: "black", fish: "blue", mouse: "gray" };
const colors = Object.keys(animals);
const name = Object.values(animals);

const numOfAnimals = 15;
let num = 0;

//As a global variable, it's accessible everywhere in the scope
var saveData = [];

const displayAnimals = (
  randomText,
  randomColor
  //Remove two unnecassary parameters (randomTextIndex , randomColorIndex)
) => {
  if (num < numOfAnimals - 1) {
    document.getElementById("animals").innerText = `${randomColor}`;
    document.getElementById("animals").style.color = randomText;

    console.log(randomColor);
    console.log(randomText);
  } else {
    console.log(saveData);
  }
};

const selectRandomFeature = (name, colors) => {
  const randomTextIndex = Math.floor(Math.random() * name.length);
  const randomColorIndex = Math.floor(Math.random() * colors.length);

  var randomText = name[randomTextIndex];
  const randomColor = colors[randomColorIndex];

  return [randomText, randomColor, randomTextIndex, randomColorIndex];
};

//Direction can be 'left' or 'right'
const addAnimal = (direction) => {
  const [randomText, randomColor, randomTextIndex, randomColorIndex] =
    selectRandomFeature(name, colors);

  saveData.push({
    text: randomText,
    color: randomColor,
    direction: direction,
  });

  displayAnimals(randomText, randomColor, randomTextIndex, randomColorIndex);

  num++;
};

/*
    In your event listener you have some duplication code
    If condition (randomTextIndex == randomColorIndex) is true or not your doing the same logic
    Also you execute displayAnimals(randomText, randomColor, randomTextIndex , randomColorIndex`; and num++; even if your keydown it's 'r' or 't'
*/
document.addEventListener("keydown", (event) => {
  if (event.key === "r" || event.key == "t") {
    //Ternary operator condition if value else otherValue
    const direction = event.key == "r" ? "left" : "right"; 
    addAnimal(direction);
  }
});

//Call for the first time
addAnimal("right");

希望这个解决方案对你有帮助🧙‍♂️。

当页面加载时，它没有加载，因为该函数仅在eventListener上调用。您可以在eventListener之前调用该函数，并将值保存在数组中。另外，在代码的第49行，您在direction：right处缺少了一个“t”。以下是我更改的代码。请让我知道您对它的看法。

const displayAnimals = (randomText, randomColor, randomTextIndex , randomColorIndex) => {
        if (num < numOfAnimals - 1) {        
            document.getElementById("animals").innerText  = `${randomColor}`;   
            document.getElementById("animals").style.color = randomText;

            console.log(randomColor);
            console.log(randomText);
        } else {
            console.log(saveData)
        }
    }

    const [randomText, randomColor, randomTextIndex , randomColorIndex] = selectRandomFeature(name, colors);

    saveData.push({"text": randomText, "color": randomColor, "direction": randomColorIndex})
    // call function here so it shows when script loads
    displayAnimals(randomText, randomColor, randomTextIndex, randomColorIndex);

    document.addEventListener('keydown', (event) => {
        const [randomText, randomColor, randomTextIndex , randomColorIndex] = selectRandomFeature(name, colors);

        if (event.key === 'r') {            
            if (randomTextIndex == randomColorIndex) {
                saveData.push({"text": randomText, "color": randomColor, "direction":"left"})
            } else {
                saveData.push({"text": randomText, "color": randomColor, "direction":"left"})
            }          
            displayAnimals(randomText, randomColor, randomTextIndex , randomColorIndex);  
            num++;   
        } else if (event.key === 't') { 

            if (randomTextIndex == randomColorIndex) {
                saveData.push({"text": randomText, "color": randomColor, "direction":"right"})
            } else {
                saveData.push({"text": randomText, "color": randomColor, "direction":"right"})
            }   
            displayAnimals(randomText, randomColor, randomTextIndex , randomColorIndex);         
            num++;                        
        }        
    });
}  
showAnimal()