为什么这个全局变量不会在数组中更新？答案

【问题标题】：Why won't this global variable update in array?为什么这个全局变量不会在数组中更新？
【发布时间】：2020-08-20 05:39:03
【问题描述】：

我正在用 Javascript 制作一个小型 webapp。除了一件可能很简单的事情外，我让所有事情都正常工作。我有 2 个全局变量必须保持全局，因为稍后我必须在其他函数中使用它们：

var staffmembername;

var data = {
  "personaldata": [{
      "name": staffmembername,
      "location": "Iowa"
    },
    {
      "name": "Cynthia",
      "location": "California",
    }
  ]

};

“data”数组使用“stafmembername”变量。 'stafmembername' 变量将其值更改为选定的选项值。正如您所看到的，感谢带有警报的测试。数组中的变量似乎仍未定义。

其余代码：

document.getElementById("confirmchoice").onclick = function() {

  var e = document.getElementById("staffmember");
  pickedname = e.options[e.selectedIndex].text;
  document.getElementById("nr1").value = pickedname;
  staffmembername = document.getElementById("nr1").value;
  alert(staffmembername);

  document.getElementById("h3tl").innerHTML = "name:" + data.personaldata[0].name + "<br>"
  + "location: " + data.personaldata[0].location;

}

如果我将变量放在函数中，它就可以工作，但是我的其他函数将无法工作。那么有没有办法在保持两个变量全局的同时更新数组中的变量？

JSFIDDLE

【问题讨论】：

这能回答你的问题吗？ Is JavaScript a pass-by-reference or pass-by-value language?
你试图引用一个原始值，这是 javascript 不支持的（尽管 ES2015 添加了 getter，这会起作用）。

标签： javascript arrays function variables global

【解决方案1】：

staffmembername 在初始化data 时被评估，因为它是按值传递的。所以它在data 中的值永远不会改变。您可以将data 包装在一个函数中。 staffmembername 将在您每次调用该函数时进行评估，而不仅仅是在初始化时：

var staffmembername;

var data = function () {
   return {
    "personaldata": [{
      "name": staffmembername,
      "location": "Iowa"
    },
    {
      "name": "Cynthia",
      "location": "California",
    }
   ]
  };
 }
};

然后像这样使用它：

data().personaldata[0].location

您也可以使用staffmembername 的对象。

var staffmembernameObject = {};

var data = [{
  personaldata: [{
    name: staffmembernameObject,
...
staffmembernameObject.data = document.getElementById("nr1").value;

并像这样使用它： data.personaldata[0].name.data

【讨论】：

【解决方案2】：

发生这种情况是因为您的数据对象已经创建并且其中的 name 属性没有再次更新。您可以通过调用方法来制作数据对象，这将采用最新的值。

function getData() {
    return {
        "personaldata": [{
            "name": staffmembername,
            "location": "Iowa"
            },
            {
            "name": "Cynthia",
            "location": "California",
            }
        ]
    };
}

看到这个Fiddle

另一种选择是将staffmembername 设为对象并更新其值，这样您就可以访问更新的对象。

var staffmembername = {value: ''};

var data = {
  "personaldata": [{
      "name": staffmembername,
      "location": "Iowa"
    },
    {
      "name": "Cynthia",
      "location": "California",
    }
  ]

};

document.getElementById("confirmchoice").onclick = function() {
  var e = document.getElementById("staffmember");
  pickedname = e.options[e.selectedIndex].text;
  document.getElementById("nr1").value = pickedname;
  staffmembername.value = document.getElementById("nr1").value;
  alert(staffmembername);
  document.getElementById("h3tl").innerHTML = "name:" + data.personaldata[0].name.value + "<br>" + "location: " + data.personaldata[0].location;


}

看到这个Fiddle

【讨论】：