条件语句与循环语句
条件语句与循环语句
条件语句
条件是一个表达式，表达式返回的结果会被隐式转换为布尔值，如果布尔值为true，执行语句块
一、if条件语句
1、语法及注意点
if(条件){
语句块
}
例：
if(~a.indexOf("a")){
}
var a=1;
if(a>1 ? a++ : a--){
}
if(a==1 && b==2){
}
//前面参与运算，后面判断条件
var a=2;
if(a++,a==2){
console.log("aaa");
}
// 语句块只有一句可以省略花括号
var a=2;
if(a===2) a++;
// 如果没有花括号，默认第一句为条件语句块
ar a=2;
if(a===2) //语句块只有一句时，一般情况和if条件写在一排
a++;
a+=10;
console.log(a);
2、if else条件语句
if(a>0){
满足条件时执行语句块
}else{
不满足条件时执行的语句块
}
//如果语句块只有一个，也可以省略花括号
if(a>0) a++;
else a--;
3、if else和try catch的区别：
条件语句需要预先察觉可能出现的错误并且做条件判断执行；
try catch语句不需要预先判断出现错误，由try去自身判断；
if else 需要明确条件 try catch出错切换。
var div=document.getElementById("divs");
if(div){
div.innerHTML="abc";
}else{
div=document.getElementById("div1");
div.innerHTML="cde";
}
var div
try{
div=document.getElementById("divs");
div.innerHTML="aaa";
}catch(e){
div=document.getElementById("div1");
div.innerHTML="bbb";
}finally{
console.log("ddd");
}
4、if多分支语句
if(){
}else if(){
}else if(){
}else{
}
二、case多分支条件语句
多分支条件语句 判断相等 （===）
判断表达式和case中哪一个值相等，并且执行对应的语句块
break 跳出语句块
default 如果不等同任何一个case的值，则执行default中的语句块
1、语法
switch(表达式){
case 值1:
break;
case 值2:
break;
case 值3:
break;
case 值4:
break;
default:
}
2、上一个case中没有使用break，则会穿越到下一个case中执行，不判断条件
3、小练习
如果在项目中，条件很复杂，可以换个思路，去判断元素的状态，根据状态写条件。
var div1=document.getElementById("div1");
// div1.style.left="50px";
// div1.style.top="50px";
var x=0;
var y=0;
var status="right";
setInterval(function(){
switch(status){
case "right":
x++;
if(x===200) status="down";
break;
case "down":
y++;
if(y===200) status='left';
break
case "left":
x--;
if(x===0) status="up";
break;
case "up":
y--;
if(y===0) status="right";
break;
}
div1.style.left=x+"px";
div1.style.top=y+"px";
},16)
循环语句语句
作用是尽可能减少代码的重复
一、while循环语句
案例1：在页面上写入列表
<div id="div"></div>
<script>
var str="";
var div=document.getElementById("div");
var i=1;
str+="<ul>"
//写法一
while(i<10){
str+="<li>"+i+"</li>";
i++;
}
//写法二
while(i++<10){
str+="<li>"+(i-1)+"</li>";
}
//写法三,注意：循环前执行多次语句写在while中，循环条件必须放在while()中最后，用,(逗号)分开
while(i++,i<10){
str+="<li>"+(i-1)+"</li>"
}
str+="</ul>";
div.innerHTML=str;
</script>
案例2：求1-100内的所有整数的和
写法一：
var i = 1;
var s = 0;
while (i < 101) {
s += i;
i++;
}
写法二：
var i = 0;
var s = 0;
while(s+=i++,i<101);
循环语句的嵌套：注意尽量不要超过两条循环语句的嵌套，循环次数会成倍增加
案例3：在页面上打印10排10列*号
var i=1,j;
while(i<11){
j=1;
while(j<11){
document.write("*"+" ");
j++;
}
document.write("<br>");
i++;
}
拓展：document.body.innerHTML和document.write()的区别
document.body.innerHTML和document.write()都会造成回流
因为第一次页面重构时会自动第一次回流，所以在构建页面时执行
document.body.innerHTML设置值会将所有的内容清空设值
document.body.innerHTML+= 会将原来的内容累加其中重新设值
document.write()会直接添加在页面的原有内容的后面
当第一次页面渲染完成后，再执行document.body.innerHTML或者
document.write()，都会再次触发回流，并且表现不同
document.body.innerHTML设置值会将所有的内容清空设值
document.body.innerHTML+= 会将原来的内容累加其中重新设值
document.write()会清空原body中所有内容，设置为新内容
当页面渲染完成后再次回流以后，造成页面渲染完成前获取的元素将在回流
后无法使用，因为元素发生改变了
案例4：在页面上打印乘法口诀表
<style>
table{
width: 1000px;
border-collapse: collapse;
}
td{
border: 1px solid #000;
text-align: center;
}
</style>
<script>
var i=1,j;
var str="<table>";
while(i<10){
str+="<tr>";
j=1;
while(j<=i){
str+="<td>"+i+"*"+j+"="+i*j+"</td>";
j++;
}
str+="</tr>";
i++;
}
str+="</table>";
document.write(str);
</script>
案例4：在页面上打印三角形
var i=1,j;
while(i<6){
j=6;
k=1;
while(j>i){
document.write("  ");
j--;
}
while(k<=2*i-1){
document.write("* ");
k++;
}
i++
document.write("<br>")
}
二、do while 循环语句
- 必执行一次，然后根据条件判断是否继续循环
- 可以规划出起始条件和结束条件，某个变量并不是循环的起始部分
var i=10;
do{
console.log(i);
i++;
}while(i<10);
var i=0;
do{
i--;
console.log(i);
if(i<-10) break;
}while(i<0);
三、循环语句关键词 break 和 continue
- break 跳出 跳出循环并且不再进入循环
- continue 继续 跳出本次循环，继续下次循环，当前本次不执行continue后面的语句
- 用while和do while语句，i++不能写在continue后面
1、break可以用于死循环跳出
var i=0;
while(true){
if(i===5) break
console.log("aaa");
i++;
}
while(1){
}
2、深度遍历
var o={value:1,next:{value:2,next:{value:3,next:{value:4,next:{value:5,next:{value:6,next:null}}}}}};
while(o){
console.log(o.value);
o=o.next;
}
while(1){
if(!o) break;
console.log(o.value);
o=o.next;
}
3、跳出标记
var i=0;
xietian: while(i<10){
var j=0;
while(j<10){
if(i+j===10) break xietian;
console.log(i,j);
j++;
}
i++;
}
var i = 0;
zhangsan: while (i++ < 10) {
var j = 0;
while (j++ < 10) {
if (i + j === 10) continue zhangsan;
console.log(i, j);
}
}
案例：输出2-100以内的所有质数
//方法一
var i=1,j;
bj:while(i++<100){
j=2;
while(j<i){
if(i%j===0) continue bj;
j++
}
console.log(i);
}
//方法二
var i=2,j;
var b;
while(i<=100){
j=2;
b=true;
while(j<i){
if(i%j===0){
b=false;
break;
}
j++;
}
if(b){
console.log(i);
}
i++;
}
四、for 语句
1、语法
for(初始值;条件;向条件外变化的表达式){
语句块
}
初始值 开始执行 执行一次
条件 循环开始判断（进入循环语句块之前） 循环几次执行几次（比循环语句块多执行一次）
向条件外变化的表达式 每次循环语句块结束后执行 循环几次执行几次（和循环语句块执行次数相等）
2、值可以省略
for(;;){
}
3、for语句求1-100的和
//方法一
var s=0;
for(var i=0;i<100;i++){
s+=i;
}
//方法二
for(var i=0,s=0;i<=100;s+=i,i++);
//方法三
for(var i=0,s=0;s+=i,i++<100;)；
4、广度遍历
var arr=[1,2,3,4,5];
for(var i=0;i<arr.length;i++){
console.log(arr[i]);
}
5、深度遍历
var o={value:1,next:{value:2,next:{value:3,next:{value:4,next:{value:5,next:{value:6,next:null}}}}}};
for(;o;o=o.next) console.log(o.value);
6、for语句求2-100内的所有质数
xh:for(var i=2,j;i<=100;i++){
for(j=2;j<i;j++){
if(i%j===0) continue xh;
}
console.log(i);
}
7、循环是一个同步过程，循环没有执行完毕，不会加载下边的代码
五、计算器练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.con {
border: 1px solid #000000;
width: 500px;
height: 600px;
text-align: center;
position: relative;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.con>div {
width: 100px;
height: 100px;
border: 1px solid #000000;
box-shadow: 2px 2px 2px #CCCCCC;
float: left;
margin: 11px;
text-align: center;
font-size: 40px;
line-height: 100px;
user-select: none;
}
.con>input {
width: 90%;
height: 30px;
line-height: 30px;
font-size: 25px;
text-align: right;
margin-top: 20px;
margin-bottom: 20px;
box-shadow: 3px 3px 3px #CCCCCC;
outline: none;
padding: 5px 10px;
background-color: white;
border: 1px solid #000000;
}
.clear::after {
content: "";
clear: both;
display: block;
height: 0;
visibility: hidden;
overflow: hidden;
}
.clear {
zoom: 1;
}
</style>
</head>
<body>
<div class="con clear">
<input type="text" id="input" value="0" disabled>
<div class="divs" id="div1">7</div>
<div class="divs" id="div2">8</div>
<div class="divs" id="div3">9</div>
<div class="divs" id="div4">-</div>
<div class="divs" id="div5">4</div>
<div class="divs" id="div6">5</div>
<div class="divs" id="div7">6</div>
<div class="divs" id="div8">+</div>
<div class="divs" id="div9">1</div>
<div class="divs" id="div10">2</div>
<div class="divs" id="div11">3</div>
<div class="divs" id="div12">*</div>
<div class="divs" id="div13">C</div>
<div class="divs" id="div14">0</div>
<div class="divs" id="div15">=</div>
<div class="divs" id="div16">/</div>
</div>
<script>
var input=document.getElementById("input");
var current="",first="",type="";
for(var i=1;i<17;i++){
var div=document.getElementById("div"+i);
div.onclick=function(){
if(isNaN(this.innerHTML)){
switch(this.innerHTML){
case "+":
type="+";
first=current;
current="";
break;
case "-":
type="-";
first=current;
current="";
break;
case "*":
type="*";
first=current;
current="";
break;
case "/":
type="/";
first=current;
current="";
break;
case "=":
if(type==="+") input.value=Number(first)+Number(current);
if(type==="-") input.value=first-current;
if(type==="*") input.value=first*current;
if(type==="/") input.value=first/current;
first="";
current="";
type="";
break;
case "C":
first="";
current="";
type="";
input.value="0";
break;
}
}else{
current+=this.innerHTML;
input.value=Number(current)+"";
}
}
}
</script>
</body>
</html>
扫一扫
1258
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
