我正在尝试创建一个下拉菜单，通过向它传递一个对象数组，使用香草JavaScript存储餐厅菜单中的项目

我没有收到任何错误，但当我单击下拉菜单时，我希望它显示项目名称和价格

相反，它只显示[object]

我已尝试附加itemList。项[I]但出现错误

TypeError:无法读取未定义的属性“0”

/*

///Food Items 

*/
/*Constructor which stores the items on the menu*/
function Item (item, price) {
    this.item = item;
    this.price = price;
}

var iOne = new Item('Peene Primviera', 14.60);
var iTwo = new Item('Fillet Steak', 20.00);
var iThree = new Item('Fillet Steak', 20.00);



var foodSelection = document.getElementById('menu');
var itemList = [
    {iOne},
    {iTwo},
    {iThree}
];

var itemName = itemList.name;

//Add the Options to the DropDownList.
for (var i = 0; i <= itemList.length; i++) {
    foodSelection.options.add(new Option(itemList[i]));
};

/*
///食品
*/
/*在菜单上存储项目的构造函数*/
功能项目（项目、价格）{
this.item=项目；
这个价格=价格；
}
变量iOne=新项目（'Peane Primviera'，14.60）；
var iTwo=新项目（“鱼片牛排”，20.00）；
var iThree=新项目（“鱼片牛排”，20.00）；
var foodSelection=document.getElementById（'menu'）；
var itemList=[
{iOne}，
{iTwo}，
{iThree}
];
var itemName=itemList.name；
//将选项添加到DropDownList。
for（var i=0；i
ItemList[i]
将返回一个Item对象。您现在希望显示该对象的名称（我认为是Item属性）。因此您有一个Item对象列表，您可以使用数组表示法对其中的元素进行索引。但是，尝试索引
ItemList.Item[i]
没有任何意义，除非ItemList是一个包含数组的对象和item属性。
我想试试这句话：

foodSelection.options.add（新选项（itemList[i].item））；

请注意，这将只显示项目名称。现在您需要将价格附加到项目名称上

foodSelection.options.add（新选项（itemList[i].item+“”+itemList[i].price））；

您还需要更改将对象添加到ItemList数组的方式

var itemList = [
    {iOne},
    {iTwo},
    {iThree}
];

这实质上是说，您需要一个对象数组，其中包含一个Item对象。换句话说，您不希望数组的元素周围有
{}
对象符号指示符

相反，请按如下方式填充阵列：

var itemList = [
    iOne,
    iTwo,
    iThree
];

new Option
需要字符串，您正在传入一个对象。请参考文本

foodSelection.options.add(new Option(itemList[i].item));

如果你想要这个值

var opt = itemList[i]
foodSelection.options.add(new Option(opt.item, opt.price));

之所以存在
[Object Object]
，是因为您将
对象
转换为
字符串
这是通过调用
Object.toString（）
通过defaul返回
[Object Object]
来完成的

代码中存在一些问题，请参见代码段中的注释


/*
///食品
*/
/*在菜单上存储项目的构造函数*/
功能项目（项目、价格）{
this.item=项目；
这个价格=价格；
}
变量iOne=新项目（'Peane Primviera'，14.60）；
var iTwo=新项目（“鱼片牛排”，20.00）；
var iThree=新项目（“鱼片牛排”，20.00）；
var foodSelection=document.getElementById（'menu'）；
var itemList=[
iOne，//你不需要用{}来包围它们
iTwo，
伊特里
];
var itemName=itemList.name；
对于（var i=0；iItem
类的实例放入
{
和
}
（
{iOne}
），这实际上将创建一个新对象，该对象具有一个与变量名（
{iOne}）相同的属性
=>
iOne
是属性的名称），因此没有名为
0
的属性

为了绕过这个问题，只需填充
itemList
数组，而不使用大括号，如下所示：

var itemList = [
    iOne,
    iTwo,
    iThree
];

现在您可以遍历该数组，如下所示：


/*用于存储菜单项的构造函数*/
功能项目（项目、价格）{
this.item=项目；
这个价格=价格；
}
const iOne=新项目（'Peane Primviera'，14.60），
iTwo=新项目（‘肉排’，20.00），
iThree=新项目（'鱼片牛排'，20.00），
foodSelection=document.getElementById（'menu'），
项目列表=[
伊俄涅，
iTwo，
伊特里
];
itemList.forEach（i=>{
const o=document.createElement（'option'）；
o、 价值=i.价格；
o、 textContent=`${i.item}${i.price}$`；
foodSelection.options.add（o）；
})；
这将不起作用：
itemList[i]。由于阵列中的
{iOne}
项不存在此将不起作用：
itemList[i]。由于
{iOne}，项不存在
内部array@empiric你能详细解释一下你的意思吗？这是因为他在数组中声明了iOne作为一个对象，即使它已经是一个对象了吗？@plum0是的，就是这个，所以在循环中你可以通过
itemList[i]访问字符串.iOne.item
，但这没有多大意义，因为必须有一个变量index@empiric非常感谢！我在键入此答案时忽略了一个如此小的概念。进行了相应的编辑。"这里使用@ths你指的是数组的长度？是的，当然，对不起，我的不好！@ths这可能是一个好主意，即使他似乎要开始了，如果我这样做，我也可以谈论
forEach
只是一个性能优化。无论如何，我在回答中使用了
forEach
。谢谢你的提示，我很感激它分配了一个非常有用的nice日