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循環相比，該語法更易於閱讀。