Question

我正在从头开始创建一个JavaScript表。我正在尝试从数组中打印出一系列值 - 这些将是表头，但对于这个问题，我将它们作为段落。

应该有四个值，但最终会打印五个值。第一个值出现“未定义”，但其他四个值按预期打印出来。这是代码：

<div id="test"></div>
<script>

var headArray = ["Artist", "Album", "Year", "Genre"];

var tableHead = function() {
    var str;
    for (var i = 0; i < headArray.length; i++) {
        str == "";
        str += '<p>';
        str += headArray[i];
        str += '</p>';
        console.log(str);
    }
    return str;
}

var x = document.getElementById('test');
x.innerHTML = tableHead();

    </script>

运行HTML时，文档显示：undefined Artist Album Year Genre。

console.log显示：

"undefined<p>Artist</p>" 
"undefined<p>Artist</p><p>Album</p>" 
"undefined<p>Artist</p><p>Album</p><p>Year</p>" 
"undefined<p>Artist</p><p>Album</p><p>Year</p><p>Genre</p>"

如何防止和/或删除DOM中打印的未定义值？请记住，这只是一个大项目的第一部分（毕竟我正在构建一个表格）。

Answer 1

＆＃34; undefined＆＃34;的原因在你的console.log（）中，你从未初始化str。在for循环的第一行，您有str == ""。这是str的值与空字符串的比较。由于str未初始化，因此返回undefined。

您似乎正在尝试初始化变量，但这应该在for循环之外完成。如果您从str == ""更改为str = ""并在此代码运行后查看<div id="test"></div>，则您只会看到上次迭代的结果。这是因为您每次传递都会将str设置为新字符串。

这是您需要做的。使用此代码，您的console.log也将始终返回先前的迭代。否则，您的最终结果表将只有最后一个标题单元格：

var headArray = ["Artist", "Album", "Year", "Genre"];

var tableHead = function() {
    var str = '';
    for (var i = 0; i < headArray.length; i++) {
        str += '<p>';
        str += headArray[i];
        str += '</p>';
        console.log(str);
    }
    return str;
}

var x = document.getElementById('test');
x.innerHTML = tableHead();

Answer 2

您需要在循环外宣布str，否则会不断重写（以及将==更改为=：

var tableHead = function() {
  var str = "";
  for (var i = 0; i < headArray.length; i++) {
    str += '<p>';
    str += headArray[i];
    str += '</p>';
  }
  return str;
}

Fiddle

Answer 3

javascript需要一些值，即使是空的

 var str="";

Answer 4

更改

str == "";

到

str = "";

并在循环外部初始化变量str

var str="";

for循环的第一个值是未定义的

4 个答案: