Question

我是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>

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

Connor 
Shane 
Ty 
Brandon 
undefined

我已经厌倦了在for循环中移动条件并且没有在哪里。我想对我来说理解为什么'未定义'是存在的以及未来我在实际做项目时如何避免这些情况会很棒。任何帮助都会很棒。谢谢:)

Answer 1

<强> 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等其他方法。

使用字符串表示来保存所有提取的HTML并仅附加到所需元素一次。

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

Answer 2

这一行：

document.write(printArray());

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

实际上，您只需要

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

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

之类的东西直接设置文档正文

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

是一种更好的方法。

Answer 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

打印数组时JavaScript未定义的结果

3 个答案: