函数
function,是被设计为执行特定任务的代码块
函数可以把具有相同或相似逻辑的代码‘包裹’起来，通过函数调用执行这些被‘包裹’的代码逻辑，这么做的优势是有利于精简代码方便复用
函数的使用
语法
声明函数
function 函数名 () {
函数体
}
调用函数
函数名（）
<script>
function getSum() {
let num1 = 10
let num2 = 20
document.write(num1 + num2)
}
getSum()
getSum()
</script>
注：函数一次声明可以多次调用，每一次函数调用函数体里面的代码会重新执行一次
函数名命名规范
➢ 和变量命名基本一致
➢ 尽量小驼峰式命名法
➢ 前缀应该为动词
➢ 命名建议：常用动词约定
函数传参
形参
函数声明时，小括号里面的是形参，形式上的参数
实参
函数调用时，小括号里面的是实参，实际上的参数
<script>
// 小括号里的参数是“形参”
function getSum(num1, num2) {
document.write(num1 + num2)
}
// 小括号里面的是“实参”
getSum(12, 32)
</script>
注：如果 实参个数大于形参，则后续传递进去的值会被忽略
如果 实参个数小于形参，则形参默认为undefined
形参和实参的个数尽量保持一致，参数中间用逗号隔开
形参可以理解为是在这个函数内声明的变量，实参可以理解为是给这个变量赋值
提升鲁棒性/健壮性
<script>
// 当用户只输入了一个值时，通过逻辑或，来保证计算顺利进行
function getSum(a, b) {
a = a || 0
b = b || 0
document.write(a + b)
}
getSum(1)
</script>
<script>
// 通过给函数的形参设置默认值，避免出错，给用户一些不好的体验
function getSum(a = 0, b = 0) {
document.write(a + b)
}
getSum()
</script>
案例
/* 通过函数计算数组的和 */
<script>
function getSum(arr) {
// 箩筐思想
sum = 0
for (let i = 0; i < arr.length; i++) {
sum = sum + arr[i]
}
document.write(sum)
}
getSum([1, 2, 3, 4, 5])
</script>
案例*伪数组
<script>
function gatSum() {
sum = 0
for (let i = 0; i < arguments.length; i++) {
sum = sum + arguments[i]
}
document.write(sum)
}
gatSum(1,2,3,5,4,6)
</script>
注：伪数组只能用在函数里面
伪数组无法去添加删除某个数组元素
开发中如果客户传递的是数组，就采用普通数组就可以，如果客户传递的是一个一个数字的，就可以用到伪数组
函数返回值
概念： 当调用某个函数，这个函数会返回一个结果出来
为了保证代码的灵活性，我们不希望直接在函数内部写最终数据的输出方式
语法
return 数据
<script>
// 让函数只进行一个计算，随后将结果返回给开发者
function getSum(x, y) {
return x + y
}
let res = getSum(10, 20)
// 由开发者根据业务需要去决定输出方式
console.log(res);
document.write(res)
</script>
注：是否需要返回值，要根据开发中业务需要
return后面不接数据或者函数内不写return，函数的返回值是undefined
return能立即结束当前函数, 所以 return 后面的数据不要换行写
作用域
概述
变量分类
全局变量
在函数外部let 的变量 => 全局变量在任何区域都可以访问和修改
局部变量
在函数内部let 的变量 => 局部变量只能在当前函数内部访问和修改
块级变量
let定义的变量,只能在块作用域里访问,不能跨块访问,也不能跨函数访问
作用域链
只要是代码，就至少有一个作用域
写在函数内部的局部作用域
如果函数中海油函数，那么在这个作用域中就又可以诞生一个作用域
根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定那些数据能被内部函数访问，被称作作用域链
案例
<script>
let a = 1
let b = 10
function fn1() {
let a = 2
let b = '22'
fn2()
function fn2() {
let a = 3
fn3()
function fn3() {
let a = 4
console.log(a) // a的值 4
console.log(b) // b的值 '22'
}
}
}
</script>
注：作用域链是采取就近原则的方式来查找变量最终的值
匿名函数
立即执行行数
<script>
// 立即执行函数 作用：避免重复声明变量名导致代码bug
(function () {
let res = 1
console.log(1, '李狗蛋写的');
})();
(function () {
let res = 2
console.log(2, '张全蛋写的');
})();
</script>
综合案例
<!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>
/*
小时： h = parseInt(总秒数 / 60 / 60 % 24)
分钟： m = parseInt(总秒数 / 60 % 60 )
秒数： s = parseInt(总秒数 % 60)
*/
// 让用户输入相应的秒数
let time = +prompt(`请您输入秒数`)
function getTime(time) {
let h = parseInt(time / 60 / 60 % 24)
let m = parseInt(time / 60 % 60)
let s = parseInt(time % 60)
// 给不足两位数的数字进行补0
h = h < 10 ? '0' + h : h
m = m < 10 ? '0' + m : m
s = s < 10 ? '0' + s : s
return [h, m, s]
}
let res = getTime([time])
document.write(`您输入的秒数为${time},转换的时间为:${res[0]}:${res[1]}:${res[2]}秒`)
</script>
</body>
</html>
