Javascript中的自动售货机功能

Question

我对 Javascript 很陌生：我已经随便使用了几个星期了。这是我的第一篇文章，所以如果我不够彻底，我很抱歉，但我认为我一直在下面！

我想创建一个函数 VendingMachine(snack, cash)，它有一个包含 4 个项目及其价格的列表，其中包含 2 个参数，“小吃名称”（小吃）和“插入的现金”（现金）。我已经尝试使列表成为一个对象和一个数组，但数组只取得了半成功，但我相信该对象确实是我想要采取的路径，因为......

当使用带有嵌套数组的数组作为零食列表时，唯一的问题是如果 for() 循环在任何数组中都找不到“零食”值，它会打印“未定义”而不是“抱歉，再试一次。”

使用对象中机器中的项目列表，我想检查该键的“snack ==== object.KEY”和“cash >= VALUE”。我的问题是我不太了解有关对象的语法，而且我看到其他人发布的解释和答案对我来说太抽象了，我现在无法理解，或者是更复杂的循环/问题并且看起来并不真正适用于我的情况。除了这个（我也想不通/没用）之外的所有东西：

 for(var key in objects) {
    var value = objects[key];
}

// Using an array

    function vendingMachine(snack, cash) {
    //declare nested arrays of snacks & costs
    var snacks = [
        ["Espresso", 1],
        ["Cappuccino", 2.50],
        ["Chocolate bar", 2],
        ["Potato Chips", 3.50]
    ]
    //iterate through array to match snack and check funds
    for (var i = 0; i < snacks.length; i++) {
        if (snack === snacks[i][0] && cash >= snacks[i][1]) {
            if (snack === "Potato Chips") {
                console.log("Your " + snack + " have been served");
            } else {
                console.log("Your " + snack + " has been served");
            }
        }
        else if (snack === snacks[i][0] && cash <= snacks[i][1]) {
            console.log("Insufficient funds. Please insert more cash.");
        }
    }
}


// Using an object (incomplete or perhaps just VERY incorrect, I'm aware, hence why I'm here to understand why!)

    function vendingMachine(snack, cash) {
    //declare nested arrays of snacks & costs
    var snacks = {
        "Espresso": 1,
        "Cappuccino": 2.50,
        "Chocolate bar": 2,
        "Potato Chips": 3.50
    }

    if (snack === snacks.hasOwnProperty() && cash >= snacks.key) {
        if (snack === "Potato Chips") {
            console.log("Your " + snack + " have been served");
        } else {
            console.log("Your " + snack + " has been served");
        }
    }
    else if (snack === snacks.hasOwnProperty() && cash <= snacks.key) {
        console.log("Insufficient funds. Please insert more cash.");
    }
    else if (snack != snacks.hasOwnProperty()) {
        console.log(snack + " does not exist. Please try again.") //returns undefined
    }
}

Answer 1

我可能会将列表创建为对象数组，因为当您需要添加有关零食的更多详细信息时，它可以为您提供灵活性。所以列表可能是这样的

const snacks = [
  {
    "name": "Chips",
    "price": 123
  },
  {
    "name": "Drinks",
    "price": 456
  }
];

现在您的 vendingMachine 功能可以非常简单，它会找到匹配的零食和价格。像这样的

function vendingMachine(name, price) {
  const canSnackBeServed = snacks.find(snack => snack.name === name && price >= snack.price);

  if (canSnackBeServed) {
    console.log("Your " + name + " has been served");
  } else {
    console.log("Snack doesn't exist or Insufficient funds.");
  }
}

希望对你有帮助

Answer 2

很难看出你的代码到底出了什么问题；我建议主要问题之一可能是您如何使用snacks.hasOwnProperty()。

Object.hasOwnProperty 接受一个作为键的参数，并返回一个布尔值。因此，在您的示例中，代码可能看起来更像snacks.hasOwnProperty(snack)，它将检查snacks 对象是否具有snack 属性。

如何存储数据取决于您，并且您已经非常接近能够让它发挥作用。需要注意的一点是snacks.key 将尝试获取snacks 的key 属性，这可能不是您想要在此处执行的操作。相反，像snacks[snack] 这样的东西可能更合适。 You can use either dot notation or square bracket notation to get properties of objects.

---

说了这么多，这里有一些代码可以说明一些新概念，希望不要太抽象。不用太担心arrow functions；它们与常规函数基本相同，只是语法不同。

