javascript - 如何在javascript中动态增加变量名称？

Question

我正在使用 Node/Express 构建一个简单的食谱应用程序。用户获得一个“新食谱”HTML 表单，他们可以在其中单击“添加成分”按钮，然后根据需要向表单添加任意数量的成分。使用 jQuery，每次单击加号图标时，都会生成新成分的新文本输入:

        var newIngredient = $('#newIngredient').val();

        ingredientCount++;

        //give each ingredient a unique name based on count
        var ingredientID = "ingredient_" + ingredientCount

        // reset input to blank
        $("#newIngredient").val("");

        // add ingredient to list for user to see or edit.
        $("#ingredientsList").append(
           '<input class="form-control" type="text" required 
            name=' + ingredientID + ' value="' + newIngredient + '">')

添加的每种成分都会通过计数器分配一个唯一的名称。这一切都工作正常，当提交表单时我得到:

{
  name: 'Soup',
  ingredient_1: 'carrots',
  ingredient_2: 'salt',
  ingredient_3: 'turnips',
  method: 'Throw all these ingredients together and voila, you have a terrible soup.'
}

在后端，我想获取这些成分中的每一种并将它们添加到“成分”数组中(因为我认为我无法从 HTML 表单发送成分数组)。我显然不想硬编码 ingredients.push(req.body.ingredient_1)、ingredients.push(req.body.ingredient_2) 等...因为每个食谱的成分数量会有所不同。有没有办法增加变量名称？这可能说明了我正在尝试做的事情，尽管我知道这显然行不通:

ingredientsList=[];

var counter=1;

while(req.body.**"ingredient_"+counter**){
    ingredientsList.push(req.body.**'ingredient_'+counter**);
    counter++
}

将动态创建的名称:值对从 HTML 表单传递到 JS 后端的替代想法将受到欢迎，但我也想知道是否可以按照我上面尝试过的方式动态增加参数 - req.body.parameter[i]

谢谢!

Answer 1

您可以动态检查类似的键，只要您确定它们是数字即可。如果可能有ingredient_1和ingredient_3，但没有成分_2，那么您需要删除break语句。

var data = {
  name: 'Soup',
  ingredient_1: 'carrots',
  ingredient_2: 'salt',
  ingredient_3: 'turnips',
  method: 'Throw all these ingredients together and voila, you have a terrible soup.'
}
var ingredientsList=[];
for(var num=1; num<10000;num++){
  if(!data['ingredient_'+num]){break;}
  ingredientsList.push(data['ingredient_'+num]);
}
console.log(ingredientsList);