函数返回值

关于函数，还有一个重要的概念需要讨论——返回值。有些函数不返回有意义的值，而另一些则返回。理解它们的返回值、如何在代码中使用它们以及如何使函数返回有用的值非常重要。我们将在下面介绍所有这些内容。

先决条件	对 HTML 和 CSS 的基本了解，JavaScript 入门，函数——可重用的代码块。
目标	了解函数返回值，以及如何使用它们。

什么是返回值？

返回值顾名思义——函数在执行完毕后返回的值。你已经多次遇到过返回值，虽然你可能没有明确地思考过它们。

让我们回到一个熟悉的例子（来自本系列的上一篇文章）

const myText = "The weather is cold";
const newString = myText.replace("cold", "warm");
console.log(newString); // Should print "The weather is warm"
// the replace() string function takes a string,
// replaces one substring with another, and returns
// a new string with the replacement made

replace() 函数在 myText 字符串上调用，并传递两个参数

要查找的子字符串（'cold'）
要替换它的字符串（'warm'）

当函数完成（执行完毕）时，它会返回一个值，该值是一个新的字符串，其中进行了替换。在上面的代码中，此返回值的结果保存在变量 newString 中。

如果你查看replace() 函数的 MDN 参考页面，你会看到一个名为返回值的部分。了解和理解函数返回的值非常有用，因此我们尽可能地包含这些信息。

有些函数不返回值。（在这些情况下，我们的参考页面将返回值列为void 或undefined。）例如，在displayMessage() 函数（我们在上一篇文章中构建的）中，调用函数时不会返回任何特定值。它只是让一个框出现在屏幕上的某个位置——就这么简单！

通常，返回值用于函数作为某种计算中的中间步骤。你想要得到最终结果，这涉及一些需要由函数计算的值。函数计算完值后，它可以返回结果，以便将其存储在变量中；你可以将此变量用在计算的下一阶段。

在自己的函数中使用返回值

要从自定义函数返回一个值，你需要使用return 关键字。我们最近在random-canvas-circles.html 示例中看到了这一点。我们的 draw() 函数在 HTML<canvas> 上绘制 100 个随机圆圈

function draw() {
  ctx.clearRect(0, 0, WIDTH, HEIGHT);
  for (let i = 0; i < 100; i++) {
    ctx.beginPath();
    ctx.fillStyle = "rgb(255 0 0 / 50%)";
    ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
    ctx.fill();
  }
}

在每次循环迭代中，都会调用 random() 函数三次，分别为当前圆圈的x 坐标、y 坐标和半径生成一个随机值。random() 函数接受一个参数——一个整数——并返回一个介于 0 和该数字之间的随机整数。它看起来像这样

function random(number) {
  return Math.floor(Math.random() * number);
}

这可以写成：

function random(number) {
  const result = Math.floor(Math.random() * number);
  return result;
}

但第一个版本写起来更快，更紧凑。

每次调用函数时，我们都会返回计算结果 Math.floor(Math.random() * number)。此返回值出现在调用函数的位置，代码继续执行。

因此，当你执行以下操作时

ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);

如果三个 random() 调用分别返回 500、200 和 35 的值，那么该行实际上将像这样运行：

ctx.arc(500, 200, 35, 0, 2 * Math.PI);

该行上的函数调用将首先运行，它们的返回值将替换函数调用，然后才执行该行本身。

主动学习：我们自己的返回值函数

让我们尝试编写一些包含返回值的自己的函数。

从 GitHub 上创建一个function-library.html 文件的本地副本。这是一个简单的 HTML 页面，包含一个文本<input> 字段和一个段落。还包含一个<script> 元素，我们在其中存储了对这两个 HTML 元素的引用，存储在两个变量中。此页面允许你在文本框中输入一个数字，并在下面显示与之相关的不同数字。

在两个现有行下面的 <script> 元素中添加一些有用的函数

function squared(num) {
  return num * num;
}

function cubed(num) {
  return num * num * num;
}

function factorial(num) {
  if (num < 0) return undefined;
  if (num === 0) return 1;
  let x = num - 1;
  while (x > 1) {
    num *= x;
    x--;
  }
  return num;
}

squared() 和 cubed() 函数相当明显——它们返回作为参数传递给它们的数字的平方或立方。factorial() 函数返回给定数字的阶乘。

通过在现有函数下面添加以下事件处理程序，包含一种方法来打印有关在文本输入中输入的数字的信息

input.addEventListener("change", () => {
  const num = parseFloat(input.value);
  if (isNaN(num)) {
    para.textContent = "You need to enter a number!";
  } else {
    para.textContent = `${num} squared is ${squared(num)}. `;
    para.textContent += `${num} cubed is ${cubed(num)}. `;
    para.textContent += `${num} factorial is ${factorial(num)}. `;
  }
});

保存代码，在浏览器中加载它，然后试用它。

以下是步骤 3 中 addEventListener 函数的一些解释

通过向 change 事件添加一个监听器，每当文本输入中触发 change 事件时，此函数就会运行——也就是说，当在文本 input 中输入一个新值并提交时（例如，输入一个值，然后通过按 Tab 或 Return 取消输入焦点）。当此匿名函数运行时，input 中的值将存储在 num 常量中。
if 语句在输入的值不是数字时打印一条错误消息。该条件检查表达式 isNaN(num) 是否返回 true。isNaN() 函数测试 num 值是否不是数字——如果是，它返回 true，如果不是，它返回 false。
如果该条件返回 false，则 num 值是一个数字，并且该函数在段落元素中打印出一句话，说明该数字的平方、立方和阶乘值。该语句调用 squared()、cubed() 和 factorial() 函数来计算所需的值。

注意：如果你无法使示例正常工作，请将你的代码与GitHub 上的完成版本进行比较（查看其在线运行），或者向我们寻求帮助。

现在轮到你了！

在这一点上，我们希望你能尝试编写一些自己的函数，并将它们添加到库中。数字的平方根或立方根怎么样？或者给定半径的圆的周长？

一些关于函数的额外提示

看看在函数中编写错误处理的另一个示例。通常，最好检查所有必要的参数是否已验证，以及所有可选参数是否提供了一些默认值。这样，你的程序将不太可能抛出错误。
考虑创建函数库的想法。随着你在编程生涯中的不断前进，你会发现自己一遍又一遍地做着同样的事情。创建一个自己的实用函数库来执行这些操作是一个好主意。你可以将它们复制到新的代码中，甚至可以将它们应用到任何需要它们的 HTML 页面。

深入了解函数——一个详细的指南，涵盖了更多关于函数的高级信息。
JavaScript 中的回调函数——一种常见的 JavaScript 模式是将一个函数作为参数传递给另一个函数。然后在第一个函数内部调用它。这超出了本课程的范围，但在不久的将来值得学习。

函数返回值

什么是返回值？

在自己的函数中使用返回值

主动学习：我们自己的返回值函数

现在轮到你了！

测试您的技能！

结论

另请参见