我在下面设置的内容将允许您拥有一个通用函数getSnack，它将确定应该使用哪个函数来获取正确的零食数据。这意味着您不必担心在使用时以哪种方式存储零食数据。

从那时起，代码真的和你的很相似；我们这里的另一个概念是array destructuring，这是一个有趣的学习，并且可以节省一点语法。

希望对您有所帮助，如有任何问题，请随时提出。

const snacks = {
  "Espresso": 1,
  "Cappuccino": 2.50,
  "Chocolate bar": 2,
  "Potato Chips": 3.50
};

const snacksArray = [
  ["Espresso", 1],
  ["Cappuccino", 2.50],
  ["Chocolate bar", 2],
  ["Potato Chips", 3.50]
];

const getSnackFromArray = (array, itemName) => array
  .find(x => x[0] === itemName)

const getSnackFromObject = (snackDataObject, itemName) => (
  snackDataObject.hasOwnProperty(itemName)
    ? [itemName, snackDataObject[itemName]]
    : undefined
)

const getSnack = (data, itemName) => Array.isArray(data)
  ? getSnackFromArray(data, itemName)
  : getSnackFromObject(data, itemName)
  
const vendingMachine = (snack, cash) => {
  const snackData = getSnackFromObject(snacks, snack);
  
  if (snackData === undefined) {
    console.log(snack + " does not exist. Please try again.")
    return;
  }
  
  const [snackName, cost] = snackData;
  
  if (cash >= cost) {
    console.log("Your " + snack + " have been served")
  } else {
    console.log("Insufficient funds. Please insert more cash.")
  }
}

vendingMachine('Espresso', 1.1)
vendingMachine('Espresso', 1)
vendingMachine('Espresso', 0.9)
vendingMachine('Expresso', 0.9)

Answer 3

 function vendingMachine(snack, cash) {
//declare nested arrays of snacks & costs
var snacks = {
    "Espresso": 1,
    "Cappuccino": 2.50,
    "Chocolate bar": 2,
    "Potato Chips": 3.50
}

if (snacks.hasOwnProperty(snack) && cash >= snacks[snack]) {
    if (snack === "Potato Chips") {
        console.log("Your " + snack + " have been served");
    } else {
        console.log("Your " + snack + " has been served");
    }
}
else if (snacks.hasOwnProperty(snack) && cash <= snacks[snack]) {
    console.log("Insufficient funds. Please insert more cash.");
}
else if (snack != snacks.hasOwnProperty(snack)) {
    console.log(snack + " does not exist. Please try again.") //returns undefined
}

}

Answer 4

我使用一些现代 javascript 更新了您的自动售货机并让它返回零钱。

function vendingMachine(snack, cash) {
    const snacks = [
        { name: 'Espresso', price: 1 },
        { name: 'Cappuccino', price: 2.50 },
        { name: 'Chocolate', price: 2 },
        { name: 'Potato', price: 3.50 }
    ];

    const selected_snack = snacks.find(item => item.name === snack);

    if (selected_snack) {
        if (selected_snack.price === cash) {
            return `Your ${snack} have been served`;
        }
        else {
            if (selected_snack.price > cash) {
                return `Insufficient funds. Please insert more cash.`;
            }
            else {
                return `Your ${snack} have been served. Here is your $${cash - selected_snack.price} change.`;
            }
        }
    }

    else {
        return `${snack} does not exist. Please try again`
    }
};

console.log(vendingMachine('Espresso', 12));

首先，我们将零食转换成一个对象数组，每个对象都有一个name 和一个price 键。

接下来，我们使用Array.find() 方法在零食列表中搜索相关零食的名称。该函数将返回单个对象，如果您希望多个结果符合某个条件，请改用Array.filter()。

因此，如果我们有匹配项，我们可以说if (selected_snack)，其计算结果为true，否则如果没有匹配项，则selected_snack 将是undefined，所以基本上是一种不那么冗长的说法if (selected_snack !== undefined)。

函数的其余部分几乎是不言自明的，我所做的唯一更改是我没有在函数内部进行控制台日志记录，而是使用了 return 语句。

如果您想知道那些看起来很奇怪的 ${} 东西是什么，请查看 Template Literals，它使用起来非常简单方便，因此您不必编写像 "Your " + snack + " have been served" 这样的丑陋代码。

希望对您有所帮助，如果您有任何问题，请告诉我。