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

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

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();