函数返回值-是本章中最后一个基础概念,让我们一起来瞧瞧.。有些函数在执行完毕后不会返回一个有用的值,但有些会, 重要的是理解返回的是什么,怎样使用这些值在你的代码中,我们将在下面讨论这些。

前提:

基础的计算机知识, 懂得基础的TML 和CSS, JavaScript 第一步学习, 函数- 可重用的代码块.

目标: 理解什么函数的返回值   , 和如何使用它们

什么是返回值?

返回值听起来就像是函数执行完毕后返回的值。你已经多次遇见过返回值,尽管你可能没有明确的考虑过他们。让我们一起回看一些熟悉的代码:

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

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

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

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

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

在自定义的函数中使用返回值

要从自定义函数返回值,您需要使用…等待它…返回关键字。我们看到了这个行动,最近在我们的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 random(number) {
  return Math.floor(Math.random()*number);
}

这可以写成如下:

function random(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页面包含一个{ { HtmlElement(“input”)} }文本域和一个段落。还有一个{ { HtmlElement(“script”)} }元素所存储的引用HTML元素在两变量。这个小页面允许你在文本框中输入一个数字,并在下面的段落中显示不同的数字。
  2. 让我们添加一些有用的函数。在现有的两行JavaScript下面,添加以下函数定义:
    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. 接下来,我们将包括一种打印输入到文本输入中的数字的信息的方法。在现有函数下面输入以下事件处理程序:
    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事件处理程序运行时更改事件的火灾的文本输入,当一个新的值输入到文本输入,并提交(输入一个值,然后按Tab为例)。当这个匿名函数运行时,输入到的输入的现有值被存储在num变量中。

    接下来,我们进行条件测试——如果输入的值不是数字,则在段落中打印错误消息。测试看是否表达isNaN(num)返回true。我们用isNaN()函数测试num的值是否不是一个数字-如果是这样的话,就返回true,如果不假。

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

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

Note:如果你有麻烦让例子工作,对比GitHub的已完成版检查你的代码(或看它在线运行),或寻求我们的帮助。

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

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

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

结论

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

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

参见

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

文档标签和贡献者

 此页面的贡献者: DaduCC, BadRonmance, yj21world, minmino
 最后编辑者: DaduCC,