JavaScript 条件-循环语句

三目运算符

<script>
		var a=1;
        var b=1;
        var b=a>2 ? 1 : 2  //a>2是条件  1是满足条件时返回的值 2是不满足条件时返回的值
        console.log(b)//2
    
     //嵌套的三元运算符
    	var a=1;
        var c=a>2 ? 1 : a<0 ? 0: 2
        console.log(c)//2
    	
    	var a=1;
        var b=1;
    	//如果使用条件的语句有多句使用,分隔 ()包含
        a>2 ? (b++,b+=2) : (b--,b-=2);
        console.log(b);//-2
    
    	注意这种写法
    	`不使用返回值,直接使用执行语句`
      		a>2 ? b++ : b--;
</script>

返回回的值时布尔值时,不要使用三元运算符

<script>
    var a=1;
    var b=1;
	var b=!(a>2); // false
</script>

使用&& || 比三元运算符更优

运算符优先级

  1. ++ – 前面必须是变量
  2. 赋值运算的优先级 低于 三元运算符
		var a=2;
        var b=a++*2;  4
        var b=2*++a;  6
        var b=2*a++;  4
        
		var a=2;
        var b=2;
        var c=b+=2*3//8
        var c=(b+=2)*3//12
        
        var a=1;
        var b=2;
        b+=b>2 ? a++ : a--; //a=0 b=3
        b+=2 ? ++a : --a; //a=2 b=4
        b=a>2 ? b+=1 : b+=2; //a=1 b=4
        console.log(a);
        console.log(b)
        //三步运算符的优先级高

优先级排序

<script>
1. ++  --   -  ~ !  delete  new  typeof  void	一元运算符、返回数据类型、对象创建、未定义值
//  ~  --> ~1=-2  ~2=-3
2.  / %	乘法、除法、取模

3. + - +	加法、减法、字符串连接

4. << >> >>>	移位

5. < <= > >= instanceof	小于、小于等于、大于、大于等于、instanceof
  
6. == != === !==	等于、不等于、严格相等、非严格相等
    
7.&	按位与

8. ^	按位异或

9. |	按位或
    
10. &&	逻辑与
    
11. ||	逻辑或
 
12. ?:	条件

13. = oP=	赋值、运算赋值

14. ,	多重求值
   
</script>

条件运算符

if

1.不管表达式是什么值,都会自动隐式转换为布尔值

<script>
		if(表达式){
            // 表达式转换为布尔值如果是true,执行这个语句块
        }else if(表达式2){
             // 表达式2转换为布尔值如果是true,执行这个语句块
        }else{
            // 剩余的,其他执行这里
        }
</script>

2.如果条件语句当中,语句块只有一句,这时候可以去掉{}

<script>
    var  a =1
	1. 因为没有使用语句块的{},所以仅条件下的这一句是条件的语句内容
    if(a>2)
		a++; // (条件内容)这个不执行,因为条件不符合
		a*=3; // 这个是在if语句外面
        console.log(a)//3
    
    2.  ,在这里表示下一句和当前句是同一句
        if(a>2)
            a++,// 这两个都在if语句里面
            a*=2; 
        console.log(a); //1
    3. 加了;以后,下面的内容不归属于条件
</script>

3. 如果后续的条件需要有前置条件时,可以使用&&将前置条件写在前面

<script>
	 var obj={a:1};
        if(obj(这里判断为true) && obj.a(再判断这个里面的布尔值)){
            console.log(obj.a);
        }

</script>

4.如果条件中使用,分割多条语句,最后一句才是这个条件语句的条件

<script>
    	var a=1;
		if(a++,--a){
            console.log(a);// 1
        }
</script>

swich

注意点!!!

1.switch适合等值判断
(类型:byte,short,枚举,string,number)

2.表达式绝对等于值时,执行对应case下的语句块

3.如果这个case没有使用break,就会造成穿透,穿透到下一个case,不做判断(case不可重复)

