Question

我无法理解为什么在我设置它们的值并在函数中console.log之后，几个全局变量变得不确定。

要设置练习，我正在尝试制作餐馆菜单构建器。给定一个对象burgerJoint，其中包含餐馆菜单中的信息，如主菜，边和饮料，我试图将值过滤到匹配的组中，将它们映射到一些营销措辞，然后将它们全部打印出来

var burgerJoint = {
  name: 'Americana',
  menuItems: [
    { name: 'burger', type: 'main' },
    { name: 'hotdog', type: '' },
    { name: 'chicken sammich', type: 'main' },
    { name: 'root beer', type: 'drink' },
    { name: 'tuna melt', type: 'main' },
    { name: 'fries', type: 'side' },
    { name: 'iced tea', type: 'drink' },
    { name: 'onion rings', type: 'side' },
  ],
  mainsType: 'Single or double',
  sidesMarketing: ['crisp', 'piping-hot'],
  drinkMarketing: 'Small, medium, or large',
};

/// accessible variables to allow for future changes

var mains = ["aa"];   ///problem variable "aa" for troubleshooting
var sides = ["bb"];   ///problem variable "bb" for troubleshooting
var drinks = ["cc"];  ///problem variable "cc" for troubleshooting

console.log(mains);    ///outputs "aa" as expected

function menuSection(restaraunt, type) {
  section = restaraunt.menuItems.filter(function(food) {
    return food.type === type;
  });
  type === "main" ? mains = mainSection(restaraunt, section) :
  type === "side" ? sides = sideSection(restaraunt, section) :
  type === "drink" ? drinks = drinkSection(restaraunt, section) : 
  alert("Type is invalid");
}

function mainSection(restaraunt, mainsKeyVal) {
  mains = mainsKeyVal.map(function(food) {
    return restaraunt.mainsType + " " + food.name;
  });
  console.log(mains.join("\n"));  ///outputs correct info
}

function sideSection(restaraunt, sidesKeyVal) {
  sides = sidesKeyVal.map(function(food) {
    return restaraunt.sidesMarketing[0] + " " + food.name;
  });
  console.log(sides.join("\n"));  ///outputs correct info
}

function drinkSection(restaraunt, drinksKeyVal) {
  drinks = drinksKeyVal.map(function(food) {
    return restaraunt.drinkMarketing + " " + food.name;
  });
  console.log(drinks.join("\n"));  ///outputs correct info
}

function menuBuilder(restaraunt) {

  console.log(mains);  ///outputs "aa"
  console.log(sides);  ///outputs "bb"
  console.log(drinks); ///outputs "cc"

  menuSection(restaraunt, "main");
  menuSection(restaraunt, "side");
  menuSection(restaraunt, "drink");

  console.log(mains);  ///outputs undefined
  console.log(sides);  ///outputs undefined
  console.log(drinks); ///outputs undefined
}
menuBuilder(burgerJoint);
console.log(mains);  ///outputs undefined
console.log(sides);  ///outputs undefined
console.log(drinks); ///outputs undefined

来自mains，sides内部的drinks引用的三个变量console.log，mainSection和drinkSection，以及sideSection生成所需的输出。在三个menuBuilder函数之前在xxxxSection内引用时，它们会按预期保留其原始值。在其他三个函数之后在console.log内使用menuBuilder时，变量现在未定义。

在Chrome的调试工具中单步执行代码后，每个变量在undefined函数中console.log调用后变为xxxxxSection。是什么导致它们变得不确定？

Answer 1

你有这个：

mains = mainSection(restaraunt, section)

但mainSection没有返回任何内容，因此返回值隐含undefined。

您可以通过从该行删除mains =（以及其他类型的等效行）来解决此问题，但如果从mainSection返回值而不是依赖于闭包，则可能会更好在函数调用之间传递值，例如：

function mainSection(restaurant, mainsKeyVal) {
    return mainsKeyVal.map(function(food) {
        return restaurant.mainsType + " " + food.name;
    });
}

此功能没有任何副作用，只是使用传入的值来计算返回值。

在函数中分配新值后，全局变量变为未定义

1 个答案: