無法讓這個簡單的 FOR LOOP 代碼正確運行

Question

我正在嘗試解決一個簡單的咖啡店難題，目標是檢查該項目是否在菜單中，以及在提供每種飲料后我是否有足夠的豆子。

我試圖 console.log 每一行 - 但我仍然不明白為什么它沒有按預期運行 - 不知何故它進入一個 if 條件 - 然后也進入 else .. 我做錯了什么？

謝謝你的時間

  `const coffeeShop = {
  beans: 40,
  drinkRequirements: {
    latte: 10,
    americano: 5,
    doubleShot: 15,
    frenchPress: 12
  },
  makeDrink: function (drinkType) {
    const drinks = Object.keys(coffeeShop.drinkRequirements);
    let drinkCost = coffeeShop.drinkRequirements[drinkType];
    let binz = this.beans;
    for (const key of drinks) {
      if (key === drinkType){
        if (drinkCost <= binz){
          coffeeShop.beans = [binz - drinkCost]
          console.log(`Good news! we have ${drinkType} and we have enough beans')
        }
        else {
          console.log("OUT of beans!")
        }
      } else {
        console.log(`we dont serve ${drinkType}`)
      }
    }
      }
    }
    // tests that wont run correctly:
    coffeeShop.makeDrink("latte"); 
    coffeeShop.makeDrink("americano");
    coffeeShop.makeDrink("filtered"); 
    coffeeShop.makeDrink("doubleShot");
    coffeeShop.makeDrink("frenchPress"); `

`see the console output I'm getting- its going the items again and again...`

`Good news! we have latte and we have enough beans
3main.js:328 Sooory Miss Sara- we dont serve latte
main.js:328 Sooory Miss Sara- we dont serve americano
main.js:322 Good news! we have americano and we have enough beans
2main.js:328 Sooory Miss Sara- we dont serve americano
4main.js:328 Sooory Miss Sara- we dont serve filtered
2main.js:328 Sooory Miss Sara- we dont serve doubleShot
main.js:322 Good news! we have doubleShot and we have enough beans
main.js:328 Sooory Miss Sara- we dont serve doubleShot
3main.js:328 Sooory Miss Sara- we dont serve frenchPress
main.js:325 Sorry Mam- we have frenchPress in the Menu - but we are OUT of 
beans!`

Answer 1

你需要改變：

let binz = this.beans;

至

let binz = coffeeShop.beans;

和

console.log(`Good news! we have ${drinkType} and we have enough beans')

至

console.log(`Good news! we have ${drinkType} and we have enough beans`)

 const coffeeShop = { beans: 40, drinkRequirements: { latte: 10, americano: 5, doubleShot: 15, frenchPress: 12 }, makeDrink: function (drinkType) { const drinks = Object.keys(coffeeShop.drinkRequirements); let drinkCost = coffeeShop.drinkRequirements[drinkType]; let binz = coffeeShop.beans; for (const key of drinks) { if (key === drinkType){ if (drinkCost <= binz){ coffeeShop.beans = [binz - drinkCost] console.log(`Good news. we have ${drinkType} and we have enough beans`) } else { console.log("OUT of beans:") } } else { console.log(`we dont serve ${drinkType}`) } } } } // tests that wont run correctly; coffeeShop.makeDrink("latte"); coffeeShop.makeDrink("americano"); coffeeShop.makeDrink("filtered"); coffeeShop.makeDrink("doubleShot"); coffeeShop.makeDrink("frenchPress");

Answer 2

每次你在這里drinkRequirements object 中的所有鍵時，

for (const key of drinks) {
  if (key === drinkType){
    ...
  } else {
    ...
  }
}

您使用if和else語句中的每個鍵檢查條件。 如果drinkType變量等於您的key的名稱，那么對於循環中的其中一項，這將是true的，但在所有其他情況下都是false的。 您不希望循環中的每個鍵都發生這種情況。

重新思考你的邏輯。 如果您想知道字符串是否與 object 中的鍵匹配，您可以獲取該鍵並檢查它的值。 就像你在這里做的那樣。

let drinkCost = coffeeShop.drinkRequirements[drinkType];

或者使用Object.prototype.hasOwnProperty()方法檢查它。

if (coffeeShop.hasOwnProperty(drinkType)) { ...

或者甚至使用您已經使用Object.keys()制作的鍵數組，並使用Array.prototype.find()方法找到與每種飲料的值匹配的鍵。

const drinkRequirement = drinks.find(drink => drink === drinkType);
if (drinkRequirement !== undefined) { ...

請改用其中之一。 它們中的任何一個都可以，盡管就簡單性而言，第一個選項可能是最簡單的選項。

我不同意@dave 你應該用coffeeshop替換this ，因為這將硬編碼 function 中的咖啡店變量，盡管缺少的反引號是正確的。 this將是對 function 所在的 object 的引用。這意味着如果您更改coffeeshop變量名稱，則引用保持不變。

 const coffeeShop = { beans: 40, drinkRequirements: { latte: 10, americano: 5, doubleShot: 15, frenchPress: 12 }, makeDrink(drinkType) { const drinkRequirement = this.drinkRequirements[drinkType]; if (drinkRequirement) { const beansStock = this.beans; if (drinkRequirement <= beansStock) { this.beans = (beansStock - drinkRequirement); console.log(`Good news. we have ${drinkType} and we have enough beans.`) } else { console.log("OUT of beans.") } } else { console:log(`We dont serve ${drinkType}.`) } } } // tests that wont run correctly; coffeeShop.makeDrink("latte"); coffeeShop.makeDrink("americano"); coffeeShop.makeDrink("filtered"); coffeeShop.makeDrink("doubleShot"); coffeeShop.makeDrink("frenchPress");