WEBSTORM前端 —— 第4章：JavaScript —— 第7节：函数
目录
一、为什么需要函数
1.函数
2.说明
二、函数使用
1.函数的声明语法
2.函数名命名规范
3.函数使用
①函数的调用语法
②函数体
③练习
④案例
三、函数传参
1.思考
2.声明语法
3.调用语法
4.形参实参
5.练习：函数封装求和
6.参数默认值
7.案例：函数封装-求学生总分
四、函数返回值
1.当函数需要返回数据出去时，用return关键字
2.练习：函数返回值练习
3.函数细节补充
五、作用域
1.变量的访问原则
2.案例1：结果是几？
六、匿名函数
1.分类
2.匿名函数
①函数表达式
②使用场景
③立即执行函数
七、综合案例：转换时间案例
八、逻辑中断
1. 逻辑运算符里的短路
2. 转换为Boolean型
一、为什么需要函数
1.函数
function，是被设计为执行特定任务的代码块
2.说明
函数可以把具有相同或相似逻辑的代码“包裹”起来，通过函数调用执行这些被“包裹”的代码逻辑，这么做的优势是有利于精简代码方便复用。
比如我们前面使用的 alert() 、 prompt() 和 console.log() 都是一些 js 函数，只不过已经封装好了，我们直接使用的。
二、函数使用
1.函数的声明语法
2.函数名命名规范
- 和变量命名基本一致
- 尽量小驼峰式命名法
- 前缀应该为动词
- 命名建议：常用动词约定
3.函数使用
①函数的调用语法
注意：声明（定义）的函数必须调用才会真正被执行，使用 () 调用函数
②函数体
函数体是函数的构成部分，它负责将相同或相似代码“包裹”起来，直到函数调用时函数体内的代码才会被执行。函数的功能代码都要写在函数体当中。
③练习
需求：
- 写一个打招呼的函数 hi~
- 把99乘法表封装到函数里面，重复调用3次
<!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>// let num = 10// console.log(num)// 1. 函数的声明 function sayHi() {console.log('hi~~~')}// 2. 函数调用 函数不调用，自己不执行sayHi()sayHi()sayHi()</script>
</body></html><!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>span {display: inline-block;width: 100px;padding: 5px 10px;border: 1px solid pink;margin: 2px;border-radius: 5px;box-shadow: 2px 2px 2px rgba(255, 192, 203, .4);background-color: rgba(255, 192, 203, .1);text-align: center;color: hotpink;}</style>
</head><body><script>// // 1. 外层循环控制行数// for (let i = 1; i <= 9; i++) {// // 2. 里层循环控制列数// for (let j = 1; j <= i; j++) {// document.write(`<span>${j} X ${i} = ${i * j}</span>`)// }// // 换行// document.write('<br>')// }// // 1. 外层循环控制行数// for (let i = 1; i <= 9; i++) {// // 2. 里层循环控制列数// for (let j = 1; j <= i; j++) {// document.write(`<span>${j} X ${i} = ${i * j}</span>`)// }// // 换行// document.write('<br>')// }// // 1. 外层循环控制行数// for (let i = 1; i <= 9; i++) {// // 2. 里层循环控制列数// for (let j = 1; j <= i; j++) {// document.write(`<span>${j} X ${i} = ${i * j}</span>`)// }// // 换行// document.write('<br>')// }// 声明function sheet99() {for (let i = 1; i <= 9; i++) {// 2. 里层循环控制列数for (let j = 1; j <= i; j++) {document.write(`<span>${j} X ${i} = ${i * j}</span>`)}// 换行document.write('<br>')}}// 调用sheet99()sheet99()sheet99()sheet99()</script>
</body></html>④案例
需求：
- 封装一个函数，计算两个数的和
- 封装一个函数，计算1-100之间所有数的和
<!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>// 1. 求2个数的和// function getSum() {// let num1 = +prompt('请输入第一个数')// let num2 = +prompt('请输入第二个数')// console.log(num1 + num2)// }// getSum()// 2. 求 1~100 累加和function getSum() {let sum = 0for (let i = 1; i <= 100; i++) {sum += i}console.log(sum)}getSum()</script>
</body></html>三、函数传参
1.思考
这样的函数只能求 10 + 20， 这个函数功能局限非常大
解决办法：把要计算的数字传到函数内
结论：
- 若函数完成功能需要调用者传入数据，那么就需要用有参数的函数
- 这样可以极大提高函数的灵活性
2.声明语法
3.调用语法
