无法让这个简单的 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

每次在这里循环drinkRequirements 对象中的所有键时，

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

您使用if 和else 语句中的每个键检查条件。如果drinkType 变量等于您的key 值的名称，则循环中的其中一项将是true，但在所有其他情况下将是false。您不希望循环中的每个键都发生这种情况。

重新思考你的逻辑。如果您想知道字符串是否与对象内的键匹配，您可以获取键并检查它的值。就像你在这里做的那样。

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 因为这将硬编码函数中的咖啡店变量，尽管缺少反引号是正确的。 this 将是对函数所在对象的引用。这意味着如果您更改 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");

Answer 2

你需要改变：

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");