本文将讲述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>