javascript - 可以使用数组作为对象的属性值吗？

Question

我正在尝试为食谱卡编写 JavaScript。我认为使用对象构造函数是最好的，因为我正在使用相同的标准创建多个配方。我需要使用一个数组来存储成分，但我似乎无法使其工作。唯一会显示的是配方名称，并且数组返回时未定义。

我对 JS 非常陌生，所以请像个 child 一样为我分解事情，同时也要友善:)

另外，我很抱歉代码是这样写的。我使用的是移动应用程序，所以我没有提供像平常一样将其写入特定框中的选项。如果您愿意，这里是 CodePen:https://codepen.io/Nikofem/pen/RwwgGog

这是 HTML 代码:

<div class="recipe-card">
<aside>
    <img src="https://divascancook.com/wp-content/uploads/2015/01/no-bake-engery-bites-peanut-butter-chocolate-healthy-granola-snack-recipe-2.jpg" alt="Granola Engergy Bites" />
</aside>
<article>
    <h2 id="name1"></h2>
    <h4 id="ingredients1"></h4>
    <ul>
        <li><span class="icon icon-users"></span><span>10 - 15</span></li>
        <li><span class="icon icon-clock"></span><span>15 min</span></li>
    </ul>   
</article>
</div>

这是我到目前为止的 JS 代码:

function Recipe(name, ingredients) {
this.name = name;
this.ingredients = [];
}

var recipe1 = new Recipe('Granola Energy Bites', ['1 cup old-fashioned oats', '1/4 tsp salt', '1/4 tsp cinnamon']);

var recipe1Name = recipe1.name;
name1.innerHTML = recipe1Name;

var recipe1Ingredients = recipe1.ingredients[0];
ingredients1.innerHTML = recipe1Ingredients;

Answer 1

在 JavaScript 的第 3 行中，您将配料定义为空数组。您可以通过编写

来解决此问题

this.ingredients = ingredients

相反。如果您愿意，您还可以使用一个名为解构的漂亮工具，并且可以将其编写为

this.ingredients = [...ingredients]