第十五章 函数基础

函数是一组以名称作为函数名定义的进程。一系列重复多次的任务被放在一起作为一个函数，函数在需要时被调用和使用。在 JavaScript 中，函数也是对象，是 Function 对象。在这里，我们将解释如何在 JavaScript 中定义函数以及如何使用它们。

目录

15-1 定义一个函数
15-2 使用参数将值传递给函数
15-3 将可变值传递给函数后更改函数内的值时的注意事项
15-4 从函数返回值给调用者
15-5 从一个函数返回多个值给调用者
15-6 关于在哪里写函数和函数调用
15-7 讲解函数的对象
15-8 使用函数文字定义函数（匿名函数）

15-1 定义一个函数

要使用函数，我们首先需要定义函数。一个函数描述了它从调用者那里接收到什么值，当它被调用时它做了什么，以及它返回给调用者什么值。在这里，我将解释如何在 JavaScript 中定义函数。

定义一个函数

定义函数的方法有多种，这里我们将通过使用 function 关键字声明函数来解释方法。格式如下。

function 函数名(参数1, 参数2, ...) {
  要执行的过程 1;
  要执行的过程 2;
  ...
  return 返回值;
}

要声明函数，请在函数后指定函数名称。可以指定为函数名的名称与变量相同，使用标识符指定。

参数在函数名称后的 (from) 中指定。如果有多个参数，用逗号（,）分隔。此参数也称为伪参数。如果没有参数，则无需写入任何内容，但即使在那种情况下也必须写入 ( 和 )。

function 函数名(){
  要执行的过程 1;
  要执行的过程 2;
  ...
  return 返回值;
}

在{to}块中描述调用函数时要执行的处理。可以描述一个或多个过程，但是在函数的情况下，即使只有一个过程，也不能省略代表块的{和}。

使用 return 语句将值返回给函数的调用者。retrun 语句后写入的值返回给函数的调用者。执行返回语句时，函数内的处理结束。如果不需要，可以省略 return 语句。

请看下面的示例。

function dispMessage(msg){
  console.log(msg);
}

定义了一个名为 dispMessage 的函数。此函数接收一个参数并将存储在参数中的值打印到功能块内的控制台。

定义一个函数什么都不做。要使用一个函数，你必须调用它。

调用函数

要调用已定义的函数，请编写如下。

函数名(参数, ...);

要调用函数，在描述函数名称后，在 ( 和 ) 之间描述要传递给函数的参数。如果有多个参数，用逗号（,）分隔。此论点也称为实际论点。如果没有参数，则无需写入任何内容，但即使在那种情况下也必须写入 ( 和 )。

関数名();

将函数的返回值存储在变量中时，如下描述 = 运算符左侧的变量和右侧的函数调用。调用函数后，函数返回的值存储在变量中。

let 变量名=函数名（参数，...）；

下图显示了调用函数时指定的参数如何传递给函数，以及函数的返回值如何返回给函数调用者。

请看下面的示例。

function dispHello(){
  console.log('Hello');
  console.log('JavaScript');
}

dispHello();

>> Hello
>> JavaScript

它定义了一个函数dispHello，然后调用该函数。return 语句也被省略，因为该函数没有参数也没有返回值。并且在函数中描述了向控制台输出一个字符串的过程。

您在定义函数后调用它。被调用的函数按顺序执行块中的处理，从而将 Hello 和 JavaScript 打印到控制台。

现在看看带有参数的示例。

function dispTotal(x, y){
  let sum = x + y;
  return sum;
}

let result = dispTotal(3, 4);
console.log(result);
>> 7

result = dispTotal(7, 1);
console.log(result);
>> 8

我们将在另一页上详细解释如何指定参数以及如何使用返回值，所以这里不要太担心。在此示例中，函数接收两个参数并将两个参数相加的结果返回给函数的调用者。函数的调用者用两个值调用函数并接收结果。

一旦定义，一个函数可以被调用任意次数。如果要多次做同一个过程，可以将其定义为一个函数，在需要的时候调用该函数，使程序更容易理解。

以其他方式定义函数

除了使用本页说明的 function 关键字声明函数之外，还有三种定义函数的方法。

