Javascript 中的“返回”有什么作用？

Question

我只是通过互联网上的教程自学了如何编码。我目前正在尝试学习 Javascript，我并没有真正理解“返回”的目的。我在课程结束时制作了一个“石头剪刀布”游戏，使用返回函数。游戏看起来是这样的：

var userChoice = prompt("Do you choose rock, paper or scissors?");
var computerChoice = Math.random();
if (computerChoice < 0.34) {
    computerChoice = "rock";
} else if(computerChoice <= 0.67) {
    computerChoice = "paper";
} else {
    computerChoice = "scissors";
} console.log("Computer: " + computerChoice);

var compare = function(choice1, choice2){
    if(choice1 === choice2){
        return "The result is a tie!";
    }
    else if(choice1 === "rock"){
        if(choice2 === "scissors"){
            return "rock wins";
        }
        else{
            return "paper wins";
        }
    }
    else if(choice1 === "paper"){
        if(choice2 === "rock"){
            return "paper wins";
        }
        else{
            return "scissors wins";
        }
    }
    else if(choice1 === "scissors"){
        if(choice2 === "paper"){
            return "scissors wins";
        }
        else{
            return "rock wins";
        }
    }
};
compare(userChoice, computerChoice);

如果我使用console.log("....")而不是"return"这里，究竟会有什么区别？

Answer 1

根据 W3Schools 的说法，

return 语句停止函数的执行并从该函数返回一个值。

但

console.log 写入浏览器控制台。

换句话说，console.log除非您打开“开发人员工具” ，否则您看不到输出

根据 MDN（更可靠的来源），

当return在函数中调用语句时，该函数的执行将停止。如果指定，则将给定值返回给函数调用者。如果省略表达式，则返回 undefined。以下 return 语句都会中断函数的执行：

return;
return true;
return false;
return x;
return x + y / 3;

但

console.log() 向 Web 控制台输出一条消息。

例如，

function myFunction() {
    return Math.PI;
} 

3.141592653589793当函数被调用时会返回。

但是使用 console.log 不会在网页上显示任何内容（开发人员工具除外）。

Answer 2

在 JavaScript 中，大多数东西都是表达式，并且每个表达式都有一个值。它可以是数字 ( 5)、字符串 ( "Hello, World!")、对象 ( { foo: 'bar' }) 或其他内容，例如正则表达式。

当您使用运算符时，例如choice1 === "rock"，它也是一个表达式，它具有布尔值（true 或 false）。该表达式5 + 3也有一个值。这是8。

当您调用函数时，这也是一个具有值的表达式。例如，该prompt函数具有用户输入的值。这就是您调用时返回的内容prompt(...)。函数调用的值称为该函数的“返回值”。

当你定义自己的函数时，你也可以给它们一个返回值。稍后，当您调用该函数时，您将得到返回值。还记得学校数学课上的函数吗？像f(x) = x * x？f当您使用 进行“调用”时5，则 25 就是该“函数调用”的值：f(5) = 5 * 5 = 25。

现在，让我们定义我们自己的具有返回值的 JavaScript 函数：

function add (a, b) {
  return a + b; // make the sum of a and b the return value of "add"
}

var result = add(5, 3); // store the value of the function call
console.log(result); // should log 8

许多内置 JavaScript 函数都有一个返回值：Math.min()返回传递给它的参数中最小的一个，document.getElementById()返回带有传递给它的 id 的 HTML 元素。

对于某些函数，返回操作的结果没有任何意义。应该是什么结果console.log()？这些函数返回值undefined。当你自己的函数没有return语句时，它们的返回值为undefined。

需要注意的是，函数的执行在遇到 return 语句时停止，这一点非常重要。然后它立即返回到脚本中调用该函数的位置：

function test () {
  console.log('Hello 1');
  return 5; // return to the caller
  console.log('Hello 2'); // will not execute
}

var result = test();
console.log(result); // 5

当你省略后面的值时return ...;，所以你只是说return;，那么返回值也将是undefined。如果您想停止执行而不返回值，可以使用它：

function divide (a, b) {
  return a / b;
}

function printQuotient (a, b) {
  if (b === 0) {
    // the divisor is zero, do nothing
    return;
  }
  
  // divisor is not zero, print the result of the division
  console.log(divide(a, b));
}

printQuotient(10, 5); // prints 2
printQuotient(10, 0); // prints nothing