Javascript循环遍历数组并在.innerhtml中输出答案

【问题标题】：Javascript While Looping Through Array And Outputting in .innerhtmlJavascript循环遍历数组并在.innerhtml中输出
【发布时间】：2014-05-11 16:30:53
【问题描述】：

我是 Javascript 的新手，并且是自学的。我正在尝试设置一个函数，该函数将写入数组AmericanCars 的每个元素，元素之间有一个空格。

我让它工作，所以当我使用.innerHTML=AmericanCars[Index Position] 加上一个不间断空格时，我可以写入数组的一个元素。现在我试图用while 循环遍历它，但我只得到“未定义”的输出。

如何让.innerHTML 写出数组的每个元素，它们之间有一个空格？有没有比使用 While 循环更简单的方法，还是我的 While 循环格式错误。

<html>
    <head>
    </head>
    <body>

        <script language="javascript" type="text/javascript">
        var AmericanCars=["Chevy", "Ford", "Dodge"];
        var JapaneseCars=["Honda", "Toyota", "Subaru"];
        var FavoriteCars=[];

        function ListAmericanCars() {

        var arraycounter = 0; 

        /* Use array counter to set the value that is displayed in innerHTML's square [] brackets */
            while (arraycounter <= AmericanCars.length) {

                document.getElementById('content').innerHTML = AmericanCars[arraycounter] + "&nbsp ";
                arraycounter++;
            }
        }
        </script>

        <p> What Are Your Favorite American Cars?  Answer: 
            <span id="content">______________
            </span>
        </p>

        <button onclick="ListAmericanCars()">
            American Cars Function
        </button>
    </body>
</html>

【问题讨论】：

写得非常漂亮，干得好！

标签： javascript html while-loop

【解决方案1】：

这是个坏主意。当您将数据与innerHTML 一起放置时，浏览器会呈现它。

更好的解决方案是创建一个变量并附加数据：^

var AmericanCars=["Chevy", "Ford", "Dodge"];
var JapaneseCars=["Honda", "Toyota", "Subaru"];
var FavoriteCars=[];

function ListAmericanCars()  {
    var arraycounter = 0; /* Use array counter to set the value that is displayed in innerHTML's square [] brackets */
    var myContent = '';

    while (arraycounter < AmericanCars.length) {
        myContent += AmericanCars[arraycounter] + "&nbsp ";
        arraycounter++;
    }

    document.getElementById('content').innerHTML = myContent;
}

编辑：啊忘记了。不要在你的 while 循环中使用 。那不是一个有效的索引。

【讨论】：

谢谢。我应该用什么来代替
@AdrianPreuss 你并没有真正解释什么，只是简单地说不要这样做或那样......为什么innerHTML不好......？为什么使用< 而不是<=...？我认为@codedigger 解释得最好
@AdrianPreuss 是的，伙计，我可以阅读，但您能阅读您自己的答案吗...？你写It's a bad idea. While you putting Data with innerHTML, the browser rendering it. - 这不是解释，对不起，也完全没有意义......
@AdrianPreuss 此外，Dont use <= in your while loop. Thats not an valid index. - 同样，这没有意义，加号也不正确：1. <= 不是索引，而是运算符，2. 它已验证！ have a read here
@AdrianPreuss 您应该在回答中解释这一点，而不是在评论中，特别是考虑到提问者是初学者。他们不应该仅仅因为你这么说就跟随你的领导，而应该理解为什么......

【解决方案2】：

我认为for 循环在这种情况下会更标准，还可以构建您的内容，然后将其分配给innerHTML。数组索引从0 开始，而不是1，所以你应该使用< 而不是<='，否则你会在循环结束时减一。

function ListAmericanCars() {
    var content = '';
    for (var i = 0; i < AmericanCars.length; i++) {
        content += AmericanCars[i] + "&nbsp ";
    }
    document.getElementById('content').innerHTML = content;
}

【讨论】：

无关紧要。选择哪种方法并不重要。
@AdrianPreuss 同意 100%
我对你的帖子投了赞成票，因为我同意，但我认为值得证明 for 循环在遍历数组时更常用。

【解决方案3】：

数组是从 0 开始的。将其更改为小于，否则最后一个元素将打印 undefined。

while (arraycounter < AmericanCars.length) {
    ...
}

另外，你可以这样做：

document.getElementById('content').innerHTML = AmericanCars.join('&nbsp');

【讨论】：

很好地解释了！只缺少一件小事：编辑最后一行，使其显示为代码（添加 4 个空格）... ;)
.join 是完美且最简单的。另外，我不需要 nbsp。我只是把空格作为 .join(" ").