时间戳

首页 > 解决方案 > 可以使用数组作为对象的属性值吗？

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

问题描述

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

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

另外，我很抱歉代码是这样写的。我在移动应用程序上，所以我没有像往常一样让我选择将它写在特定的框中。如果您愿意，这里是 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;

标签： javascriptarraysobjectconstructor

解决方案

在您的 javascript 的第 3 行中，您将成分定义为一个空数组。您可以通过编写来解决此问题

this.ingredients = ingredients

反而。如果你愿意，你也可以使用一个叫做解构的漂亮工具，你可以把它写成

this.ingredients = [...ingredients]

推荐阅读