函数返回值

返回值意如其名，是指函数执行完毕后返回的值。你已经多次遇见过返回值，尽管你可能没有明确的考虑过他们。让我们一起回看一些熟悉的代码：

var myText = "I am a string";
var newString = myText.replace("string", "sausage");
console.log(newString);
// the replace() string function takes a string,
// replaces one substring with another, and returns
// a new string with the replacement made

在第一篇函数文章中，我们确切地看到了这一块代码。我们对 myText 字符串调用 replace() 功能，并通过这两个参数的字符串查找，和子串替换它。当这个函数完成（完成运行）后，它返回一个值，这个值是一个新的字符串，它具有替换的功能。在上面的代码中，我们保存这个返回值，以作为newString变量的内容。

如果你看看替换功能 MDN 参考页面，你会看到一个返回值。知道和理解函数返回的值是非常有用的，因此我们尽可能地包含这些信息。

一些函数没有返回值就像 (在我们的参考页中，返回值在这种情况下被列出为空值 void 或未定义值 undefined 。).例如，我们在前面文章中创建的 displayMessage() function , 由于调用的函数的结果，没有返回特定的值。它只是让一个提示框出现在屏幕的某个地方——就是这样！

通常，返回值是用在函数在计算某种中间步骤。你想得到最终结果，其中包含一些值。那些值需要通过一个函数计算得到，然后返回结果可用于计算的下一个阶段。

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

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

在每个循环迭代，random()函数调用了三次，分别生成当前圆的 x 坐标，一个随机值 Y 坐标和半径。random()函数接受一个参数 - 一个整数，返回 0 到这个整数之间的随机数。看起来像这样：

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

这也可以写成下面这样：

function randomNumber(number) {
  var 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);

在运行该行之前，首先运行该行上的函数调用，并用其返回值替换该函数调用。

让我们着手编写具有我们自己的返回值的函数。

1. 首先，从 GitHub 的function-library.html文件复制一份本地副本。这是一个简单的 HTML 页面包含一个 <input> 文本域和一个段落。还有一个 <script> 元素，我们在两个变量中存储了对两个 HTML 元素的引用。这个小页面允许你在文本框中输入一个数字，并在下面的段落中显示不同的数字。

2. 让我们添加一些有用的函数。在现有的两行 JavaScript 下面，添加以下函数定义：

   js

   function squared(num) {
     return num * num;
   }
   
   function cubed(num) {
     return num * num * num;
   }
   
   function factorial(num) {
     var x = num;
     while (x > 1) {
       num *= x - 1;
       x--;
     }
     return num;
   }
   

   squared() 和 cubed() 功能是相当明显的 - 他们的平方或立方的数作为一个参数返回。factorial() 函数返回给定数字的阶乘。

3. 接下来，我们将包括一种打印输入到文本输入中的数字的信息的方法。在现有函数下面输入以下事件处理程序：

   js

   input.onchange = function () {
     var num = input.value;
     if (isNaN(num)) {
       para.textContent = "You need to enter a number!";
     } else {
       para.textContent =
         num +
         " squared is " +
         squared(num) +
         ". " +
         num +
         " cubed is " +
         cubed(num) +
         ". " +
         num +
         " factorial is " +
         factorial(num) +
         ".";
     }
   };
   

   这里我们创建一个onchange事件处理程序，当文本框上面的 change 事件被触发的之后，事件处理程序就会运行 - 就是说，一个新的值被输入到文本框并且被提交（就比如，输入一个值，然后按 Tab）。当这个匿名函数运行时，输入框中的值将被存储在num变量中。

   接下来，我们进行条件测试——如果输入的值不是数字，则在段落中打印错误消息。if 语句判断isNaN(num)表达式是否返回 true。我们用isNaN()函数测试num的值是否不是一个数字 - 如果不是数字，就返回true，否则返回false。

   如果测试返回 false，则数值是一个数字，所以我们在段落元素中打印出一个句子，说明数字的平方、立方体和阶乘是什么。这句话叫 squared()，cubed()，和 factorial() 函数来获得所需的值。

4. 保存你的代码，将其加载到浏览器中，然后尝试。

在这一点上，我们希望你编写一个自己的几个函数，并将它们添加到库中。这个数的平方根或立方根，或一个圆的周长和半径是多少？

这个练习提出了一些重要的观点，除了研究如何使用返回语句之外。此外，我们还有：

• 查看另一个将错误处理写入函数的示例。它是否提供了任何必要的参数通常是一个好主意，另一方面对可选参数提供默认值。这样，你的程序就不太可能出错了。
• 关于创建函数库思想的思考。随着你深入到你的编程生涯，你将开始一次又一次地做同样的事情。这是一个好主意，开始保持你自己的实用工具库，你经常使用 - 你可以把它们复制到你的新代码，甚至只是把它应用到任何你需要的 HTML 页面。

因此，我们让它 - 功能是有趣的，非常有用的，虽然有很多要谈论他们的语法和功能，相当容易理解的正确的文章学习。

如果你有什么不明白的地方，可以再通读一遍，或者联系我们寻求帮助。

• Functions in-depth — 详细介绍更多高级功能相关信息的指南。
• Callback functions in JavaScript — 一个常见的 JavaScript 模式是把一个函数传递给另一个函数作为参数，然后在第一个函数中调用它。这有点超出了这门课的范围，但值得学习很久。

• 上一页
• 概述：创建 JavaScript 代码块
• 下一页