Javascript二维数组迭代

Question

有人来了，菜单上有披萨。 问题是，每个人只喜欢某些浇头。 来的人越多，您需要的比萨就越多。 为了帮助您确定应订购的比萨饼数量以及要获得的配料，您将创建一个JavaScript程序。

您的HTML页面应该列出以下人员，他们吃了多少薄片以及他们的浇头偏好。

//硬编码的披萨首选项

该程序应询问谁过来。 输入所有客人后，程序将宣布您需要多少比萨饼，以及您可以为该特定人群选择的配料。 无论将哪些人添加到来宾列表中，此信息都应该是准确的。 如果来访的人不同意浇头，则该程序应指出，您只需要吃纯披萨。

 //Dinner plans assignment var nameSliceTop = []; var totalSlice = 0; var aceptableTopping = ["pepperoni", "bacon", "ham", "pineapple", "onion", "peppers", "extra cheese", "sausage", "olives" , "mushroom", "plain"] nameSliceTop[0] = ["jane", 2, "mushroom", "onion", "peppers", "olives"]; nameSliceTop[1] = ["lisa", 3, "pepperoni", "ham", "pineapple"]; nameSliceTop[2] = ["taylor", 3, "extra cheese", "pepperoni", "sausage", "bacon"]; nameSliceTop[3] = ["chris", 2, "mushroom", "sausage", "bacon", "ham", "onion", "peppers"]; nameSliceTop[4] = ["alyssa", 1, "pepperoni", "bacon"]; nameSliceTop[5] = ["will", 2, "extra cheese", "sausage", "bacon", "onion", "peppers", "olives"]; nameSliceTop[6] = ["jessica", 2, "pepperoni", "bacon", "ham", "pineapple", "onion", "peppers"]; function outputPizza() { for (i = 0; i < 7; i++) { if (document.getElementById(nameSliceTop[i][0]).checked === true) { totalSlice += nameSliceTop[i][1]; } } document.getElementById("dinnerPlansTwo").innerHTML += "You will need " + totalSlice + " slices for your guests." + "<br/>"; totalSlice = 0; for (i = 0; i < 7; i++) { if (document.getElementById(nameSliceTop[i][0]).checked === true) { for(x = 2; x < nameSliceTop.length; x++) { for (y = 0; y < aceptableTopping.length; y++) { if (aceptableTopping[y].indexOf(nameSliceTop[i][x]) == -1) { aceptableToping.splice(y, 1); } } } } } document.getElementById("dinnerPlansTwo").innerHTML += "Your agreeable options include:"; for (z = 0; z < aceptableTopping.length; z++) { document.getElementById("dinnerPlansTwo").innerHTML += " " + aceptableTopping[z] + " "; } } 

 <!-- Dinner Plans assighment --> <p id="dinnerPlans"> Dinnner Plans Assighment: </p> <table> <thead> <tr> <th>Check if attending</th> <th>Name</th> <th>Slices</th> <th>Aceptable Toppings</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" id="jane"></td> <td>Jane</td> <td>2</td> <td>mushroom, onion, peppers, olives</td> </tr> <tr> <td><input type="checkbox" id="lisa"></td> <td>Lisa</td> <td>3</td> <td>pepperoni, ham, pineapple</td> </tr> <tr> <td><input type="checkbox" id="taylor"></td> <td>Taylor</td> <td>3</td> <td>extra cheese, pepperoni, sausage, bacon</td> </tr> <tr> <td><input type="checkbox" id="chris"></td> <td>Chris</td> <td>2</td> <td>mushroom, sausage, bacon, ham, onion, peppers</td> </tr> <tr> <td><input type="checkbox" id="alyssa"></td> <td>Alyssa</td> <td>1</td> <td>pepperoni, bacon</td> </tr> <tr> <td><input type="checkbox" id="will"></td> <td>Will</td> <td>2</td> <td>extra cheese, sausage, bacon, onion, peppers, olives</td> </tr> <tr> <td><input type="checkbox" id="jessica"></td> <td>Jessica</td> <td>2</td> <td>pepperoni, bacon, ham, pineapple, onion, peppers</td> </tr> </tbody> </table> <button onclick="outputPizza()">Submit selected textboxes</button> <p id="dinnerPlansTwo"><br/></p> 

Answer 1

更好的方法可能是将可能的参与者定义为对象，而不是数组：

var people = [{
  name: "jane",
  slices: 2,
  toppings: ["mushroom", "onion", "peppers", "olives"]
}, {
  ...
}];

然后，当您遍历所选人员时，可以添加切片。 遍历每个人之后，您必须对数组进行重复数据删除 ，但这是一种更简洁的方法，每次单击按钮只需执行一次。

此外，您只需要遍历一次 people数组：在每次迭代中，如果选择了person，则将切片添加到 totalSlices变量中，并将人员的打顶首选项添加到 acceptableToppings数组变量中。

如果“可接受的浇头”表示每个人都喜欢浇头，而不仅仅是任何人 ，那么我将使用上面的嵌套for循环：

// Loop through all possible toppings
for (i = 0; i < aceptableTopping.length; i++) {
  // Loop through all people
  for (j = 0; j < people.length; j++) {
    // If any person's topping preferences do NOT include the topping in question, "pop" (remove) it
    if (people[j]["toppings"].indexOf(aceptableTopping[i]) < 0) {
      aceptableTopping.pop(aceptableTopping[i]);
      continue;
    }
  }
}

祝好运！

Answer 2

您的代码中有几个问题。 让我列出来，但在我这样做之前，

这是我的小提琴的链接：jsfiddle.net/6f0ctoco

您的原始代码存在问题：

1. 在jsfiddle中，我收到“未定义outputPizza错误”。 对于您来说可能不是这种情况，但是我不得不通过将函数设置为全局窗口对象window.outputPizza = function outputPizza() { //...来克服它window.outputPizza = function outputPizza() { //...

2. 您在最后一个for循环中输入了acceptableTopping的错字。 拼写与脚本的其余部分不匹配。

3. 您正在使用acceptableTopping.splice() 。 拼接将从acceptableTopping数组中删除项目。 相反，您想将可接受的浇头存储在新数组中。 我将它们存储在currentAcceptableToppings 。

4. 因为您没有正确地跟踪或检查可接受的浇头，所以在outputPizza函数中进行了一些重大更改

   • 我在称为preferences选项的数组中跟踪检查人员的首preferences
   • 对于数组中的每个首选项，我通过对首选项运行过滤器，然后比较filterPreferences和首选项的长度，来检查每个顶部是否可接受

5. 我只使用一次document.getElementById("dinnerPlansTwo").innerHTML来简化输出打印

提示：我使用了Array.forEach，因为与太多的for循环相比，该语法更易于阅读。