JavaScript
一，函数的基本使用
- 函数：function，是被设计为执行特定任务的代码块
说明： 函数可以把具有相同或相似逻辑的代码“包裹”起来，通过函数调用执行这些被“包裹”的代码逻辑，这么做的优势
是有利于精简代码方便复用。 ① 函数命名规范： 和变量名基本一致，尽量小驼峰式命名法，前缀应该为动词，命名建议：常用动词约定
- 函数的调用方法
3.函数体
例如：抽取-封装
- 函数练习
// 1. 写一个打招呼的函数 输出：大家好，我是李狗蛋，请多多关照~
function sayHai() {
document.write(`大家好，我是李狗蛋，请多多关照~`)
}
sayHai()
// 2. 将 求2个数的和的代码封装为函数，调用2次
function addNum() {
let num1 = 10
let num2 = 20
document.write(num1 + num2)
}
addNum()
addNum()
// 3. 求 1~10的累加和 封装函数
function total() {
let sum = 0
for (let i = 1; i <= 10; i++) {
sum += i
}
document.write(sum)
}
total()
- 函数传参
例如：
// 封装一个求两个数字的和 的函数，并输出在页面中
function getSum(a, b) {
document.write(a+b)
}
getSum(10,20)
函数传参的好处：极大提高了函数的灵活性
- 函数封装求和
例如：（逻辑中断）
function getSum(x, y) { //x=0 y=0 默认值
console.log(x + y);
}
getSum(1) //返回NaN
function getSum(x = 0, y = 0) { //避免用户没有传递参数的时候显示NaN
console.log(x + y);
}
getSum() //返回0
function getSum(a,b){
a=a||0
b=b||0
document.write(a+b)
}
getSum(1) //返回1
x 和 y 我们怎么理解? 函数内变量
如果一个变量没有赋值，则默认为 undefined
求学生总分
function getSum(arr) {
let sum = 0
for (let i = 0; i < arr.length; i++) {
sum += arr[i]
} document.write(sum)
}
getSum([1, 2, 3, 4, 5])
-
函数返回值
内置函数的返回值 可是有一些函数是无返回值的 打印结果为undefined
求和函数有返回值 这个函数就只是求和，把结果返回给我们就行了，这个函数不需要打印输出
拿到结果后，由开发者决定返回值后续如何操作(alert dw log 或者进一步处理...)
function getSum(x, y) {
return x + y //return后面的代码不会执行
return x * y //此行不执行
}
let res = getSum(10, 20)
console.log(res);
【注意】
- 在函数体中使用 return 关键字能将内部的执行结果交给函数外部使用
- 函数内部只能出现 1 次 return，并且 return 后面代码不会再被执行，所以 return 后面的数据不要换行写
- return会立即结束当前函数
- 函数可以没有 return，这种情况函数默认返回值为 undefined
例如：
1. 求数组最大值的函数
function getMax(arr) {
let max = arr[0]
for (let i = 1; i < arr.length; i++) {
if (max < arr[i]) {
max = arr[i]
}
}
return max
}
let res = getMax([1, 2, 3, 4, 5])
console.log(res);
求任意2个数中的最大值, 并返回
function getMax(a, b) {
return a > b ? a : b
}
let res=getMax(2,8)
document.write(res)
封装一个 求两个数的最大值的函数 (函数的实参让用户输入)
function getmax(a, b) {
let num1 = +prompt('请输入第一个数字')
let num2 = +prompt('请输入第二个数字')
return num1 > num2 ? num1 : num2
}
let res = getmax(num1,num2)
console.log(res);
// 封装一个计算两个数字的和和差的函数
function getRes(a, b) {
let he = a + b
let cha = a - b
return [he, cha]
}
let res = getRes(1, 2)
document.write(`和为${res[0]},差为${res[1]}`)
- 作用域
- 全局作用域：作用于所有代码执行的环境（整个script标签内部）或者一个独立的js文件
- 局部作用域：作用于函数内的代码环境，就是局部作用域，所以也称为函数作用域
- 块级作用域：块作用域由{}包括，if语句和for语句里面的{}等
let num = 10
function fn() {
let num = 20
console.log(num) //20
}
fn()
console.log(num); //10
function f1() {
let num = 123
function f2() {
console.log(num) //123
}
f2()
}
let num = 456
f1()
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的值 ? //3
console.log(b) //b的值 ? //'22'
}
}
}
fn1()
- 匿名函数
(function (){
let res=1
console.log(res); //1
})();
//他们声明的res变量互相不受影响
(function(){
let res=2 //2
})();
10.函数参数
- 如果实参的个数大于形参，那么后续传递的值会被忽略
- 如果实参的个数小于形参，那么参数默认为underfined
function getSum() {
let sum=0
for (let i = 0; i < arguments.length; i++) {
sum += arguments[i]
}
document.write(sum)
}
getSum(1, 2, 3, 4, 5)
综合案例：
小时： h = parseInt(总秒数 / 60 / 60 % 24)
分钟： m = parseInt(总秒数 / 60 % 60 )
秒数： s = parseInt(总秒数 % 60)
// 用户输入的秒数 转换为时分秒 不足两位补0
let times = +prompt('请输入秒数')
function getTime(time) {
let h = parseInt(time / 60 / 60 % 24)
let m = parseInt(time / 60 % 60)
let s = parseInt(time % 60)
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(times)
document.write(`您输入的秒数为${time},转换为${res[0]}:${res[1]}:${res[2]}`)