4.必须使用default,默认值处理所有不等的情况,default不需要使用break
5.default 可以放在case语句之前,但是代码的可读性不高,不建议
	此时如果default语句若是没有break语句 程序会继续执行case语句,直到遇见break或switch语句结束,所以次情况需要使用break
<script>
多分枝条件语句
        switch(表达式){
        case1:
        //如果表达式运算的值绝对等于值1,执行这里的语句块
        break;
        case2:
        //如果表达式运算的值绝对等于值2,执行这里的语句块
        break;
        case3:
        //如果表达式运算的值绝对等于值3,执行这里的语句块
        break;
        case4:
        //如果表达式运算的值绝对等于值4,执行这里的语句块
        break;
        default:
        //如果表达式运算的值不等于以上内容,执行这里的语句块
        //一般来说default必须要写,default中不一定有语句
        }
</script>

1.case 不一定是一个值,可以是一个表达式 必须完全相同执行对应case下的语句块

2、如果这个case没有使用break,就会造成穿越,穿越到下一个case,不做判断

<script>
    穿越的目的是为了处理两个条件都必须执行某个语句  
	这里可以使用穿越处理多个条件或者的内容
    var a=3
    switch(a){
            case 0:
            case 3:
            case 5:
            case 9:
                console.log("aa");
            break;
        }
</script>

3.case 不一定是一个值,可以是一个表达式

var a=2;
        switch(true)
        // switch(1)  //不能执行对应语句块
        // switch(!0)  //  !0 隐式转换为true
        {
            case a>1:
                console.log("aaa")
                break;
            case a>2:
                console.log("bbb")
                break;
            default:
                console.log("ccc")
        } 

状态机的使用

<script>
    //普通写法
    var div0=document.getElementById("div0")
    var x=0;
    VAR y=0;
    setInterval(function(){
        if(y===0){
            x++;
        }
        if(x>=100){
            y++;
        }
        if(y>=100){
            x--;
        }
        if(x===0){
            y--;
        }
        div0.style.left=x+"px"
        div0.style.top=y+"px"
    },16);
    
    
    //先从左往右走当x>=100往下走 当y>=100往左走
    //当x<=0往上走 当y<=0往右走
    //状态机的使用
    1.获取dom节点
    var div0=document.getElementById("div0")
    2.声明唯一变量//使用Symbol设置唯一值,避免重复的可能性
     const LEFT=Symbol("left"),
              RIGHT=Symbol("right"),
              TOP=Symbol("top"),
              BOTTOM=Symbol("bottom");
    var x=0;
    var y=0;
    3.赋值给state
    var state=RIGHT;
    setInterval(function(){
            	4.switch 判断
            switch(state){   
                case RIGHT:
                    x++;
                    if(x>=100) state=BOTTOM;
                    break;
                case BOTTOM:
                    y++;
                    if(y>=100) state=LEFT;
                    break;
                case LEFT:
                    x--;
                    if(x<=0) state=TOP;
                    break;
                case TOP:
                    y--;
                    if(y<=0) state=RIGHT;
                    break;
            }

            div0.style.left=x+"px"
            div0.style.top=y+"px";
        },16); 
</script>

循环

循环需要三个内容

1.初始值:循环判断的变量

2.循环的条件:决定循环是否继续

3.向循环条件外进行的语句

迭代部分:控制循环条件改变的增量

循环操作:单词执行的逻辑代码或任务

注意:循环是同步进行的

while

特点:

首次即有入口条件,先判断,在执行,
适用于循环次数明确的情况也适用于循环次数不明确的情况。
(for最适用于循环次数明确的情况)

首次判断不满足,则一次都不会执行

