点此查看所有教程、项目、源码导航文章目录1. 背景2. 什么是参数形参和实参3. 参数数量不匹配的情况4. 什么是返回值 return5. return 的重要特点6. 重点区分return 和 console.log7. 综合小案例8. 小结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){// 把相加的结果返回出去returnnum1num2;}// 调用函数接收返回结果存到变量里面letresadd(10,20);console.log(res);运行之后控制台输出 30。5. return 的重要特点return除了返回数据还有一个很关键的特性一旦代码执行到 return函数会立刻停止return 后面的代码不会再执行。看这个例子functionadd(num1,num2){returnnum1num2;console.log(这一行代码不会执行);}letresadd(10,20);console.log(res);第二行 console.log 永远不会运行因为 return 已经结束函数了。如果一个函数没有写 return那么这个函数默认返回undefined。6. 重点区分return 和 console.log这是初学者最容易踩坑的地方一定要分清console.log只是把内容打印到控制台只是给人看数据不会交给外面代码继续计算return是把计算结果返回给调用处这个结果可以赋值给变量、继续参与后续计算。举个对比// 只是打印结果拿不出来继续计算functionadd1(num1,num2){console.log(num1num2);}// 返回结果外面可以继续使用这个结果functionadd2(num1,num2){returnnum1num2;}letaadd2(1,2);// 返回的结果可以继续参与运算letba10;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 传递给 n155 传递给 n2然后真正执行 getMax 函数体经过比较把较大值 55 返回赋值给变量 result1。第 19 行执行 getMax 函数此时会将 99 传递给 n121 传递给 n2然后真正执行 getMax 函数体经过比较把较大值 99 返回赋值给变量 result2。第 20 行执行 console.log把 “最大值 155” 打印在控制台。第 21 行执行 console.log把 “最大值 299” 打印在控制台。8. 小结参数是外部传给函数的数据让同一个函数可以处理不同的数据变得灵活。返回值 return是函数把计算好的结果交还给外部代码。有了参数和返回值之后我们就可以封装很多通用的工具函数后面写代码的时候反复调用。