为什么函数外的数组变量会导致我的 JavaScript 列表应用出现问题？答案

【问题标题】：Why does array variable outside of function cause issues for my JavaScript list app?为什么函数外的数组变量会导致我的 JavaScript 列表应用出现问题？
【发布时间】：2018-11-03 18:48:30
【问题描述】：

以下 JavaScript 列表应用程序允许用户通过 JS 推送方法在单击按钮时将项目输入到数组中。然后使用 DOM 方法将项目附加到无序列表中。示例 #1 在函数中包含数组变量，并将单个项目正确附加到单个列表元素。但是，当在示例 #2 中的函数之前放置数组变量时，会出现第一项正确附加的情况，但再次单击以添加第二项会导致新项和前一项（重复）都附加到一个新的列表元素。为什么在函数之前包含数组变量时，前一项会重新附加到新的列表元素中？请参阅下面的示例。非常感谢您的反馈！

示例 #1 JS：

<script>
  function add(){
    var array = [];
    var task = document.getElementById("task").value;
    array.push(task);

    var text = document.createTextNode(array);
    var elem = document.createElement("li");
    elem.appendChild(text);
    document.getElementById("myUl").appendChild(elem);
  };
</script>

示例 #1 HTML：

<input id="task">
<button onclick="add()">add</button>
<ul id="myUl"></ul>

示例 #2 JS：

<script>
var array = [];

  function add(){
    var array = [];
    var task = document.getElementById("task").value;
    array.push(task);

    var text = document.createTextNode(array);
    var elem = document.createElement("li");
    elem.appendChild(text);
    document.getElementById("myUl").appendChild(elem);
  };
</script>

示例 #2 HTML：

<input id="task">
<button onclick="add()">add</button>
<ul id="myUl"></ul>

【问题讨论】：

标签： javascript arrays list push

【解决方案1】：

您的示例 2 与您的示例 1 完全相同。

但很可能，您不打算在第二个示例中的函数内声明数组变量。在这种情况下，函数外部的数组实际上保存了用户输入的所有任务的列表。

此外，createTextNode 接受一个字符串，而不是一个数组作为参数。当您传递一个数组时，它会将任务数组转换为逗号分隔的字符串并附加到列表中。

因此，在您的 add() 函数中，仅将最后添加的项目传递给 createTextNode 方法，例如

document.createTextNode(array[array.length - 1])

来到您的第一个示例，它不会将输入保存在您的内存中，因为数组变量在函数内部声明，并初始化为空数组 - 每次调用函数时，即添加任务时.

【讨论】：

在答案的后半部分，您是否建议最好将数组变量放在函数的外部以避免每次调用函数时重新初始化数组？
顺便说一句，在函数中删除重复的数组变量并添加 array.length - 1 作为文本节点是有效的。赞赏！
谢谢。最好将数组变量放在函数之外，这样它就可以作为应用程序的数据存储。您稍后可能希望将其发布到服务器，或在应用程序的其他部分使用它。这确保了模型（数据）与视图（用户界面）的分离。

【解决方案2】：

在示例 2 中，array 变量中有重复项。您可能需要的是：

var array = [];

function add() {
  var task = document.getElementById("task").value;
  array.push(task);

  var text = document.createTextNode(task);
  var elem = document.createElement("li");
  elem.appendChild(text);
  document.getElementById("myUl").appendChild(elem);
  
  console.log(array);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script>
  </script>
</head>

<body>
  <input id="task">
  <button onclick="add()">add</button>
  <ul id="myUl"></ul>
</body>

</html>

另外，我怀疑您是否可以从数组创建文本节点（并且您想要这样）。我认为你提到的是taskvariable。

【讨论】：

删除函数中重复的数组变量并将任务添加为文本节点有效。赞赏！