执行次数:0-n次
<script>
    1.向页面中写10个 ul li
    var str="<ul>";
    var i=0;
    while(i<10){
        str+="<li>"+i+"</li>"
        i++;
    }
    str+="</ul>"
    document.body.innerHTML+=str;
    
    2.当把i++放在条件语句,起始需要-1,条件结果-1
    var i=-1;
        var s=0;
        while(i++<=99){
            console.log(i)
            s+=i;
        }
        console.log(s)//5050
    
    3.循环语句如果只有一句话可以省略{}
    var i=-1;
    var s=0;
    while(i++<=99) s+=i;
    console.log(s)
    
    4.再次简化
    var i=0;
    var s=0;
    while(s+=i,i++<100);//判断的条件要在最后
    console.log(s)
</script>

break continue

<script>
    //break 当遇到break是跳出循环,不在执行循环语句内容
    打印1-100的数字
        var i=0;
        while(i<100){
            if(i===50) break;
            console.log(i);
            i++;
        }//打印到 49 就截止
    
    
    /* continue
      1.先执行部分代码,如果满足条件就跳出该语句,执行后面,如果不满足条件,则执行完所有语句块
      2.筛选
    */
    //continue 当遇到continue是不执行当前语句 但是会继续执行循环语句内容
       var i=0;
        while(i<100){
            if(i===50){
                i++;
                continue;
            }
            console.log(i);
            i++;
        }// 只是跳过50 这个数字
</script>

1.使用while语句时,当使用continue,建议将跳出条件写在while循环中

<script>
		var i=-1;
        while(i++,i<100){
            当到50时跳出
            if(i===50) continue;
            console.log(i);
        }	
</script>

2.while(true) 和 do while区别

<script>
	1.相同点:在任何情况下先进入循环,执行部分语句,再判断是否跳出或者循环
    2.不同点,do while第一次执行全部的语句块,这里执行部分的语句块 再判断条件
   		var i=1;
        while(true){ //这是一个死循环  while(1)也可以
            console.log("aaa");
           // 当满足条件时跳出
            if(i>200) break;
            console.log("bbb")
            i*=2;
        }
        console.log(i)
</script>

3.什么时候使用continue

1)先执行部分代码,如果满足条件,跳出执行后面,如果不满足条件,则执行完所有语句块

2)筛选

4. break continue 后面不能写任何语句,必须是独立语句,不能使用****逗号

5.while循环适合处理操作一个列表一个对象,将所有的数据处理完成后,结束循环

例子

