流程控制
通过流程控制打破了代码从上到下的规律
条件判断
-
单项分支
若满足条件则执行，不满足则绕过
if(条件){ } -
双向分支
条件成立则执行if后的内容，条件不成立，则执行else后的内容
多向分支
<script type="text/javascript">
var score=50;
if(score>=80){
console.log('你真棒')
}else if(score>=60){
console.log('革命尚未成功,通知仍需努力')
}else{
console.log('你是猪吗')
}
</script>
输出:你是猪吗
调试工具大点
断点，点一下，刷新一下
switch语句
条件可以写常量,字符串，数值
break作用：跳出整个switch
default作用:当所有case不满足的时候默认执行
<script>
switch(条件){
case 条件:
break;
case 条件:
break;
default:
break;
}
</script>
<script>
var flag='login';
switch(flag){
case 'login':
console.log('登录')
case 'LoginOut':
console.log('注销')
case 'register':
console.log('注册')
}
</script>
输出:登录，注销，注册
<script>
var flag='lo';
switch(flag){
case 'login':
console.log('登录')
break;
case 'LoginOut':
console.log('注销')
break;
case 'register':
console.log('注册')
break;
default:
console.log('我不知道做什么操作')
break;
}
</script>
输出:我不知道做什么操作
还可以
<script>
var month;
switch(month){
case 1:
case 3:
break;
}
</script>
switch写的日历
注意只需要注意一下2月份
判断闰年能被4整除不能被100整除或者能被400整除
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
年:<input type="text" id="year"/>
月:<input type="text" id="month"/>
<button type="button" onclick="getDays()">计算</button>
<script type="text/javascript">
function getDays(){
// 获取年月
var year=document.getElementById('year').value;
var month=document.getElementById('month').value;
var year=parseInt(year);
var month=parseInt(month);
var tianshu;
switch(month){
case 1:
console.log('31天')
tianshu=31;
break;
case 2:
// 判断闰年能被4整除不能被100整除或者能被400整除
if((year%4==0&&year%100!=0)||year%400==0){
console.log('29天')
tianshu=29;
}else{
console.log('28天')
tianshu=28;
}
break;
case 3:
console.log('31天')
tianshu=31;
break;
case 4:
console.log('30天')
tianshu=30;
break;
case 5:
console.log('31天')
tianshu=30;
break;
case 6:
console.log('30天')
tianshu=30;
break;
case 7:
console.log('31天')
tianshu=30;
break;
case 8:
console.log('31天')
tianshu=31;
break;
case 9:
console.log('30天')
tianshu=31;
break;
case 10:
console.log('31天')
tianshu=31;
break;
case 11:
console.log('30天')
tianshu=30;
break;
case 12:
console.log('31天')
tianshu=31;
break;
}
console.log(''+year+'年的'+month+'月有'+tianshu+'天')
}
</script>
</body>
</html>
//加入输入2000 2
//输出：2000年2月有29天
for循环
效率高的写法
九九乘法表
<script>
// 左下对齐
document.write('<table border="1" style="width: 600px; margin: 0 auto;">')
for(var i=1;i<=9;i++){
document.write('<tr>')
for(var j=1;j<=i;j++){
document.write('<td>'+i+'*'+j+'='+i*j+'</td>')
}
document.write('</tr>')
}
document.write('</table>')
// 左上对齐
document.write('<table border="1" style="width: 600px; margin: 0 auto;">')
for(var i=9;i>=1;i--){
document.write('<tr>')
for(var j=1;j<=i;j++){
document.write('<td>'+i+'*'+j+'='+i*j+'</td>')
}
document.write('</tr>')
}
document.write('</table>')
// 右上对齐
document.write('<table border="1" style="width: 600px; margin: 0 auto;">')
for(var i=9;i>=1;i--){
document.write('<tr>')
// 加空格
for(var k=1;k<=9-i;k++){
document.write('<td></td>')
}
for(var j=1;j<=i;j++){
document.write('<td>'+i+'*'+j+'='+i*j+'</td>')
}
document.write('</tr>')
}
document.write('</table>')
// 右下对齐
document.write('<table border="1" style="width: 600px; margin: 0 auto;">')
for(var i=1;i<=9;i++){
document.write('<tr>')
// 加空格
for(var k=9;k>i;k--){
document.write('<td></td>')
}
for(var j=1;j<=i;j++){
document.write('<td>'+i+'*'+j+'='+i*j+'</td>')
}
document.write('</tr>')
}
document.write('</table>')
</script>
<script>
// 左下对齐
document.write('<table border="1" style="width: 600px; margin: 0 auto;">')
for(var i=1;i<=9;i++){
document.write('<tr>')
for(var j=1;j<=i;j++){
document.write('<td>'+i+'*'+j+'='+i*j+'</td>')
}
document.write('</tr>')
}
document.write('</table>')
// 左上对齐
document.write('<table border="1" style="width: 600px; margin: 0 auto;">')
for(var i=9;i>=1;i--){
document.write('<tr>')
for(var j=1;j<=i;j++){
document.write('<td>'+i+'*'+j+'='+i*j+'</td>')
}
document.write('</tr>')
}
document.write('</table>')
// 右上对齐
document.write('<table border="1" style="width: 600px; margin: 0 auto;">')
for(var i=9;i>=1;i--){
document.write('<tr>')
// 加空格
for(var k=1;k<=9-i;k++){
document.write('<td></td>')
}
for(var j=1;j<=i;j++){
document.write('<td>'+i+'*'+j+'='+i*j+'</td>')
}
document.write('</tr>')
}
document.write('</table>')
// 右下对齐
document.write('<table border="1" style="width: 600px; margin: 0 auto;">')
for(var i=1;i<=9;i++){
document.write('<tr>')
// 加空格
for(var k=9;k>i;k--){
document.write('<td></td>')
}
for(var j=1;j<=i;j++){
document.write('<td>'+i+'*'+j+'='+i*j+'</td>')
}
document.write('</tr>')
}
document.write('</table>')
</script>
// 右上对齐
document.write('<table border="1" style="width: 600px; margin: 0 auto;">')
for(var i=9;i>=1;i--){
document.write('<tr>')
// 加空格
for(var k=1;k<=9-i;k++){
document.write('<td></td>')
}
for(var j=1;j<=i;j++){
document.write('<td>'+i+'*'+j+'='+i*j+'</td>')
}
document.write('</tr>')
}
document.write('</table>')
求1-100的偶数和
<script>
var sum=0;
for(var i=2;i<=100;i+=2){
sum+=i;
console.log(sum)
}
</script>
<script>
document.write('<table>')
for(var i=1;)
document.write('</table>')
</script>
循环中的关键字
break:跳出整个循环
continue:跳出当前循环，继续执行下一个循环,即直接跳到i++
<script>
for(var i=1;i<=10;i++){
if(i%3==0){
consolo.log(i+'是三的倍数')
continue;
}
console.log(i)
}
</script>
输出：
循环数组
<script>
var arr=['1','2'];
for(var i=0;i<arr.length;i++){
console.log()
}
</script>
while循环
初始条件
while(循环条件){
循环体
改变初始条件的值
}
<script type="text/javascript">
var num=0;
while(num<10){
console.log(num)
num++;
}
</script>
do-while
<script type="text/javascript">
var a=1;
do{
console.log(a)
a++;
}while(a<10)
</script>
函数(多练)
概念:一小块功能代码的封装，越独立越好，功能越强越好
三要素:功能、参数、返回值
定义的三种方式
标准的方式定义
注意会优先加载，可以在任何地方调用(包括自身)
<script type="text/javascript">
function 函数名(形参){
函数体
函数的返回值
}
</script>
<script type="text/javascript">
console.log(fun1)
fun1(1)//可以放任何地方
// a为形参 相当于在fun1内部定义了一个变量a
function fun1(a){
console.log(a)
console.log('标准方式定义')
return '返回值'
}
fun1(1)
//res接受函数调用的返回值
var res = fun1(2);
console.log(res)
</script>
<script type="text/javascript">
function fun(){
console.log(111)
}
fun()//222，标准定义的会提前,并且要覆盖
function fun(){
console.log(222)
}
fun()//222
</script>
赋值的定义
注意必须在赋值之后才能调用
<script type="text/javascript">
var 函数名 = function(){
函数体
</script>
<script type="text/javascript">
console.log(fun2)//undefined
// fun2();//fun2 is not a function
var fun2 = function(){
console.log('赋值的方式定义')
}
// fun2()
}
</script>
原生的定义(不推荐)
<script>
var fun3 = new Function('console.log("原生方法定义")')
// fun3()
</script>
函数调用
定义:从上到下将函数内容执行依次
接受函数的返回值需要将函数调用的结果给一个变量，该变量给整个变量
函数名字()
重名函数
标准命名的，后面的会覆盖前面的，因为定义会提到调用之前
赋值定义的，后面也会覆盖前面的，但是没有定义提前
当函数名字相同，会存在覆盖
注意定义的函数名不能与系统函数相同
<script>
// var fun = function(){
// console.log(111)
// }
// fun()//111
// var fun = function(){
// console.log(222)
// }
// fun();//222
function demo(){
console.log(333)
}
demo()//444
function demo(){
console.log(444)
}
demo();//444
// 当函数名字相同时，会存在覆盖
// 注意：定义的函数名不能和系统函数重名
</script>
匿名函数
没有名字的函数
1.解决命名困难
2.函数不会被覆盖
3.默认只能调用一次
<script>
function(){
console.log('匿名函数')
}
//调用：
(function(){
console.log('匿名函数')
})();
</script>
函数的参数
- 当形参个数大于实参个数，多余的形参的值为undefinded
- 形参个数=实参个数,正常输出
- 形参<实参,多的实参没有接收的
arguments数组:接收所有实参
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
// 当形参的个数大于实参个数,多余的形参值为undefined
function fun1(a,b,c){
console.log(a,b,c)
}
fun1(1,2)//1 2 undefined
// 形参的个数等于实参的个数
function fun2(a,b,c){
console.log(a,b,c)
}
fun2(1,2,3)//1 2 3
// 形参的个数小于实参的个数
// arguments为一个数组，接收所有传入的实参
function fun3(a){
console.log(a)//1
console.log(arguments)
}
fun3(1,2,3)
</script>
</body>
</html>
函数的返回值(难点)
1.当函数调用后未给出返回值,则返回值为undefined
<script type="text/javascript">
//第一
function fun(){
console.log(111)
}
var res=fun();
console.log(res)//undefined
//第二
function fun(){
console.log(111)
return
}
var res=fun();
console.log(res)//undefined
</script>
2.return可以返回任何返回值(任意数据类型,字符串，数字，布尔值,变量，表达式，对象，函数)
<script type="text/javascript">
// return 返回字符串 数字 boolean 变量 表达式
function fun2(){
var name = '张羿'
return name+'会射太阳吗';
}
var res = fun2()
console.log(res)
// return 返回对象
function fun3(){
// var obj = {
// name:'张三',
// sex:'男'
// }
return {name:'张三',sex:'男'};
}
var res = fun3()
console.log(res)
// return 返回函数
function fun4(){
// var fun = function(){
// console.log('张三丰')
// }
function fun(){
console.log('张三丰')
}
return fun;
// return后面的代码不执行
console.log(333)
}
var res = fun4();//res=fun=function(){ console.log('张三丰')}
console.log(res)
res()//张三丰
function demo(){
if(true){
return true;
}else{
return false;
}
}
var res = demo()
console.log(res)
</script>
3.return后的代码不执行，写在最后就行
4.函数调用后可以给出return也可以不给
函数的变量
- 全局变量:
在函数体外用var定义的变量或则在函数体内未采用var声明
在整个js结束才被销毁
作用域：函数体内外都可以用
- 局部变量：
在函数体内用var声明的变量
作用域:只能在函数内部使用
注意
- 当局部和全局同名，优先使用局部
- 能优先定义局部就局部
<script>
// 全局变量
var name = '肖星星';
console.log(name)
function fun(){
// 局部变量
var name = '王小江';
var age = 18;
// 全局变量：在函数体内部未采用var声明的变量
sex = '男'
console.log(name);//王小江
console.log(age);//18
}
fun()
// console.log(age)//age is not defined
console.log(sex)
</script>
函数封装
我的步骤，先写函数体，再写参数
回调函数
形参中至少有一个传入的值为函数，也就是形参里面有函数
意义:在函数内部调用其他函数
<script type="text/javascript">
function fun(fn,callback){
//fn和callbcak代表函数
}
</script>
<script>
方式一:
setInterval(function(){},1000)
方式二：
var fun=function(){}
setInterval(fun,1000)
</script>
函数的作用域链
变量会从当前函数一级一级向上找，直到最顶层
<script type="text/javascript">
var num=0;
function fun(){
var age=20;
function fun2(){
var num=50;
console.log(num)//50
console.log(age)//20
console.log(sex)//sex is not definded
}
}
</script>
闭包函数(难点)
注意:笔试面试考闭包的概念
闭包函数:内部函数在其作用域外被调用,则形成了内部函数的闭包
若闭包函数使用了全局变量，则该变量所占的内存不会被释放。直到整个js运行结束。
闭包函数的特点：
优点：内部的函数可以在其作用域之外被访问
缺点：闭包函数使用的全局变量，该变量不会释放，会一直占内存，可能存在内存泄漏。
解决方案：在内部函数调用完成之后，将该内存释放。（将该变量赋值为空）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
function outSide(){
console.log('哈哈哈~~~~')
// var inSide = function(){
// console.log('内部函数')
// }
// 对于inSide而言 num为全局变量
var num = 100;
function inSide(){
// console.log('内部函数')
num++;//使用了全局变量
console.log(num)
}
return inSide;
}
outSide()//哈哈哈
// inSide()//inSide is not defined inSide为内部函数，不能在其作用域之外调用
var res = outSide();
res();//101 相当于内部函数在外部被调用
outSide();//哈哈哈
res();//102
outSide();//哈哈哈哈
res();//103
res = null;//释放内存
</script>
</body>
</html>
递归函数
自己调用自己，怎么递归进去的怎么递归出来
需要判断条件，设置递归在何时终止
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
function fun(n){
console.log(n)
if(n>0){
fun(n-1);
}
console.log(n)
}
fun(2);
</script>
</body>
</html>
理解为下面代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
function(2){
// fun(2)
console.log(2)
if(2>0){
// fun(1)
console.log(1)
if(1>0){
// fun(0)
console.log(0)
if(false){}
console.log(0)
}
console.log(1)
}
console.log(2)
}
</script>
</body>
</html>
null;//释放内存
# 递归函数
自己调用自己，怎么递归进去的怎么递归出来
需要判断条件，设置递归在何时终止
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
function fun(n){
console.log(n)
if(n>0){
fun(n-1);
}
console.log(n)
}
fun(2);
</script>
</body>
</html>
[外链图片转存中…(img-FK0ryawR-1627523330949)]
理解为下面代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
function(2){
// fun(2)
console.log(2)
if(2>0){
// fun(1)
console.log(1)
if(1>0){
// fun(0)
console.log(0)
if(false){}
console.log(0)
}
console.log(1)
}
console.log(2)
}
</script>
</body>
</html>
1733
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
