原型对象和对象数组

Question

如果这个标题没有意义，让我详细说明一下。

我有两个对象，一个称为区域，一个称为敌人。

每个区域都有自己的敌人，所以我为每个区域制作了敌人原型。

接下来，我对每个区域原型做了一个array.push();功能，因此如果用户单击按钮，他们将看到他们基本上可以探索的"区域"列表。

给我错误的主要部分是如果我尝试任何功能，例如alert(areas[0].enemies[0].name);

如何使用按钮显示特定的敌人名称？

请不要查询

function area(name, enemies) {
this.name = name;
this.enemies = enemies;
}
function enemy(name, type) {
this.name = name;
this.type = type;
}
var cave = new area("Cave", {
bat: new enemy("Bat", "Flying"),
snake: new enemy("Snake", "Ground"),
});
var forest = new area("Forest", {
bear: new enemy("Bear", "Animal"),
coyote: new enemy("Coyote", "Wolf"),
});
areas = [];
areas.push(cave, forest);
var thatBtn = document.getElementById('thatBtn'),
display = document.getElementById('display');
thatBtn.addEventListener('click', function() {
for (i = 0; i < areas.length; i++) {
var li = document.createElement('li'),
liBtn = document.createElement('button');
liBtn.textContent = areas[i].name;
li.appendChild(liBtn);
display.appendChild(li);
liBtn.addEventListener('click', function() {
for (j = 0; j < areas.length; j++) {
if (areas[j].name == event.target.textContent) {
alert(areas[j].name);
for (k = 0; k < Object.keys(areas[j].enemies).length; k++) {
alert(areas[j].enemies[k].name);
}
}
}
});
}
});
<button id="thatBtn">click here</button>
<ul id="display">
</ul>

Answer 1

它给你一个错误，因为areas[0].enemies不是一个数组——它是一个对象。

{
bat: new enemy("Bat", "Flying"),
snake: new enemy("Snake", "Ground"),
}

将其更改为

for(var key in areas[j].enemies) {
alert(areas[j].enemies[key].name);
}

Answer 2

enemies

是一个对象而不是数组，所以你需要遍历keys并从那里而不是从索引中获取，只是用它更新了您的代码段，但是代码可以更好。

function area(name, enemies){
this.name = name;
this.enemies = enemies;
}
function enemy(name, type){
this.name = name;
this.type = type;
}
var cave = new area ("Cave", {
bat: new enemy("Bat", "Flying"),
snake: new enemy("Snake", "Ground"),
});
var forest = new area ("Forest", {
bear: new enemy("Bear", "Animal"),
coyote: new enemy("Coyote", "Wolf"),
});
areas = [];
areas.push(cave, forest);
var thatBtn = document.getElementById('thatBtn'),
display = document.getElementById('display');
thatBtn.addEventListener('click', function(){
for(i=0; i < areas.length; i++){
var li = document.createElement('li'),
liBtn = document.createElement('button');
liBtn.textContent = areas[i].name;
li.appendChild(liBtn);
display.appendChild(li);

liBtn.addEventListener('click', function(){
for(j=0; j < areas.length; j++){
if (areas[j].name == event.target.textContent){
alert(areas[j].name);
var keys = Object.keys(areas[j].enemies);
for(k=0; k < Object.keys(areas[j].enemies).length; k++){
alert(areas[j].enemies[keys[k]].name);
}
}
}
});

}
});

<button id="thatBtn">click here</button>
<ul id="display">
</ul>

Answer 3

将敌人添加为数组，无需在对象中使用"命名键">

function area(name, enemies){
this.name = name;
this.enemies = enemies;
}
function enemy(name, type){
this.name = name;
this.type = type;
}
var cave = new area ("Cave", [
new enemy("Bat", "Flying"),
new enemy("Snake", "Ground"),
]);
var forest = new area ("Forest",[ 
new enemy("Bear", "Animal"),
new enemy("Coyote", "Wolf"),
]);
areas = [];
areas.push(cave, forest);
var thatBtn = document.getElementById('thatBtn'),
display = document.getElementById('display');
thatBtn.addEventListener('click', function(){
for(i=0; i < areas.length; i++){
var li = document.createElement('li'),
liBtn = document.createElement('button');
liBtn.textContent = areas[i].name;
li.appendChild(liBtn);
display.appendChild(li);

liBtn.addEventListener('click', function(){
for(j=0; j < areas.length; j++){
if (areas[j].name == event.target.textContent){
alert(areas[j].name);

for(k=0; k < Object.keys(areas[j].enemies).length; k++){
alert(areas[j].enemies[k].name);
}
}
}
});

}
});

<button id="thatBtn">click here</button>
<ul id="display">
</ul>

Answer 4

您的主要问题在这里：

for(k=0; k < Object.keys(areas[j].enemies).length; k++){
alert(areas[j].enemies[k].name);
}

表达式Object.keys(areas[j].enemies)返回对象属性数组，但随后您尝试使用k而不是属性名称循环访问对象。

由于Object.keys返回一个数组，因此您可以使用数组方法，因此将循环更改为：

Object.keys(areas[j].enemies).forEach(function(name) {
alert(areas[j].enemies[name]);
});

您有一个次要问题，即您没有声明循环中使用的计数器(i、j和k(，因此它们在代码运行时成为全局变量。声明它们如下：

for (var i=0; i < areas.length; i++) {