<script>
    1.打印1~100中可以被11整除的数字  第一种写法
    var i=0;
    	while(i<100){
      		if(i%11===0){
        		console.log(i);
        		i++;
        		continue;
      		}
      		i++;
    	}
    第二种写法
     var i= -1 ;
        while(i++<100){
            if(!(i%11)){
                console.log(i)
                continue;
            }
        }
    
    2.打印0-9A-Za-z
    	var str="09AZaz";  
        console.log(str.charCodeAt(5))//通过字符串第几位下标获取到该字符的unicode编码    48 57 65 90  97 122
    
    var str="09AZaz";  
        console.log(str.charCodeAt(5))//通过字符串第几位下标获取到该字符的unicode编码    48 57 65 90  97 122
        var str="";
        var i=48; //48对应0  从0开始
    	a.123范围内循环
        while(i<123){
            b.48遍历到57,跳出本次循环,65赋值给i
            if(i===58){
                i=65;
                continue;
            }
            c.65遍历到90,跳出本次循环,91赋值给i
            if(i===91){
                i=97;
                continue;
            }
            d.将Unicode编码转换为字符
            str+=String.fromCharCode(i);/将Unicode编码转换为字符串
            i++;
        }
        console.log(str)
    
    3.求斐波那契数列
    //1、1、2、3、5、8、13、21、34、……这个数列从第3项开始,每一项都等于前两项之和
    var a=1,b=1,str=a+"+"+b,sum=a+b;
    var temp;
    while(1){
        temp=b;
        b=a+b;
         //当b大于100时 直接输出str 退出循环
        if(b>100){
            str+="="+sum
            break;
        }
        a=temp;
        str+="+"+b;
        sum+=b;
    }
    console.log(str)// 1+1+2+3+5+8+13+21+34+55+89=232
    
    //第二种方法
        var a=1,b=1,str=a+"+"+b,sum=a+b;
        var temp;
    //temp=b,b=a+b 执行到循环结束
        while(temp=b,b=a+b,b<100){
            a=temp;
            str+="+"+b;
            sum+=b;
        }
         console.log(str)
    
    4.将第一个数组中的数字倒序插入到第二个数组
        var arr=[1,2,3,4,5,6,7,8,9];
        var arr1=[];
        var item;
        var i=8;
        while(arr && (item=arr[i--]) && arr1.length<arr.length){
          arr1.push(item);
        }
        console.log(arr1)
    
    //第二种写法  使用arr.pop()  不使用i
    //arr.pop()改变原始数组,将最后一个元素删除,并返回删除的元素
    	var arr=[1,2,3,4,5,6,7,8,9];
        	var arr1=[];
        	var item;
       		while(arr && (item=arr.pop())){
      	      arr1.push(item);
        	}
       	 console.log(arr1)
    
    5.100以内素数
    var i=2;
    var flag=fasle;
    var j;
    while(i<100){
        j=2;
        flag=false;
        while(j<i){
            if(i%j===0){
                flasg=true;
                break;
            }
            j++
        }
        if(!flag){
            console.log(i+"就是素数")
        }
        i++;
    }
    //方法2
    var i=2;
    var flag=fasle;
    var j;
    while(=2,flar=false,i<100){
        while(j<i){
            if(i%j===0){
                flasg=true;
                break;
            }
            j++
        }
        if(!flag){
            console.log(i+"就是素数")
        }
        i++;
    }
</script>

深度遍历

<script>
    1.深度遍历,只能深度遍历一个属性,并且属性名必须相同
    //链表
        var linked={
            //属性名相同 都是next
            value:1,
            next:{
                value:2,
                next:{
                    value:3,
                    next:{
                        value:4,
                        next:{
                            value:5,
                            next:{
                                value:6,
                                next:null
                            }
                        }
                    }
                }
            }
        }
        while(linked){
            console.log(linked.value);
            linked=linked.next;
        }
    
    2.如果属性名不同,可以通过数组
    	 var linked={
             //属性名不同
            value:1,
            a:{
                value:2,
                b:{
                    value:3,
                    c:{
                        value:4,
                        d:{
                            value:5,
                            e:{
                                value:6,
                                f:null
                            }
                        }
                    }
                }
            }
        }
         
        var arr=["a","b","c","d","e","f"];
        var i=-1;
        while(i++,linked){
            console.log(linked.value);
            //向后找
            linked=linked[arr[i]];
        }
</script>

break label,continue label