(1) 使用Function构造函数定义函数：

let 函数名 = new Function('参数1', '参数2', ..., '要执行的程序');

(2) 使用函数字面量定义函数：

let  函数名= function(参数1, 参数2, ...){
  要执行的程序1;
  要执行的程序2;
  ...
  return 返回值;
};

(3) 使用箭头函数表达式定义函数：

let 函数名 = (参数1, 参数2, ...) => {
  要执行的程序1;
  要执行的程序2;
  ...
  return 返回值;
};

15-2 使用参数将值传递给函数

参数用于在调用函数时将值从调用者传递给函数。函数接收到传递的值并将其存储在参数中描述的变量中后，就可以在函数块内使用了。在这里，我将解释如何在 JavaScript 中使用参数将值传递给函数。

参数的基本用法

我在函数的定义中已经解释过了，但是我会再解释一下函数的参数。参数（形式参数）写在函数定义中函数名之后的 ( 和 ) 之间。写多个参数时，用逗号（,）分隔。

function 函数名（形式参数 1，形式参数 2，...）{
  要执行的操作 1；
  要执行的操作 2；
  ...
  返回返回值；
}

变量在函数端被描述为形式参数。从函数调用方传递的值存储在描述为参数的变量中。

函数调用者写道：在描述要调用的函数的名称之后，在 ( 和 ) 之间描述要传递给函数的参数（实际参数）。写多个参数时，用逗号（,）分隔。

函数名(实际参数1, 实际参数2, ...);

在调用函数的一侧的实际参数中写入一个值或一个表达式。您在调用函数时描述的值将传递给函数。

请看下面的示例。

function dispMessage(msg){
  console.log(msg);
}

dispMessage('Hello');
>> Hello

dispMessage(100);
>> 100

在调用函数时将“Hello”写为参数。调用函数时，传递的值存储在变量 msg 中。函数参数中写入的变量可以在功能块内引用。这次，存储在参数中的值被输出到控制台。

请注意，在 JavaScript 中，没有为函数定义中编写的参数指定数据类型，就像在变量声明的情况下一样。因此，它可以接收任何数据类型的值。在前面的示例中，第一次调用该函数时，字符串“Hello”，下一次调用该函数时，将数字 100 指定为参数。

如果一个函数的调用者和接收者有不同数量的参数

在JavaScript函数中，即使调用函数时写入的值个数和接收值的函数的参数个数不同，也不会出错。例如，如果一个函数被定义为接收两个参数，但在调用该函数时只指定了一个值，那么在函数端引用第二个参数将是未定义的。

请看下面的示例。

function dispProfile(name, old){
  console.log('name : ' + name);
  console.log('old : ' + old);
}

dispProfile('Yuhua', 28);
>> name : Yuhua
>> old : 28

dispProfile('Jiangming');
>> name : Jiangming
>> old : undefined

该函数接收两个参数，name 和 old。第一个函数调用使用两个值调用，但第二个函数调用仅使用一个值。即使在这种情况下，也不会发生错误，并且引用尚未传递值的参数将导致 undefined 。

相反，如果函数被定义为接受两个参数，但你在调用函数时指定了三个值，那么第三个值根本就不会被使用。

请看下面的示例。

function dispProfile(name, old){
  console.log('name : ' + name);
  console.log('old : ' + old);
}

dispProfile('Yuhua', 28);
>> name : Yuhua
>> old : 28

dispProfile('Jiangming', 38, 'Shanghai');
>> name : Jiangming
>> old : 38

该函数接收两个参数，name 和 old。第一个函数调用是用两个值调用的，而第二个函数调用是用三个值调用的。在这种情况下也没有错误，第三个参数在这种情况下并不是特别有用。

• 传递给函数的值存储在一个称为参数的特殊对象中。你可以参考arguments对象来查看调用者传递的所有参数的值，无论函数设置为接受多少个参数。参数在另一页上解释。

为参数设置默认值

如果你在调用函数时写入的值的个数小于函数的参数个数，那么引用一个不包含值的参数会导致 undefined 。在这种情况下，您可以为函数参数设置默认值。

格式如下。

function 函数名（参数1=默认值1，参数2=默认值2 ...){
  ...
}

