Question

我开始学习JavaScript并且一直在使用w3schools作为我的资源。作为一个新的孩子，我想问一个简单而简单的问题。通俗地说 - 有什么区别：

此代码

function myFunction() { 
    return "Hello World"
}
document.getElementById('demo').innerHTML = myFunction();

和该代码

function myFunction() {
    document.getElementById("demo").innerHTML = "Hello World!";
}
myFunction();

我要问的原因是：
我正在做一些练习，我通过此代码正确地得到了最终结果，但是当我点击“显示答案”时，显示的代码是代码，这与我的不同

除了我的问题 - 哪一个是实用的，哪一个最适合什么情况？

参考练习link。

Answer 1

根据您描述的代码，

function myFunction() { 
  return "Hello World"
}
document.getElementById('demo').innerHTML = myFunction();

如果myFunction()在其他地方执行（比如附在按钮上），它只会返回字符串“Hello World”。

function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World!";
}
myFunction();

如上所述执行myFunction()时，它会使用id="demo"更改元素的HTML。

完整的代码集，包括每个代码的第四行都会做同样的事情，但每个代码中的函数都会提供完全不同的功能。

Answer 2

它们产生相同的结果，但第一个从函数调用中获取字符串值，而第二个从函数中直接分配值。

Answer 3

Javascript因众多方法而众所周知，可以实现相同的结果。根据您的代码片段，说哪个更实用是非常主观的。它们都非常简单，只是为了证明这个概念（你没有只返回字符串的函数）。

要回答您的评论，请尝试设想更实际的情况。

var isAuth = true; // lets imagine this comes as result of non trivial authentication process
function customGreeting(isAuthenticated) { 
    return isAuthenticated ? "Hello, welcome back" : "Please Sign in to continue";
}
document.getElementById('demo').innerHTML = customGreeting(isAuth);

以上代码使用第一个代码段的方法。有人可能会说它比使用第二种方法（下面的方法）更“优雅”。

var isAuth = true; // lets imagine this comes as result of non trivial authentication process
function customGreeting(isAuthenticated) {
    if(isAuthenticated){
        document.getElementById("demo").innerHTML = "Hello, welcome back";
    }else{
        document.getElementById("demo").innerHTML = "Please Sign in to continue";
    }
}
customGreeting();

如果我们将函数式编程方法放在一边（超出了本次讨论的范围），那么很难说哪种方法更好。

.innerHTML（） - 比较两种方法（javascript基础知识）

3 个答案: