if
if语句是编程语言最常用的语句,语法
if(condition){
//true statement
}else {
//false statement
}
其中condition可以是任意表达式,结果不一定是布尔值,JavaScript解释器会自动调用Boolean()将表达式结果转为布尔值,如果表达式为真执行第一个代码块内语句,如果为假执行第二个代码块内语句
只有一条语句的时候代码块不是必需的,出于维护性考虑我们建议添加
if语句可以单独使用,也可以和多个else连续使用
if(a > 2){
// statement
}
if( a == 1){
}else if(a == 2){
}else if(a == 3 ){
}else{
}
switch
switch 语句和if语句关系密切,语法
switch(expresstion){
case value1:
statement;
break;
case value2:
statement;
break;
case value3:
statement;
break;
default:
statement;
}
我们可以看到if语句使用多个else的时候写法很繁琐,可读性也下降,switch语句可以轻松解决
switch(a){
case 1:
statement;
break;
case 2:
statement;
break;
case 3:
statement;
break;
default:
statement;
}
如果表达式等于case的值,对应的语句就会执行,break关键字会使程序跳出switch语句,很多编程规范强调必须添加break,不添加不会有语法错误,程序会多次判断case,进入相应流程
没有一个值符合case,流程进入default子句,很多规范也强调必须添加default部分
JavaScript switch语句虽然参考的C语言的写法,但是有特殊性
- switch和case可以使用任意表达式,不一定是常量
- switch语句进行比较的时候是全等于(===)操作,不会发生类型转换
while和do-while
while
while语句属于前测试循环语句,也就是在循环体内的代码被执行之前,就会对条件求值,不符合的话就不会执行
while(expression){
statement;
}
看个例子
var i = 10;
while(i > 0){
console.log(i);
i--;
}
do-while
do-while是后测试循环语句,在出口条件判断之前就会执行一次代码
do{
statement;
}while(expression);
看个例子
var i = 4;
do{
console.log(i);
i--;
}while(i > 5);
for
for语句也是前测试循环语句,但具备在执行循环代码以前初始化变量和定义循环后要执行代码的能力,改造一下while语句
for(var i = 10; i > 0; i--){
console.log(i);
}
一个例子:生成200个按钮
for (var i=0; i<200; i++){
document.body.innerHTML += '<input type="button" value="按钮">'
}
上面的代码性能有问题, 执行的很慢,可以尝试将200改成2000 因为innerHTML=''为生存html元素
这种操作是比较费时的
我们稍微改进一下
var str = '';
for (var i=0; i<200; i++){
str += '<input type="button" value="按钮">'
}
document.body.innerHTML = str;
这个地方,我们对字符串做一个拼接, 这种操作时很快的, 然后一次插入页面
一个例子:for循环计算元素坐标
div{
height: 50px;
width: 50px;
background: red;
position: absolute;
}
var str='';
for(var i=0; i<10;i++){
str += '<div style="left: '+(10+60*i)+'px">'+i+'</div>'
}
document.body.innerHTML = str;
换行
var str='';
for(var i=0; i<100;i++){
var leftValue = 60 * (i%10); //i%10表示第几行
var topValue = 60 * parseInt(i/10); // parseInt(i/10)表示第几列
console.log(leftValue, topValue);
str += '<div style="left: '+leftValue+'px; top: '+topValue+'px">'+i+'</div>'
}
document.body.innerHTML = str;
斜线
var str='';
for(var i=0; i<10;i++){
var leftValue = 60*i;
var topValue = 60*i;
str += '<div style="left: '+leftValue+'px; top: '+topValue+'px">'+i+'</div>'
}
document.body.innerHTML = str;
练习: v字型
for-in
for-in是一种迭代语句,用于枚举对象的属性
for(property in object){
statement
}
看个例子
for(var prop in window){
console.log(prop);
}
因为ECMAScript规定对象中的属性没有顺序,所以for-in遍历出来的属性的顺序也不是固定的(虽然大部分浏览器是按属性名称排序,我们不能依赖这个)
break和continue
break关键字在switch语句中已经见过,这两个关键字多用在循环语句中
- break 用于强制退出循环体,执行循环后面的语句
- continue 用于退出本次循环,执行下次循环
看个例子对比一下
for(var i = 1; i< 10; i++){
if(i % 4 === 0){
break;
}
console.log(i);
}
for(var i = 1; i< 10; i++){
if(i % 4 === 0){
continue;
}
console.log(i);
}
这是break和continue最常规的用法,其实这两个关键字后面可以跟上我们之前提到的label,退出指定位置的代码,对于多层循环是个有用的技巧,但是难以理解,一般不推荐使用(如同C语言中被误解的goto)