如果为参数设置默认值，则默认值将替换调用函数时未传递值的任何参数。

请看下面的示例。

function dispOrderPrice(price, count=10){
  console.log('Total = ' + (price * count));
}

dispOrderPrice(80, 14);
>> Total = 1120

dispOrderPrice(120);
>> Total = 1200

为函数的第二个参数设置默认值。如果在调用函数时指定两个值，它们将按原样使用，但如果只指定一个值，第二个参数将包含默认值 10。

如果第一个参数设置了默认值而第二个参数没有设置默认值则不会出错，但是如果在调用函数时只指定一个值，函数会为第一个参数赋值并且第二个参数未定义。

function dispOrderPrice(count=10, price){
  console.log('Total = ' + (price * count));
}

从函数的调用者传递的值按照函数中描述的顺序分配给参数，而不管是否设置了默认值。

描述可变长度参数

在 JavaScript 中，如果在函数中编写参数时在参数前面加上’…’，则元素中将存储一个数组，其中所有从调用者传递的值作为元素。例如，如果调用者指定两个值并调用函数，则参数中将存储一个具有两个元素的数组，如果指定三个值，则参数中将存储一个具有三个元素的数组。带有“…”的参数称为 Rest 参数。

格式如下。

function 函数名(...参数){
  ...
}

调用函数时可以传递任意数量的值作为参数。

请看下面的示例。

function calcSum(...num){
  let sum = 0;
  for (let i = 0 ; i < num.length ; i++){
    sum += num[i];
  }

  return sum;
}

calcSum(1, 2, 3);
>> 6

calcSum(1, 2, 3, 4, 5);
>> 15

该函数将从调用者传来的值按顺序相加，并将结果返回给调用者。参数包含作为数组传递的值，因此您可以通过引用数组的长度属性来检查值的数量。

它也可以与常规参数结合使用。格式如下。

function 函数名(参数1, 参数2, ...参数3){
  ...
}

在这种情况下，函数调用者传递的第一个值存储在参数 1 中，第二个值存储在参数 2 中，其余所有值存储在参数 3 中。始终在末尾写入带有“…”的变量。

15-3 将可变值传递给函数后更改函数内的值时的注意事项

您可以通过在调用函数时将值指定为参数来将值传递给函数。这时，如果你将一个数组或对象作为可变（可变）值传递给函数，如果你在函数中改变了这个值，那么这个改变也会反映在你调用它时指定的值中。。在这里，我们将解释在将可变值传递给 JavaScript 中的函数后更改函数内的值时的注意事项。

将不可变值传递给函数

当使用可变（不可更改的）值（例如指定为参数的数字或字符串）调用函数时，即使函数为参数存储了新值，调用者的值也不会受到影响。是的。

请看下面的示例。

function square(num){
  num = num * num;
  console.log(num);
}

let num = 10;
square(num);
>> 100

console.log(num);
>> 10

调用函数时，将存储数值的变量指定为自变量。在函数方面，在对传递的值进行平方后，它将其存储在一个变量中并将其输出到控制台。即使像这样在函数内的自变量中存储了新值，调用函数时作为自变量指定的变量的值也不会受到影响。

另一方面，当以数组或对象等不可变（可变）值作为参数调用函数时，如果函数更改存储在参数中的值，则调用者的值将被更改。更改也将是反映。

请看下面的示例。

function square(num){
  for (let i = 0 ; i < num.length ; i++){
    num[i] = num[i] * num[i];
  }
  console.log(num);
}

let num = [10, 15, 20];
square(num);
>> [100, 225, 400]

console.log(num);
>> [100, 225, 400]

调用函数时，存储数组的变量被指定为参数。在函数端，将传递的数组的每个元素的值进行平方后，将数组的值输出到控制台。像这样对存储在函数参数中的不可变值的任何更改也会影响调用函数时指定为参数的变量的值。

这是因为调用函数时指定为参数的变量和被调用函数的参数引用的是同一个值。因为它影响了另一个。使用指定为参数的不可变值调用函数时要小心。

如果一个新的值被赋值而不是在函数内部改变值，调用函数时指定为参数的变量和被调用函数的参数在那个时候引用不同的值。因为它只是成为待完成的, 调用函数时指定为参数的变量引用的值不受影响。

