前言
本文将讲述函数的声明，使用，如何传递值
一、函数是什么？
本质上是一堆具有特殊功能的代码块，便于人们精简代码减少页面代码的冗余
二、使用步骤
1.声明变量
<!-- 函数的使用 --> <!-- 1.声明变量 变量命名规则基本一致,小驼峰,前缀尽量为动词--> <!-- 定义函数完毕后是存放在内存中欧冠,执行的时候调用 --> <!-- function 函数名(){ 函数体(函数的构成部分,只有被调用方法名的时候才会被执行) } --> <!-- 调用方法:函数名() --> <script> function getTotal() { // 函数体,这里写方法的具体功能 }
2.调用函数
方法名（）
注意点：方法可以多次调用，方法只有调用的时候才会被执行。
2.1方法求和案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> getSum() function getSum() { // 两数求和 let num1 = +prompt('请输入第一个数') let num2 = +prompt('请输入第二个数') sum = num1 + num2 console.log(sum); } </script> </body> </html>
3.函数传参
函数中的两大参数：形参与实参数
形参：声明函数时写在函数名右边小括号里面的叫形参（形式上的参数）
实参：调用函数时写在函数名右边小括号里的叫实参（实际上的参数）
3.1 函数传参-参数默认值
形参： 可以看做变量，但是如果一个变量不给值，默认是什么？ ➢ undefined。
注意点：
- 当用户不输入实参的时候，undefined+undefined为NaN
- 为了避免出现NaN我们可以在定义的时候给形参设置一个初始值（可为任何数,一般为0）
- 如果函数结束有return 则将以return的那条语句作为结果传递调用者，不会显示undefined。会输出return的值！！！
4.函数的返回值
4.1什么是函数的返回值？
- 当调用某个函数，这个函数会返回一个结果出来
- 这就是有返回值的函数
- 函数本身不处理结果，而是交给调用者处理
- 函数内部不需要输出结果，而是返回结果
4.2什么时候需要返回值？
当函数需要将内部数据交给外部调用的时候就需要return将值传递给调用者
4.3 返回值怎么写？
- 在函数体中使用 return 关键字能将内部的执行结果交给函数外部使用
- return 后面代码不会再被执行，会立即结束当前函数，所以 return 后面的数据不要换行写
- return函数可以没有 return，这种情况函数默认返回值为 undefined
- 再次插入一张博主今天做案例
5.综合案例：
5.1方法return的返回值传递到不同类型中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> a { list-style: none; text-decoration: none; } </style> </head> <script> let num1 = +prompt('请输入第一个数') let num2 = +prompt('请输入第二个数') let val = getSum(num1, num2) document.write(`<a href="#">${val}</a>`) document.write(`<button>${val}</button>`) // 也可以直接输出 // document.write(getSum(1, 2)) function getSum(x = 0, y = 0) { return x + y } // 返回值细节： /* 函数的执行流程：1.调用函数（传递参数）2.执行函数体3.return关键字返回结果到调用者 return 后面的代码不会执行 不是所有的函数都有返回值(alert)，没有的返回值函数为undefined */ </script> </body> </html>
5.2开支统计
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> //注：代码执行是从上往下执行，如果ballance是写在 document.write(`本月的总共剩余额为${ballance}RMB`) 下则会报错，提示ballance需要先声明 let ballance=select() document.write(`本月的总共剩余额为${ballance}RMB`) function select() { // 连续出现相同的东西，可直接写一个方法就可以了，不需要写switch判断往下走..... let search = +prompt('请输入银行卡余额：') let eat = +prompt('请输入当月食宿消费：') let exp = +prompt('请输入当月生活消费：') let sum = search - eat - exp return sum } </script> </head> <body> </body> </html>
5.3 return配合true做判断
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> // 需求：判断flag的值，如果为true就正常求和(不传入参数的时候默认就是true)，如果为false就求平均数 document.write(handleData([1, 2, 3, 4, 5],8)) // 直接输入true会报错，必须用一个变量来接受它，这里用的flag function handleData(arr, flag= true){ let sum= 0 for (let i = 0; i < arr.length; i++) { sum += arr[i] } if (flag) { return sum } else { return sum / arr.length } } </script> </body> </html>
