前端-JS基础-day4
目录
1、函数的使用
2、案例-函数封装
3、函数传参
4、函数传参-参数默认值
5、函数封装-数组求和
6、实参为变量
7、函数返回值
8、求最大值函数
9、函数细节
10、作用域
11、变量的特殊情况
12、匿名函数-函数表达式
13、匿名函数-立即执行函数
14、案例-计算时间函数
15、逻辑中断
16、转换为Boolean型
1、函数的使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>函数的使用</title>
</head>
<body><script>// 函数 代码复用// 1、函数的声明function sayHi(){console.log("hi~~~")}// 2、函数调用// 函数不调用，自己不会执行sayHi()</script>
</body>
</html>2、案例-函数封装
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>函数封装-案例</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>3、函数传参
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>函数传参</title>
</head>
<body><script>// 求1~100的累加和// start, end 为形式参数，即形参function getSum(start, end){let sum = 0for(let i = start; i <= end; i++){sum += i}console.log(sum)}// 函数调用，括号内为实参，实际的参数getSum(1, 100) getSum(100, 200)</script>
</body>
</html>4、函数传参-参数默认值
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>函数默认参数</title>
</head>
<body><script>// // 函数求和// function getSum(x, y){// console.log(x + y) // }// getSum() // NaN// getSum(1, 2)// 函数求和function getSum(x = 0, y = 0){console.log(x + y) }getSum() // 0getSum(1, 2)</script>
</body>
</html>5、函数封装-数组求和
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>函数封装-数组求和</title>
</head>
<body><script>// 封装函数// 给一个参数的默认值function getArrSum(arr = []){let sum = 0for(let i = 0; i < arr.length; i++){sum += arr[i]}console.log(sum)}getArrSum([1, 2, 3, 4, 5])getArrSum([11, 22, 33])getArrSum()</script>
</body>
</html>6、实参为变量
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>实参为变量</title>
</head>
<body><script>// 求n~m累加和function getSum(n = 0, m = 0){let sum = 0for(let i = n; i <= m; i++){sum += i}console.log(sum)}let num1 = +prompt("请输入起始值：")let num2 = +prompt("请输入结束值：")// 调用函数getSum(num1, num2) // 实参可以是变量</script>
</body>
</html>7、函数返回值
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>函数返回值</title>
</head>
<body><script>// 1、函数返回值function fn(){return 20}// 调用函数let re = fn()console.log(re) // 2、求和函数的写法function getTotal(x, y){return x + y// return 后面的代码不会执行// 因为当运行到return 时，会退出函数}let sum = getTotal(1, 2)console.log(sum)// 3、无returnfunction fact(){}let res = fact()console.log(res) // undefined</script>
</body>
</html>8、求最大值函数
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>求最大值函数</title>
</head>
<body><script>// // 1、求最大值函数// function getMax(x, y){// return x > y ? x : y;// }// let max = getMax(11, 22)// console.log(max)// // 2、求任意数组的最大值，并且返回// function getArrValue(arr = []){// // 先准备一个max变量存放数组的第一个值// let max = arr[0]// // 遍历比较// for(let i =1; i < arr.length; i++){// if(arr[i] > max){// max = arr[i]// }// }// // 返回最大值// return max// }// let max = getArrValue([1, 3, 5, 7, 9])// console.log(max)// 3、求任意数组的最大值和最小值，并且返回function getArrValue(arr = []){let max = arr[0] // 最大值let min = arr[0] // 最小值// 遍历比较for(let i =1; i < arr.length; i++){// 最大值if(arr[i] > max){max = arr[i]}// 最小值if(arr[i] < min){min = arr[i]}}// 返回值 返回的是数组return [max, min]}let newArr = getArrValue([11, 3, 55, 7, 29])console.log(`数组的最大值是：${newArr[0]}`)console.log(`数组的最小值是：${newArr[1]}`)</script>
</body>
</html>9、函数细节
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>函数细节</title>
</head>
<body><script>// // 1、函数名相同，后面覆盖前面// function fn(){// console.log(1)// }// function fn(){// console.log(2)// }// fn() // 2// 2、参数不匹配function fn(a, b){console.log(a + b)}// (1) 实参多于形参， 多的实参不参与运算// fn(1, 2, 3)// (2) 实参少于形参fn(1) // 1 + undefined = NaN</script>
</body>
</html>10、作用域
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>作用域</title>
</head>
<body><script>// 1、全局变量let num = 10console.log(num)function fn(){console.log(num)}fn()// 2、局部变量function fun(){let str = 'pink'}// console.log(str) // str is not defined</script>
</body>
</html>11、变量的特殊情况
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>变量的特殊情况</title>
</head>
<body><script>// let num = 20// function fn(){// num = 10 // 全局变量来看 强烈不允许// }// fn()// console.log(num) // 10// function fun(x, y){// // 形参可以看做是函数的局部变量// console.log(x) // 1// }// fun(1, 2)// // console.log(x) // 错误的// 局部变量的就近原则let num = 10function fn(){let num = 20function fun(){let num = 30console.log(num) // 30}fun()}fn()</script>
</body>
</html>12、匿名函数-函数表达式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>函数表达式</title>
</head>
<body><script>// 1、函数表达式let fn = function(x, y){console.log(x + y) }fn(1, 2)// 2、函数表达式(匿名函数)和 具名函数的不同// 1) 具名函数的调用可以写到任何位置// 2) 函数表达式，必须先声明函数表达式，后调用function fun(){console.log(1)}fun()</script>
</body>
</html>13、匿名函数-立即执行函数
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>立即执行函数</title>
</head>
<body><script>// 1、第一种写法// (function(){})();(function(x, y){console.log(x + y)})(1, 2);// 2、第二种写法// (function(){}())(function(x, y){console.log(x + y)}(1, 3));</script>
</body>
</html>14、案例-计算时间函数
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>案例-计算时间函数</title>
</head>
<body><script>// 1、用户输入let second = +prompt('请输入秒数：')// 2、封装函数function getTime(t){// 3、转换let h = parseInt(t / 60 / 60 %24)let m = parseInt(t / 60 % 60)let s = parseInt(t % 60)h = h < 10 ? '0' + h : hm = m < 10 ? '0' + m : ms = s < 10 ? '0' + s : s// 4、返回return `转换完之后是${h}小时${m}分${s}秒`}let str = getTime(second)document.write(str)</script>
</body>
</html>15、逻辑中断
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>逻辑中断</title>
</head>
<body><script>let age = 18// console.log(false && age++) // age++ 不执行 一假则假// console.log(age) // 18// console.log(true || age++) // age++ 不执行 一真则真// console.log(age) // 18function fn(x, y){x = x || 0y = y || 0console.log(x + y) }fn(1, 2) // 3// 无参数传入时,x=0,y=0,不会出错，相当于给了默认值fn() // 0</script>
</body>
</html>16、转换为Boolean型
