javascript - 将对象插入全局数组？

Question

我有一个 html 文件，其中包含一个供人填写以接受订单的表单。

我有一个全局数组来存储对象。这些对象包含添加到订单中的商品的名称、价格和数量。

<button type="button" onclick="addToOrder('app2-amount', 'House Salad', '6')">+</button> 

这是调用 addToOrder() 的地方。

函数:

var orderArray = [];

function addToOrder(id, nameIn, priceIn){
if (loggedIn == true){
  var quantityIn = document.getElementById(id).value;
  var totalForThisItem = priceIn*quantityIn;

  var menuObject = {
     name: nameIn,
     price: totalForThisItem,
     quantity: quantityIn
   };

   // Next we must perform a check to see if an object with the same name already exists in the order
   // If it does exist, replace it with this new object.
   if (orderArray.length == 0){
     orderArray.push(menuObject);
   }
   else{
     orderArray.forEach( function (item) {
       if (item.name == menuObject.name){
         item = menuObject;
       }
       else{
         orderArray.push(menuObject);
       }
     });
   }
   console.log("dabs " + orderArray.toString());
   }
    // If user is not logged in:
   else{
   console.log("You are not logged in. Please log in to use this feature.");
    }
 console.log(menuObject);
}

当我打印menuObject时，我认为它会超出范围，被删除。我将它插入到一个全局变量中，我认为它把我搞砸了。

当我开始将不同的菜单项放入数组中时，会发生一些奇怪的事情。在一种情况下，每按一次就会添加 3、6、12、24 等。有点有趣，但我很沮丧。

这里发生了什么？

Answer 1

我认为你稍微误解了 Javascript 中的词法作用域。

var 声明的作用域为功能 block 级别。这意味着即使您的 var 语句位于 if block 内，它的作用域也遍及整个函数，并且在函数退出之前保持定义状态。它们在函数中的任何地方都有效(甚至在声明之前)，因为 hoisting .

如果您使用 ES6 编写，还可以使用 let declarations ，其范围为最近的封闭 block ......在您的情况下，为 if block 。我认为这就是您所期待的行为。

你的另一个问题是合乎逻辑的。每次通过函数时，您都会使用 forEach 遍历数组，然后可能会为数组中的每个现有对象推送一次新对象。这就是为什么数组长度呈几何级数。

如果您的意图是“替换数组中已存在的匹配项，否则将其添加到末尾”，那么有几种方法可以做到这一点。 Array.find是一种选择，但有几种可行的方法。