打印数组时 JavaScript 未定义结果答案

【问题标题】：JavaScript Undefined Result While Printing An Array打印数组时 JavaScript 未定义结果
【发布时间】：2014-04-04 03:02:32
【问题描述】：

我是 Web 开发的原始 JavaScript 方面的新手，所以我决定学习。我知道编程的基础知识，但我遇到了一些我似乎无法解决的问题。在 JavaScript 中玩数组时，我想创建一个函数来打印所有内容，所以我创建了这样的东西。

<!DOCTYPE html>
<html>
<head>
    <title> Learning JavaScript </title>
<script>
    var names = new Array("Connor <br />", "Shane <br />", "Ty <br />", "Brandon <br />");

    function printArray (){
        for(x=0; x < names.length; x++)
            document.write(names[x]);
    }

</script>
</head>

<body>
    <script>
        document.write(printArray());
    </script>
</body>
</html>

它会打印出名称，但在名称之后还有另一段名为“未定义”的文本。看起来像这样。

Connor 
Shane 
Ty 
Brandon 
undefined

我已经厌倦了在 for 循环中围绕一堆移动条件而无处可去。我认为对我来说，理解为什么存在“未定义”以及在我实际做一个项目时如何在未来避免这些情况会很棒。任何帮助都会很棒。谢谢:)

【问题讨论】：

undefined 位是调用printArray 时返回的值。将document.write(printArray()); 行替换为printArray();
另外，避免document.write
您的代码中有 2x document.write，第一个（在您的函数中）执行写入操作，而另一个执行写入操作：1: 执行 (printArray()) 和 write .... 好吧... undefined 导致什么都写不出来。

标签： javascript arrays loops for-loop

【解决方案1】：

这一行：

document.write(printArray());

正在使用document.write() 打印函数printArray() 的返回值。您的函数按照您的预期打印名称数组，但实际上并没有返回值，因此您的外部调用获取 undefined 并打印出来。如果您在printArray() 的最后一行添加类似return "someString"; 的内容，您会看到这种情况；

其实你只需要

<body>
    <script>
        printArray();
    </script>
</body>

我知道这是一个学习练习，但供将来参考 document.write() 并不是很好的练习。使用类似

的方式直接设置文档正文

document.body.innerHTML = "someHTML<br>";

是一种更好的方法。

【讨论】：

哦，谢谢！我使用 JQuery 已经有一段时间了，我认为我需要学习真正的 JavaScript 而不是框架。 YouTube 上的一个教程说如果我想在屏幕上出现一些东西，那么我必须使用 document.write();感谢您这么快回复我！

【解决方案2】：

DEMO

var names = [ "Connor <br>", "Shane <br>", "Ty <br>", "Brandon <br>"];

var html = "";
function printArray (){
   for(var x=0; x < names.length; x++){
      html += names[x];   // Populate string with array values
   }
   document.body.innerHTML = html; // Append string only once
}

printArray();

document.write 是 evil 的一种形式，应该替换为其他方法，例如 innerHTML。

使用 string 表示来保存所有提取的 HTML，并且只附加到所需的元素一次。

Why is document.write considered a "bad practice"?

【讨论】：

document.write 未被弃用。它在 W3C HTML5 和 WHATWG HTML "Living Standard" 的当前版本中。
@RobG ups 是的，我使用了错误的术语，因为您的链接是：!! Warning This method has very idiosyncratic behavior. 我们应该弃用它吗？那是另一个问题。
好的，我想我明白那里发生了什么，感谢您的帮助:)
@ConnorGaunt 没问题。想想我建议的代码的用途。
我会研究一下innerHTML，我一定是在看一套旧的教程。

【解决方案3】：

Roko 编写的内容并将 <br> 从您的数据移动到代码中。

var names = [ "Connor", "Shane", "Ty", "Brandon"];

var html = "";
function printArray (){
   for(var x=0; x < names.length; x++){
      html += names[x] + '<br>';   // Populate string with array values
   }
   document.body.innerHTML = html; // Append string only once
}

printArray();

这样可以更轻松地更改您的 html，例如：

      html += '<p>' + names[x] + '</p>';   // Populate string with array values

【讨论】：

啊，谢谢，我知道从数据中删除中断通常会更好。这样我就可以在其他地方使用这些数据而不会中断。谢谢。
o_O 而不是发布重复的答案，您可以评论已经存在的答案，只需注意：html += names[x] + '<br>';
@RokoC.Buljan：我没想到，但你是对的，对不起。