【JavaScript】七、函数
文章目录
- 1、函数的声明与调用
- 2、形参默认值
- 3、函数的返回值
- 4、变量的作用域
- 5、变量的访问原则
- 6、匿名函数
- 6.1 函数表达式
- 6.2 立即执行函数
- 7、练习
- 8、逻辑中断
- 9、转为布尔型
1、函数的声明与调用
function 函数名(形参列表) {
函数体
}
eg：
// 声明
function sayHi() {
console.log('Hello World!')
}
// 调用
sayHi()
注意：
-
形参不需要带类型
-
两个相同的函数后面的会覆盖前面的函数
-
参的个数和形参的个数可以不一致，形参过多，默认给undefined，实参过多，多余的实参会被忽略 (函数内部有一个arguments，里面装着所有的实参)
命名规范：
- 和变量命名基本一致
- 尽量小驼峰式命名法
- 前缀应该为动词
2、形参默认值
<body>
<script>
function getSum(num1, num2) {
document.write(num1 + num2)
}
// 3
getSum(1, 2)
// NaN
getSum()
</script>
</body>
如上，形参不传值，计算结果是NaN，形参也是一个变量，不给值，则是undefined，undefined + unfined = NaN，改进下：
function getSum(num1 = 0, num2 = 0) {
document.write(num1 + num2)
}
形参默认值只会在缺少实参参数传递时才会被执行
// 练习：数组求和函数
<body>
<script>
function getArrSum(array = []) {
let sum = 0
for (let i = 0; i < array.length; i++) {
sum = sum + array[i]
}
console.log(sum)
}
getArrSum([1, 2, 3, 4, 5])
getArrSum()
</script>
</body>
3、函数的返回值
function getSum(num1, num2) {
return num1 + num2
}
- return结果给调用者
- return 后面代码不会再被执行
- return函数可以没有return语句，此时，默认返回undefined
function getSum(num1, num2) {
num1 + num2
}
// 调用一个没有返回结果的函数，查看调用结果
console.log(getSum(1, 2)) //undefined
练习： 求一个数组的最大值
<body>
<script>
function getMax(array = []) {
let max = array[0]
for (let i = 1; i < array.length; i++) {
if (max < array[i]) {
max = array[i]
}
}
return max
}
console.log(getMax([1, 3, 4, 6, 9]))
</script>
</body>
4、变量的作用域
作用域：
对应的，变量分为：全局变量和局部变量
<body>
<script>
// 全局变量
let num = 0
// 函数中可以用
function getNum() {
return num
}
// 函数外面也能用
console.log(num)
</script>
</body>
<body>
<script>
function doSome() {
// 局部变量
let i = 1
return i
}
// 局部变量，函数外不可用，报错i is not defined
console.log(i)
</script>
</body>
最后，作用域有一个坑：如果函数内部，变量没有声明，直接赋值，也当全局变量看，但是强烈不推荐
<body>
<script>
function doSome() {
// 不声明，直接赋值
num = 1
}
// 调用一下
doSome()
// 1，访问成功
console.log(num)
</script>
</body>
5、变量的访问原则
如下，输出是20，首先两个num作用域不同，并不冲突，其次，console.log打印时，num就近
访问原则：
- 在能够访问到的情况下 先局部， 局部没有在找全局，遵循就近原则
- 如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域
6、匿名函数
函数定义完需要调用，匿名函数没有名字，因此不能像具名函数一样通过名字调用，其调用方式有两种：
- 函数表达式
- 立即执行函数
6.1 函数表达式
语法是将匿名函数赋值给一个变量
<body>
<script>
let fn = function(num) {
console.log('函数表达式的方式')
}
// 调用
fn(1)
</script>
</body>
这种写法很像常规的具名函数定义，但有区别：
也就是说，具名函数的调用，可以写在任何位置，而匿名函数用函数表达式来调用是不行的，因为函数表达式是一个let，最后，匿名函数的使用场景举例：在Web API中
6.2 立即执行函数
写法：拿个小括号包着匿名函数，最后再加个空的小括号，第二个小括号是在做调用，因此，这个函数一定义，匿名函数就立马被执行了，因此，叫立即执行函数
封号也可以写前面，以下两种写法都行：
<body>
<script>
(function () {
console.log(1)
})();
(function () {
console.log(2)
})();
</script>
</body>
// 封号写前面
<body>
<script>
; (function () {
console.log(1)
})()
; (function () {
console.log(2)
})()
</script>
</body>
立即执行函数还有个作用：防止变量污染
再体会下，上面说的第二个小括号是在做调用
<body>
<script>
(function (x, y) {
console.log(x + y)
})(1, 3);
</script>
</body>
匿名函数的立即执行函数写法，还有一种写法，小括号里面包着匿名函数 + 一个空的小括号
最后，多个立即执行函数要用 ; 隔开，要不然会报错。未来其使用场景如：
立即执行函数也可以有函数名，如下，写成立即执行函数，一来不用再特地调用，二来，这个JS文件被引入后，即使JS中定义了变量，也不会引起变量污染
7、练习
需求: 用户输入秒数，可以自动转换为时分秒
<body>
<script>
function convertTime(totalSecond = 0) {
let hour = parseInt(totalSecond / 60 / 60 % 24)
let minute = parseInt(totalSecond / 60 % 60)
let second = parseInt(totalSecond % 60)
// 补0，让1小时变成01小时
hour = hour < 10 ? '0' + hour : hour
minute = minute < 10 ? '0' + minute : minute
second = second < 10 ? '0' + second : second
return `${hour}时${minute}分${second}秒`
}
let totalSecond = +prompt('输入总秒数')
document.write(convertTime(totalSecond))
</script>
</body>
此外，hour = hour < 10 ? '0' + hour : hour其实也体现了JS的弱类型，hour本身是数字型，最后重新赋值可能是一个String型，也没报错
8、逻辑中断
通过左边能得到整个式子的结果，因此没必要再判断右边，即短路
// 都是真，返回最后一个真值
console.log(11 && 22) //22
//逻辑或，返回最后一个真值
console.log(11 || 22) //11
下面这个写法，和给形参给默认值，效果一样，x和y不传时，为undefined，当false看，做逻辑与，就是0，最后结果为0 + 0
未来短路运算的使用场景：
注意⚠️，和Java不同，JS的短路与和短路或 操作符返回的是操作数的值，而不是布尔值（true 或 false）
9、转为布尔型
显示转换语法：
Boolean(内容)
''、0、undefined、null、false、NaN 转换为布尔值后都是false, 其余则为 true
console.log(Boolean('hahhah')) //true
console.log(Boolean(0)) //false
console.log(Boolean(NaN)) //false
console.log(Boolean(111)) //true
有了这个前提，再看
// null
console.log(null && 20)
null当false看，那短路，结果是null，注意，返回是null，我没加Boolean，下面这个返回才是false
//false
console.log(Boolean(null) && 20)
