如何打造栩栩如生的数字动物园：创建动物对象和数组

2024-03-10 22:19:19

打造栩栩如生的数字动物园：用 JavaScript 创建动物对象和数组

引言

踏入一个神奇的世界，在那里数字动物栩栩如生，欢迎来到我们的动物园之旅。在这个激动人心的旅程中，我们将深入探究如何使用 JavaScript 创建动物对象和对象数组，让你的虚拟动物园生机勃勃。准备好掌握构建逼真且迷人动物世界的秘诀了吗？那就让我们开始吧！

打造动物对象：塑造动物实体

动物对象是构成动物园基石的组成部分。每个对象都包含动物的名称、性别和物种，这些属性赋予了每个动物独特的身份。我们使用构造函数来定义动物对象的蓝图，就像一个模具，它规定了动物属性并提供了创建新动物实例的机制。

动物园居民：一个容纳动物对象的数组

为了管理不断壮大的动物群，我们创建一个全球数组来存储这些动物对象。这个数组就好比一个虚拟动物园，让我们轻松添加、跟踪和展示每只动物。

添加动物：将新居民带入动物园

现在，我们已经准备好让动物入住我们的动物园了。我们创建了一个 addAnimal() 函数，它将把动物信息从用户输入中提取出来，创建一个新的动物对象，并将其推送到动物园数组中。

动物展示：让动物闪耀

最后，我们需要一种方法来展示我们动物园中令人惊叹的居民。我们将创建一个函数，它将把存储在动物园数组中的所有动物作为无序列表显示在页面上。

JavaScript 代码片段

以下是创建动物对象和对象数组的关键 JavaScript 代码片段：

// 动物对象构造函数
function Animal(name, gender, species) {
  this.name = name;
  this.gender = gender;
  this.species = species;
}

// 全局动物数组
let animals = [];

// 添加动物函数
function addAnimal() {
  // 从用户输入中获取动物信息
  const name = ...
  const gender = ...
  const species = ...

  // 创建一个新的动物对象
  const animal = new Animal(name, gender, species);

  // 将动物对象推送到数组中
  animals.push(animal);

  // 更新输出以显示新添加的动物
  displayAnimals();
}

// 展示动物函数
function displayAnimals() {
  // 遍历动物数组并创建无序列表
  let output = "<ul>";
  for (let animal of animals) {
    output += `<li>${animal.name} - ${animal.gender} - ${animal.species}</li>`;
  }
  output += "</ul>";

  // 更新页面以显示动物列表
  document.getElementById("result").innerHTML = output;
}