点此查看所有教程、项目、源码导航

1. 背景

上一篇我们学会了函数的定义和调用。
我们写的开车函数，里面的步骤是写死的，不管谁来调用，输出的内容永远一模一样。

但现实里很多事情，流程大体一样，细节却不一样。
比如同样是打招呼，我们想对张三说你好，也想对李四说你好。
如果按照之前的写法，我们要写两个几乎一样的打招呼函数，这样就又产生重复代码了。

那能不能有一个办法：同一个函数，调用的时候，临时传给它不同的数据，让它做出不一样的效果？
这就要用到函数的参数。

2. 什么是参数（形参和实参）

参数，就是调用函数的时候，可以传给函数的数据。

我们先看例子，写一个打招呼的函数：

// name 就是形参，写在定义函数的小括号里面functionsayHello(name){console.log("你好，"+name);}

写在函数定义小括号里的name，叫做形参。
它就相当于一个占位的容器，用来接收外面传进来的数据。

调用函数的时候，在小括号里面写上具体的数据，这个数据叫做实参：

sayHello("张三");sayHello("李四");sayHello("王五");

运行效果：

你好，张三 你好，李四 你好，王五

调用sayHello("张三")的时候，实参"张三"会交给形参name，函数内部就可以使用这个数据。

我们也可以传递多个参数，多个参数之间用逗号隔开：

functionsayInfo(name,age){console.log("名字："+name);console.log("年龄："+age);}sayInfo("张三",18);sayInfo("李四",20);

小提示：实参和形参是按顺序一一对应的，第一个实参传给第一个形参，第二个实参传给第二个形参。

3. 参数数量不匹配的情况

调用的时候，传的实参数量，不一定和形参数量完全一致，这里有两种常见情况。

第一种：形参多，实参少，没有收到数据的形参值为undefined。

functionsayInfo(name,age){console.log("名字："+name);console.log("年龄："+age);}sayInfo("赵六");

这个例子只传了名字，age 没有收到数据，age 的值就是 undefined。

第二种：实参多，形参少。多余传进来的数据，函数内部没有变量接收，直接被忽略。

functionsayHello(name){console.log("你好，"+name);}sayHello("小明","学生");

这里的"学生"传进去了，但是没有形参接收，函数里面用不到它。

4. 什么是返回值 return

到目前为止，我们的函数都是在函数内部直接 console.log 打印内容。
但很多时候，我们并不想让函数直接打印，而是希望函数帮我们算出一个结果，把结果交给外面的代码，外面想怎么用就怎么用。

这个把结果交出去的能力，靠return关键字实现，交给外面的数据，叫做返回值。

我们写一个计算两个数字相加的函数：

functionadd(num1,num2){// 把相加的结果返回出去returnnum1+num2;}// 调用函数，接收返回结果，存到变量里面letres=add(10,20);console.log(res);

运行之后控制台输出 30。

5. return 的重要特点

return除了返回数据，还有一个很关键的特性：
一旦代码执行到 return，函数会立刻停止，return 后面的代码不会再执行。

看这个例子：

functionadd(num1,num2){returnnum1+num2;console.log("这一行代码不会执行");}letres=add(10,20);console.log(res);

第二行 console.log 永远不会运行，因为 return 已经结束函数了。

如果一个函数没有写 return，那么这个函数默认返回undefined。

6. 重点区分：return 和 console.log

这是初学者最容易踩坑的地方，一定要分清：

• console.log：只是把内容打印到控制台，只是给人看，数据不会交给外面代码继续计算；
• return：是把计算结果返回给调用处，这个结果可以赋值给变量、继续参与后续计算。

举个对比：

// 只是打印，结果拿不出来继续计算functionadd1(num1,num2){console.log(num1+num2);}// 返回结果，外面可以继续使用这个结果functionadd2(num1,num2){returnnum1+num2;}leta=add2(1,2);// 返回的结果可以继续参与运算letb=a+10;console.log(b);

7. 综合小案例

我们写一个函数，接收两个数字，返回较大的那一个数字，下面是完整可运行的 HTML 代码：

第 1 行，告诉浏览器，当前是一个 HTML5 文档，请按 HTML5 标准来解析当前网页。
第 2 行，告诉浏览器，网页开始了。
第 4-6 行，是网页的头部，此处 meta 标签告诉浏览器，请用 utf-8 中文编码来解析网页的内容。
第 8 行，body 开始了，标志着浏览器开始处理内容区域。
第 9 行，运行到 script 标签了，浏览器开始自上而下处理 JS 代码。
第 10 行，运行到 function，浏览器知道这是要定义一个 JS 函数。
第 10-16 行，浏览器理解 JS 函数的功能，此处务必注意，执行 10-16 行时，浏览器理解了函数定义的具体操作步骤，也就是代码块中的代码。但是函数体的代码并不会真正执行，因为此处只是一个定义。
第 18 行，执行 getMax 函数，此时会将 33 传递给 n1，55 传递给 n2，然后真正执行 getMax 函数体，经过比较，把较大值 55 返回，赋值给变量 result1。
第 19 行，执行 getMax 函数，此时会将 99 传递给 n1，21 传递给 n2，然后真正执行 getMax 函数体，经过比较，把较大值 99 返回，赋值给变量 result2。
第 20 行，执行 console.log，把 “最大值 1：55” 打印在控制台。
第 21 行，执行 console.log，把 “最大值 2：99” 打印在控制台。

8. 小结

参数，是外部传给函数的数据，让同一个函数可以处理不同的数据，变得灵活。
返回值 return，是函数把计算好的结果交还给外部代码。

有了参数和返回值之后，我们就可以封装很多通用的工具函数，后面写代码的时候反复调用。