15-4 从函数返回值给调用者

可以使用函数内部的 return 语句将值返回给调用者。还有，如果不需要，可以在执行return语句的时候省略返回值，返回给调用者。在这里，我将解释如何在 JavaScript 中将函数的值返回给调用者。

返回值的基本用法

我们在函数的定义中解释了它，但我将再次解释函数的返回值。您可以通过将返回值写入函数定义中的 return 语句的值来向函数的调用者返回一个值。

function 函数名(形式参数1, 形式参数2, ...){
  要执行的处理;
  ...

  return 返回值;
}

将函数的返回值存储在变量中时，如下描述 = 运算符左侧的变量和右侧的函数调用。调用函数后，函数返回的值存储在变量中。

let 变量名 = 函数名(实际参数1, 实际参数2, ...);

请看下面的示例。

function calcArea(radius){
  const area = radius * radius * 3.14
  return area;
}

const area = calcArea(10);
console.log(area);
>> 314

console.log(calcArea(8));
>> 200.96

该函数根据参数的值计算面积并将其作为返回值返回给调用者。注意return语句后面不仅可以写一个值，还可以写一个表达式，所以可以写成下面的结果一样。

function calcArea(radius){
  return radius * radius * 3.14;
}

未指定返回值而执行return语句时

执行return语句时，如果不想返回具体的返回值，可以省略返回值。

function 函数名(形式参数1, 形式参数2, ...){
  要执行的处理;
  ...
  return;
}

如果省略返回值，undefined 将返回给调用者。

当功能块中描述的过程执行到结束时，过程自动返回到函数的调用者，所以不需要在功能块的末尾描述return语句。如果从不执行 return 语句并且到达块的末尾并返回给调用者，也会返回 undefined。

关于没有返回值的return语句的用法，在函数块中执行return语句时，函数块内的处理就此结束，返回给调用者。因此，当您想在功能块的中间终止处理时使用它。

请看下面的示例。

function calsFee(old){
  if (old < 20){
    console.log('20岁以下不可用');
    return;
  }

  if (old > 30){
    console.log('使用费为2000元');
  }else{
    console.log('使用费为1800元');
  }
}

calsFee(25);
>> 使用费为1,800元
calsFee(18);
>> 20岁以下不可用

在本示例中，如果传递给函数的值小于 20，则会向控制台输出一条消息并执行 return 语句。由于在执行return语句时返回给调用者，所以不执行进一步的处理。

看另一个例子。

function checkNum(num){
  if (num % 2 === 0){
    console.log('偶数');
    return;
  }

  console.log('奇数');
}

let ret;
ret = checkNum(4);
>> 偶数
console.log(ret);
>> undefined

ret = checkNum(5);
>> 奇数
console.log(ret);
>> undefined

在这个示例中，如果传递给函数的值是偶数，它会向控制台输出一条消息，然后用 return 语句返回给调用者。如果数字是奇数，则向控制台打印一条消息，到达块的末尾，然后返回给调用者。在每种情况下，如果您将函数返回的值存储在一个变量中并将其输出到控制台，您可以看到在这两种情况下都返回了 undefined。

15-5 从一个函数返回多个值给调用者

您可以使用函数块中的 return 语句将函数的值返回给调用者，但在 JavaScript 中只能指定一个值作为返回值。因此，我们将通过指定数组作为返回值来说明如何返回多个值。

从一个函数返回多个值给调用者

您可以通过将返回值写入函数定义中的 return 语句的值来向函数的调用者返回一个值。

function 函数名(形式参数1, 形式参数2, ...){
  要执行的处理;
  ...

  return 返回值;
}

但是，由于返回值中只能写入一个值，所以不能向调用者返回多个值。因此，在创建一个有多个值作为元素返回的数组后，将数组指定为返回值。

请看下面的示例。

function maxAndMin(num1, num2, num3){
  const maxNum = Math.max(num1, num2, num3);
  const minNum = Math.min(num1, num2, num3);

  return [maxNum, minNum];
}

let numArray = maxAndMin(10, 7, 14);

