用Javascript中的对象填充数组答案

【问题标题】：Filling an array with objects in Javascript用Javascript中的对象填充数组
【发布时间】：2014-02-08 12:09:27
【问题描述】：

目前，我在用我在代码中称为athlete 的对象填充我在代码中称为input 的数组时遇到问题。称为athlete 的对象是使用其他几个数组实例化的。我在这篇文章中附加了一个 jsfiddle 链接，它基本上是一个具有相同问题的简化版本。我知道逻辑可能看起来是多余的，但那是因为这个例子是必要的（实际的逻辑将与用户输入一起工作）。

我的问题是我正在用 new Athlete 对象填充数组，但我无法访问数组中对象的特定属性。

我是处理对象的新手，所以我很感激有关如何使这项工作的任何建议。我添加了最后一行代码来显示我的输入数组。

var input = new Array();
var girl=[1,1,1,1];
var boy = [1,1,1,1];
var balleyscore = [100,400,320,50];
var boyHeight = [72,68,65,75];
var girlHeight=[60,57,65,55];
var boyAge = [19,32,22,25];
var girlAge = [20,15,32,18];
//the above are all generate from user inputs
// they go into the object constructor below
function athlete(girl, boy,balleyscore, height, age){
this.girl=girl;
this.boy=boy;
this.balleyscore=balleyscore;
this.height=height;
this.age = age;
};
function insertToObjectArray()
{  
  var j=0;                
  var i=0;  //insert all our data into one array of the load object
    for(j = 0; j < girl.length;j++)
    {
      input[j]= new athlete(true,false,balleyscore[j],girlHeight[j],girlAge[j]);
    }
    for(j = girl.length; j <=girl.length+boy.length;j++)
    {
      input[j]= new athlete(false,true,0,boyHeight[i],boyAge[i]);
      i++;
    }
};
insertToObjectArray();

document.getElementById("demo").innerHTML=input;

http://jsfiddle.net/qC5j4/1/

【问题讨论】：

I cannot access a specific property of an object in the array. 不足以调试程序。 :(
您要访问哪个属性？究竟是什么不符合您的预期？
我需要能够访问每个属性
不起作用的是我的数据没有正确存储到运动员对象的属性中。例如，如果您输出 input[1].age 它是未定义的
你的对象[运动员]有什么属性？

标签： javascript arrays object constructor

【解决方案1】：

要访问数组输入中对象的属性：

input[0].age

这将允许您访问第一个运动员的年龄

也可以这样访问：

input[0]['age']

无论哪种方式，它们都会显示 20 作为数组中第一个运动员的年龄。

在调试器中通过 console.log(input) 检查它，然后你就可以使用数据结构了。

例如：

document.getElementById("demo").innerHTML=input[0].age;

【讨论】：

【解决方案2】：

不太确定您的问题，在这里我更新了您的小提琴以通过添加行来显示运动员的高度属性

output[j]= input[j].height

fiddle

【讨论】：

为什么我不能只使用 input[j].height 显示高度？
我需要能够访问这些属性以进行以后的计算，将属性放回另一个数组是违背创建对象的目的。
你可以这样做，在你的小提琴中你有一个你写到屏幕上的对象数组，所以你显示了“对象”，我只是将输出到屏幕更改为 Object.property以便显示该属性

【解决方案3】：

你的运动员对象应该是例如：

function athlete(age)
{
  this.age = age;
}

var item = new athlete(10);
item.age;//10

【讨论】：

【解决方案4】：

你可以这样显示身高和年龄：

var output = "";
for(var i = 0, length = input.length; i !== length; i++) {
    output += "height: "+input[i].height + ", age: " + input[i].age + "<br />";
}
document.getElementById("demo").innerHTML=output;

还有一个小错误。使用

j < girl.length+boy.length

而不是

j <=girl.length+boy.length

【讨论】：

无论如何，这是一个危险的结构。而是使用 for(i=0; i

【解决方案5】：

您可以通过数组索引和属性名称访问您的对象。将此行 document.getElementById("demo").innerHTML=input 更改为此代码（列出 ul#demo 中的所有对象 sex 和 balleyscore）：

for (var i=0; i<input.length; i++) {
    var node = document.createElement('li'),
        txt = document.createTextNode(
            (input[i].girl? 'girl' : 'boy') + ' ' + input[i].balleyscore);
    node.appendChild(txt);
    document.getElementById("demo").appendChild(node);
}

html:

<p><ul id="demo"></ul></p>

FIDDLE

浏览器控制台对于调试目的非常有用。尝试在创建对象后添加此行并在控制台中检查您的数组：

insertToObjectArray();
console.log(input);     // output input array to console

【讨论】：