JavaScript - 使用 for 循环时子元素会重复

Question

问题:

我愿意获得一个名为 optionName 的子元素(您可以查看下面的 JSON 数组，以便更清楚地了解发生的情况)，这需要我在其中嵌套一个 for 循环为了得到它。到目前为止，我可以获得；但是，当我尝试将该子元素的值分配给变量(代码部分中的第 5 行)时，就会出现问题，而我正在执行以下 additions += i.optionName 这使得i.optionName 的值被排序(一个接一个，类似于数组)，子元素被累积，这使得出现以下内容:

 Meal : Big Mac
 Options : 
 Normal Ou Maxi ? : Maxi
 Choix du boisson : Fanta Orange
 Choix des frites : Frites steak house
 Category : Menus
 Qty : 1
 Price : 49

 Meal : Chicken McNuggets X6
 Options : 
 //The first block is repeated again which is normal as I used additions +=**
 Normal OR Big ? : Big
 Choix du boisson : Fanta Orange
 Choix des frites : Steak house

 Normal OR Big ? : Normal
 Choix du boisson : Sprite
 Choix des frites : Steak house**
 Category : Menus
 Qty : 1
 Price : 45

简而言之，父元素越多，情况就越糟糕。你可能会说我为什么这样做，答案是因为下面的变量 dishes 在这种特殊情况下它需要是一个字符串!

当前代码:

    let dishes = '';
    let additions = '';

    var msg =  MessageContent.orderedDishes.forEach(function(element) {
      for(var i of element.selectedAdditions){
       additions += i.optionName +
       ' : '
       + i.Name + '\n';
    }

    dishes +=
       'Meal : ' + element.dishName + '\n' +
       'Options : \n' + additions + '\n' +
       'Category : ' +  element.categoryName + '\n' +
       'Qty : ' + element.qty+ '\n' +
       'Price : ' + element.price + '\n\n';
});

这是我尝试迭代的 JSON 数组:

[{
"objectId": "Kakao0MiRE",
"price": 49,
"dishName": "Big Mac",
"categoryName": "Menus",
"selectedAdditions": [{
    "optionName": "Normal Ou Big ?",
    "Name": "Big",
    "Price": 5
}, {
    "optionName": "Drink",
    "Name": "Fanta Orange",
    "Price": 0
}, {
    "optionName": "Fries",
    "Name": "Steak house",
    "Price": 0
}],
"additionalPrice": 5,
"qty": 1
}, {
 "objectId": "kOP90Ld8b9",
 "price": 45,
 "dishName": "Chicken McNuggets X6",
 "categoryName": "Menus",
 "selectedAdditions": [{
    "optionName": "Normal Ou Maxi ?",
    "Name": "Normal",
    "Price": 0
}, {
    "optionName": "Drink",
    "Name": "Sprite",
    "Price": 0
}, {
    "optionName": "Fries",
    "Name": "Frites steak house",
    "Price": 0
}],
 "additionalPrice": 0,
 "qty": 1 }]

Answer 1

您的 additions 变量是在调用 forEach 之外定义和声明的。

当 forEach 迭代时，您将值连接到现有的添加值，但永远不会在每次迭代时将其重置为空字符串。这就是您的数据积累的原因。

您可以通过在 forEach 回调开头将 additions 的值设置为空字符串，或者在内部声明它来解决此问题 forEach 以便每次迭代都以空数组开始。我建议后者:

let dishes = ''; 

var msg = MessageContent.orderedDishes.forEach(function(element) { 
  // declaring your variable here ensures that
  // it is empty at the beginning of the iteration
  // rather than accumulating over all of them:
  let additions = ''; 
  for(var i of element.selectedAdditions){ 
    additions += i.optionName + ' : ' + i.Name + '\n';
  } 
  dishes += 'Meal : ' + element.dishName + '\n'
    + 'Options : \n' + additions + '\n' 
    + 'Category : ' + element.categoryName + '\n'
    + 'Qty : ' + element.qty+ '\n' 
    + 'Price : ' + element.price + '\n\n'; 
});