console.log("Max = " + numArray[0]);
>> Max = 14
console.log("Min = " + numArray[1]);
>> Min = 7

本例中，获取函数接收的三个参数的最大值和最小值，并指定一个以每个值为元素的数组作为返回值。在调用函数的一侧，从函数返回的数组元素被引用并输出到控制台。

通过将要返回给调用者的值存储为数组的元素，可以将多个值返回给调用者。

利用数组解构

数组解构是一种语法，可在您想要将数组的每个元素分配给不同的变量时使用。格式如下。

[变量名 1，变量名 2，...] = 数组；

将数组的每个元素的值一一赋给左边描述的变量。

如果没有解构赋值，您将不得不将数组的每个元素分别分配给每个变量。

let personal = ['Yuhua', 10, 'Shanghai'];

let name = personal[0];
let old = personal[1];
let address = personal[2];

通过使用数组解构，我们可以将它们一起写成如下：

let personal = ['Yuhua', 28, 'Shanghai'];
let [name, old, address] = personal;

如果函数的返回值是一个数组，您可以使用此数组解构赋值将函数的返回值一次分配给多个变量。让我们像这样重写前面的例子：

function maxAndMin(num1, num2, num3){
  const maxNum = Math.max(num1, num2, num3);
  const minNum = Math.min(num1, num2, num3);

  return [maxNum, minNum];
}

let [maxResult, minResult] = maxAndMin(10, 7, 14);

console.log("Max = " + maxResult);
>> Max = 14
console.log("Min = " + minResult);
>> Min = 7

这样我们就可以将函数返回的数组的每个元素的值存储在一个变量中，该变量的名称应易于理解所存储的值类型，从而使程序更易于理解。

15-6 关于在哪里写函数和函数调用

说明在 JavaScript 程序中的何处编写函数和函数调用。您可以在函数调用之前或之后定义函数，但是在 HTML 页面中定义函数时需要注意一些事项。我们还将解释在另一个函数而不是全局范围内定义函数时的注意事项。

在哪里写函数

至于先写哪个，是函数还是程序中调用函数的那一边，先写哪个都无所谓。一般情况下，先定义函数再调用函数的情况很多，但是函数定义写在后面是没有问题的。

看下面两个简单的例子。

function dispTotal(x, y){
  return x + y;
}

console.log(dispTotal(3, 4));
>> 7

console.log(dispTotal(5, 1));

function dispTotal(x, y){
  return x + y;
}

>> 6

不管函数定义写在函数调用之前还是写在函数调用之后，都可以毫无问题地调用函数。

在 HTML 页面中描述时

在 HTML 页面中编写 JavaScript 时要小心。请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>JavaScript Sample</title>

<script>
function dispStart(){
  console.log('Start');
}
</script>

</head>
<body>

<p>
JavaScript Sample
</p>

<script>
dispStart();
dispGoal();
</script>

<p>
到此为止
</p>

<script>
function dispGoal(){
  console.log('Goal');
}
</script>

</body>
</html>

函数分别定义在header部分和body中，从同一个body中调用函数。函数和函数的调用者写在单独的 <script> 标签中。

当我尝试在浏览器中查看此页面时，我在控制台中收到 ReferenceError: dispGoal is not defined 错误。

>> ReferenceError: dispGoal is not defined

让我们修改前面的示例并将 dispGoal 函数的定义移到函数调用之前。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>JavaScript Sample</title>

<script>
function dispStart(){
  console.log('Start');
}
</script>

</head>
<body>

<script>
function dispGoal(){
  console.log('Goal');
}
</script>

<p>
JavaScript Sample
</p>

<script>
dispStart();
dispGoal();
</script>

<p>
到此为止
</p>

</body>
</html>

当我在浏览器中查看此页面时，这次程序运行没有错误。

>> Start
>> Goal

让我们修改前面的示例并将 dispGoal 函数定义移到函数调用之后，但在相同的 <script> 标记内。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>JavaScript Sample</title>

<script>
function dispStart(){
  console.log('Start');
}
</script>

</head>
<body>

<p>
JavaScript Sample
</p>

<script>
dispStart();
dispGoal();

function dispGoal(){
  console.log('Goal');
}
</script>