<script>
    //break label 用法:跳出多重嵌套循环  
    //只能跳出包含该break语句的代码块
    
    //continue 语句可以跟随一个标签名,用来指定继续执行的循环结构的起始位置
    
	求素数的第三种方法--最简便
   var i=1;
   var j;
    xt:while(j=1,i++<99){
          while(j++<i-1) if(i%j===0) continue xt;
          console.log(i+"是素数")
        
    求素数第四种方法
    	var i=1;
        var j;
        xt:while(i++<99){
            j=2;
            while(j<i){
                if(i%j===0) continue xt;
                j++;
            }
            console.log(i+"是素数")
        }
</script>

do while

1.不管是否循环都需要执行至少一次

2.需要开放入口条件和一个闭合的出口条件

特点:

首次没有入口条件,先执行,在判断

判断满足,则循环

不满足.则至少执行一次

执行次数:1~n次

适用于循环次数不明确的情况。

执行流程:

1.先执行一次循环操作之后,在进行布尔表达式判断
2.如果为true,则再次执行循环操作
3.如果结果为false,才会退出循环结构,执行后续代码

<script>
		方法一
		//当i大于100时 break就跳出循环 不会再执行循环语句块
		var i=3;
        do{
            i+=3;
            console.log("aa")
            if(i>100) break;//判断是否可以跳出循环  出口条件
            console.log("bbb")
        }while(i>5);//判断是否可以进入循环   入口条件
        //没有执行最后一句
    
    	方法二
    	//没有出口 会循环到不满足条件
        var i=3;
        do{
            i+=3;
            console.log("aa")
            console.log("bbb")
        }while(i>5 && i<=100);//判断是否可以进入循环
        //执行了最后一句
</script>

for循环

特点:

首次即有入口条件,先判断\在执行,适用于循环明确的情况

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

for(初始值(只执行一次);表达式1(每次开始执行,隐式转换为布尔值,如果是true进入循环语句块);表达式2(每次执行完语句块最后执行一次))
{
	语句块
}

for(初始部分;循环条件;迭代部分){
		//循环操作
}

for最适合循环次数明确

执行流程

首次执行部分(仅一次)

对布尔表达式进行判断,结果为true,则执行逻辑代码

本次执行完毕后,执行迭代部分,再次判断,结果仍为true,则再次执行逻辑代码

直到布尔表达式的结果为false时,才会退出循环结构,执行后续代码

 for (var i = 1; i <= 3; i++) {
    for (var j = 1; j <= 3; j++) {
      document.write('你好<br>')
    }
  }
  /*
   外层循环第1遍  按照这个案例里面的循环走了3遍
   外层循环第2遍  按照这个案例里面的循环又走了3遍
   外层循环第3遍  按照这个案例里面的循环又走了3遍
   所以总共你好打印了是9次
  */

//ES5中使用var定义的变量,for循环初始定义属于全局定义,循环完成后,这个变量仍然存在,并且这个变量不满足条件语句或者和条件语句无关系

//ES6中使用let定义的变量,仅在for循环语块中有效,出来for循环无效

<script>
    //表达式2每次执行完语句块最后再执行,有效的解决了continue跳出之前必须i++这种操作
    
    for(var i=10;i--){
        console.log("aa")
    }
    
    
    for(var i=0,s=0;i<=100;i++) s+=i;
    for(var i=0,s=0;i<=100;s+=i,i++);
    for(var i=0,s=0;i++<100;s+=i);
    for(var i=0,s=0;s+=i,i++<100);
    console.log(s)//以上四种写法的结果是一样的
    
     //死循环  等同于while(true){}
    	var arr=[1,2,3,4];
        for(;;){
            arr.pop();
            console.log(arr);
            if(arr.length===0) break;//利用break跳出
        }
    
    	//for循环求素数
    	for(var i=2;i<=100;i++){
            for(var j=2;j<i;j++){
                if(i%j===0)
            }
            console.log(i)
        }
</script>

深度遍历

//for 循环实现遍历链表
          var linked={
          value:1,
          next:{
            value:2,
            next:{
              value:3,
              next:{
                value:4,
                next:{
                  value:5,
                  next:{
                    value:6,
                    next:null
                  }
                }
              }
            }
          }
        }
        //通过for循环来实现遍历链表
        for(;linked;linked=linked.next){
            console.log(linked.value)
        }

九九乘法表

<script>
var table=document.getElementById("table");
    var str="";
    for(var i=1;i<10;i++){
        str+="<tr>";
            for(var j=1;j<=i;j++){
                str+="<td>"+i+"*"+j+"="+i*j+"</td>"
            }
        str+="</tr>";
    }
    table.innerHTML=str;
    
    //无表格版
    for(var i=1;i<=9;i++){
            document.write("<br>")
            for(var j=1;j<=i;j++){
                document.write(j+"*"+i+"="+i*j+" "+" ")
            }
        }
</script>

  • 4
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值