本文将讲述javaSprict中函数的声明，调用方法
目录
前言
一、函数是什么？
二、使用步骤
1.声明变量
2.调用函数
2.函数传参
2.1 函数传参-参数默认值
3.函数的返回值
3.1什么是函数的返回值？
3.2什么时候需要返回值？
3.3 返回值怎么写？
4.综合案例：
4.1方法return的返回值传递到不同类型中
4.2.开支统计
4.3 return配合true做判断
前言
本文将讲述函数的声明，使用，如何传递值
一、函数是什么？
本质上是一堆具有特殊功能的代码块，便于人们精简代码减少页面代码的冗余
二、使用步骤
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>2.函数传参
函数中的两大参数：形参与实参数
形参：声明函数时写在函数名右边小括号里面的叫形参（形式上的参数）
实参：调用函数时写在函数名右边小括号里的叫实参（实际上的参数）
2.1 函数传参-参数默认值
形参： 可以看做变量，但是如果一个变量不给值，默认是什么？ ➢ undefined。
注意点：
- 当用户不输入实参的时候，undefined+undefined为NaN
- 为了避免出现NaN我们可以在定义的时候给形参设置一个初始值（可为任何数,一般为0）
如果函数结束有return 则将以return的那条语句作为结果传递调用者，不会显示undefined。会输出return的值！！！
3.函数的返回值
3.1什么是函数的返回值？
- 当调用某个函数，这个函数会返回一个结果出来
- 这就是有返回值的函数
- 函数本身不处理结果，而是交给调用者处理
- 函数内部不需要输出结果，而是返回结果
3.2什么时候需要返回值？
当函数需要将内部数据交给外部调用的时候就需要return将值传递给调用者
3.3 返回值怎么写？
- 在函数体中使用 return 关键字能将内部的执行结果交给函数外部使用
- return 后面代码不会再被执行，会立即结束当前函数，所以 return 后面的数据不要换行写
- return函数可以没有 return，这种情况函数默认返回值为 undefined
再次插入一张博主今天做案例
4.综合案例：
4.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>4.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>4.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>