<p>
到此为止
</p>

</body>
</html>

在浏览器中查看此页面再次运行该程序，没有错误。

>> Start
>> Goal

像这样在 HTML 页面中编写 JavaScript 代码时，即使在函数调用之后编写函数定义也没有问题，但是如果 <script> 标签是单独的，则函数定义是 请注意，如果它会发生错误没有写在调用之前。

调用写在函数中的函数时

在 JavaScript 中，如果要调用的函数是在全局范围内定义的，则可以从该函数内调用另一个函数。

function dispHello(){
  console.log('Hello');

  dispGood();
}

function dispGood(){
  console.log('Good');
}

dispHello();
>> Hello
>> Good

如果要调用的函数是在另一个函数中定义的，则可以从同一个函数中调用它。

function dispHello(){
  console.log('Hello');

  function dispBye(){
    console.log('Bye');
  }

  dispBye();
}

dispHello();
>> Hello
>> Bye

如果你调用的函数是在另一个函数内部定义的，你会得到 ReferenceError: dispBye is not defined 如果你试图从函数外部调用它。

function dispHello(){
  console.log('Hello');

  function dispBye(){
    console.log('Bye');
  }
}

dispHello();
dispBye();

>> Hello
>> ReferenceError: dispBye is not defined

以这种方式调用函数时，如果要调用的函数是在全局范围内定义的，则可以从程序的任何地方调用它，但如果它是在函数内部定义的，则只能从该函数内部调用。

15-7 讲解函数的对象

函数也是 JavaScript 中的对象。这里简单介绍一下函数和对象的关系。

函数与对象的关系

函数也是 JavaScript 中的对象。使用函数声明定义函数会创建一个变量，其名称在函数名称中指定，并将函数对象分配给该变量。

看看下面的示例。

function calcTotal(x, y){
  return x + y;
}

它定义了函数 calcTotal。定义函数时，将创建一个名为 calcTotal 的变量，指定为函数名称，并将函数对象分配给该变量。因此，引用变量的值将显示函数对象。

function calcTotal(x, y){
  return x + y;
}

console.log(calcTotal);
>> function calcTotal(x, y){
>>   return x + y;
>> }

具有分配给它的函数对象的变量也可以分配给另一个变量。这两个变量将引用同一个函数对象，您可以使用任一变量调用该函数。

function calcTotal(x, y){
  return x + y;
}

let myFunc = calcTotal;

console.log(myFunc(10, 8));
>> 18

您还可以为函数名称分配不同的值，尽管您通常不会这样做。

function calcTotal(x, y){
  return x + y;
}

calcTotal = 'Hello';

console.log(calcTotal);
>> Hello

这样，在 JavaScript 中，函数可以像其他对象一样被赋值给变量，也可以在调用另一个函数时将函数指定为参数。

另外，这一次，我们解释了通过声明函数来定义函数的情况，但是当将函数分配给变量或在调用另一个函数时将其指定为参数时，函数字面量是通过以下方式定义函数的方法使用从一开始就将函数分配给变量的方法。

let calcTotal = function(x, y){
  return x + y;
}

console.log(calcTotal(10, 8));
>> 18

console.log(calcTotal);
>> function (x, y){
>>   return x + y;
>> }

当使用函数字面量定义函数时，它被称为匿名或匿名函数，因为函数本身没有名称。

15-8 使用函数文字定义函数（匿名函数）

在 JavaScript 中，函数文字可用于定义函数。使用函数文字定义的函数可以分配给变量或在调用函数时指定为参数。您还可以在使用函数字面量时创建匿名函数（anonymous functions），即没有名字的函数。本节介绍如何在 JavaScript 中使用函数文字定义函数。

使用函数文字定义函数

我将解释如何使用函数文字来定义函数，这是定义函数的方法之一。格式如下。

let 变量名 = function(参数1, 参数2, ...){
  要执行的操作1;
  要执行的操作2;
  ...

  return 返回值;
};

在函数声明中，函数名写在function之后，但使用函数字面量时，通常不加函数名（虽然可以加函数名，但可以在函数外部使用函数名调用函数). 无法发行). 没有名字的函数称为匿名函数或匿名函数。

