- A+
所属分类:Web前端
Javascript基础Day3
1、循环:重复执行代码
特征:有规律性的重复执行相似代码
为什么要使用循环?
主要是为了减少页面代码
for循环:
语法:
for(表达式1;表达式2;表达式3){
代码
}
表达式1:初始值,定义在for循环中需要用的变量
表达式2:判断条件,判断初始值是否满足该条件
代码块:当循环条件满足时,所要执行的代码
表达式3:步长,每次循环之后,初始值会发生递增或递减的操作
初始化:var i = 0;
判断:i<5(i的值为0,返回true)
输出:0 更新:i++(执行后i=1)
以此类推的加下去,知道4为止,判断为<5所以不能超过5,所以到4就停止执行跳出循环
例:
for(var i=0;i<5;i++ ) { document.write(i+"<br/>"); }
注:
1、使用循环时,必须要注意循环条件,如果循环条件得不到满足,就会造成死循环
2、可以把for循环中的表达式写在其他位置中,不在小括号中书写;但是不能省略;号
for循环嵌套:
语法:
for(表达式1;表达式2;表达式3){
...代码1
for(表达式1;表达式2;表达式3){
...代码2
}
}
注:当外层循环执行一次时,内层循环只要满足条件都会执行,必须要等内层循环全部执行完毕时,才会继续执行第二次外层循环...
练习题:
/*
打印99乘法表,并美化一下
*/
for(var i=1;i<=9;i++){ //内层循环表示列数 for(var j=1;j<=i;j++){ document.write(i+"x"+j+'='+(i*j)+' ') } document.write("<br/>") }
for(var a=1,b=2;a<=15,b<=10;a++,b++){
console.log(a,b)
}
注:以上for循环写法;如果表达式2中的两个条件中间是,号时,只需要满足第二个条件就可以执行;如果两个条件中是||运算符时,只要任意满足其中一个条件就可以执行;如果两个条件中是&&运算符时,那么必须要两个条件同时满足,才可以执行
while循环:当条件满足时,就执行{}括号中的代码,一旦条件不满足,则跳出循环
语法:
while(条件){
循环体
}
例:
var n = 1; var sum = 0; //如果n小于等于100,则会执行while循环 while (n <= 100) { sum=sum+n; n=n+1; } document.write("1+2+3+…+100 = " + sum);
变量n用于递增(也就是不断加1),初始值为1。sum用于求和,初始值为0。对于while循环,我们一步步来给大家分析一下。
第1次执行while循环,sum=0+1,n=2
第2次执行while循环,sum=0+1+2,n=3
第3次执行while循环,sum=0+1+2+3,n=4
……
第100次执行while循环,sum=0+1+…+100,n=101
每一次执行while循环之前,我们都需要判断条件是否满足。如果满足,则继续执行while循环;如果不满足,则退出while循环。
当我们第101次执行while循环时,由于此时n=101,而判断条件n<=100返回false,此时while循环不再执行(也就是退出while循环)。由于退出了while循环,接下来就不会再循环执行while中的程序,而是执行while后面的 document.write()了。
do while循环:跟while循环类似,但是它是不管条件是否满足,先执行一次循环体;然后在来进行条件判断
语法:
do{
循环体
}while(条件)
例:
var n = 1; var sum = 0; do { sum += n; n++; }while (n <= 100); document.write("1+2+3+…+100 = " + sum);
***break:终止循环,当条件满足时,直接跳出循环,不在往下继续执行
例:
function myFunction() { var text = "" var i; for (i = 0; i < 5; i++) { if (i == 3) { break; } text += "The number is " + i + "<br>"; } console.log(text) } myFunction()
注:break关键字只能跳出当前循环体,不能同时跳出多层循环体
continue:结束本次循环;当条件满足时,直接结束本次循环,继续执行下一次循环
例:
function myFunction() { var text = ""; var i; for (i = 0; i < 5; i++) { if (i == 3) { continue; } text += "The number is " + i + "<br>"; } console.log(text) } myFunction()
***函数:封装了一些重复执行的代码块;
为什么要使用函数?
1、减少页面的代码量
2、有利于代码的维护
函数的作用:
1、封装一些重复的代码,可以随时随地调用
2、避免一些代码在非必要的情况下执行
创建函数
1、声明式函数
语法:
function 函数名(){
封装的代码
}
例:
function fn(){ console.log('hello') } fn()
2、赋值式函数
语法:
var 变量名=function(){
封装的代码
}
函数调用:函数名()
例:
var fn = function(){ console.log('hello') } fn()
声明式函数和赋值式函数之间的区别:
1、声明式函数可以在创建之前调用,也可以在创建之后调用
赋值式函数只能在创建之后调用
2、声明式函数具有函数声明提升,可以把函数体一起提升到当前作用域的最顶端
赋值式函数具有变量声明提升,把变量的定义提升到当前作用域的最顶端
函数中的参数:形参和实参
形参:在创建函数时,函数名后面小括号中的参数就是形参
实参:在调用函数时,函数名后面小括号中的参数就是实参
注:实参和形参的关系是一一对应,不能交叉赋值
参数的个数不一致时:
形参的个数多于实参,多出来的形参值为undefined
实参的个数多于形参,多出来的实参忽略
声明提升:声明式函数和显示定义变量才具有声明提升
注意:
1、所有声明提升都是提升到当前作用域的最顶端
2、同一个变量只会声明一次,其他的都会被忽略
3、函数声明提升的优先级高于变量声明提升的优先级
4、函数的声明提升会同时把函数体一起提升,这样就可以在函数创建之前调用
注:在同一个页面中时,变量名和函数名最好不要同名