参数在 (from) after 函数中指定。如果有多个参数，用逗号（,）分隔。此参数也称为伪参数。如果没有参数，则无需写入任何内容，但即使在那种情况下也必须写入 ( 和 )。

let 变量名 = function(){
  要执行的操作1;
  要执行的操作2;
  ...

  return 返回值;
};

在{to}块中描述调用函数时要执行的处理。可以描述一个或多个过程，但是在函数的情况下，即使只有一个过程，也不能省略代表块的{和}。

使用 return 语句将值返回给函数的调用者。retrun 语句后写入的值返回给函数的调用者。执行返回语句时，函数内的处理结束。如果不需要，可以省略 return 语句。

可以通过以与数字和字符串相同的方式将它们分配给变量来使用以这种方式定义的函数文字。

请看下面的示例。

let dispMessage = function(msg){
  console.log(msg);
};

它定义了一个函数文字并将其分配给变量 dispMessage。此函数文字接收一个参数并将存储在参数中的值打印到功能块内的控制台。

调用使用函数文字定义的函数

要调用使用函数文字定义的函数，请按如下方式编写。

let 变量名 = function(参数, ...){
  要执行的处理;
  ...
};


变量名(参数, ...);

要调用一个函数，在描述函数分配给的变量名之后，在 ( 和 ) 之间描述要传递给函数的参数。如果有多个参数，用逗号（,）分隔。如果没有参数，则无需写入任何内容，但即使在那种情况下也必须写入 ( 和 )。

变量名();

将函数的返回值存储在变量中时，如下描述 = 运算符左侧的变量和右侧的函数调用。调用函数后，函数返回的值存储在变量中。

let 储存的返回值变量 = 变量名(参数, ...);

请看下面的示例。

let dispHello = function(){
  console.log('Hello');
  console.log('JavaScript');
};

dispHello();
>> Hello
>> JavaScript

定义函数后，我们将其赋值给变量 dispHello。之后我调用该函数。return 语句也被省略，因为该函数没有参数也没有返回值。并且在函数中描述了向控制台输出一个字符串的过程。

您在定义函数后调用它。被调用的函数按顺序执行块中的处理，从而将 Hello 和 JavaScript 打印到控制台。

现在看看带有参数的示例。

let dispTotal = function(x, y){
  let sum = x + y;
  return sum;
};

let result = dispTotal(3, 4);
console.log(result);
>> 7

在此示例中，函数接收两个参数并将两个参数相加的结果返回给函数的调用者。函数的调用者用两个值调用函数并接收结果。

用法与声明函数和定义函数时基本相同，只是在调用函数时使用了一个变量。

什么时候使用函数文字？

函数文字不需要有函数名。例如，如果你声明只使用一次的函数并一个一个定义它们，你就不得不担心函数名是否与另一个函数或变量名重叠。函数字面量不使用函数名，因此无需担心。

仅使用一次的函数用于事件处理和回调函数等目的。我想在实际使用时写一个具体的例子。

正如函数字面量可以分配给变量一样，函数字面量也可以指定为函数调用的参数。看看下面的示例。

function dispNum(x, y, func){
  console.log(func(x, y));
}

let calcAverage = function(x, y){
  return (x + y) / 2;
};

dispNum(10, 8, calcAverage);
>> 9

在此示例中，使用函数文字定义的函数在调用另一个函数时被描述为参数。被调用函数执行块内作为参数传递的函数。

另外，在前面的示例中，函数字面量被赋值给变量，然后在调用函数时写为参数，但函数字面量也可以直接写为参数。

function dispNum(x, y, func){
  console.log(func(x, y));
}

dispNum(10, 8, function(x, y){
  return (x + y) / 2;
});
>> 9

请记住，经常使用将函数文字（匿名函数）直接作为参数编写。

关于在哪里写函数和函数调用

使用函数文字定义函数时，必须在调用函数之前定义它。看看下面的示例。

dispHello();

let dispHello = function(){
  console.log('Hello');
  console.log('JavaScript');
};

>> Uncaught ReferenceError: dispHello is not defined

在此示例中，发生错误是因为在使用函数文字定义函数之前调用了该函数。