06-第六章 for循环 while后循环 do while

一 、for循环

1. for( ){} 循环

for( 初始值;判断条件;步幅){ code }

for( var i =0; i < 5; i++ ){ 
//i初始值为0；i是否小写5；每次循环后i加1
//code
console.log(i);  //4
}

        for ( let i = 0; i < 5; i++){
            console.log(`第 ${i+1} 输出为 ${i}`);
        }

– 执行顺序 –

for( ①;②;③ ){
④
}

执行顺序为: ①->②->④->③->②->④->③->②
特别提示：i 在最后为5但是不会再执行for循环里面的代码

2. continue 跳过本次循环

continue跳过本次，后面代码还是会执行

        for ( let i = 0; i < 10; i++) {
            if ( i === 5) {
                continue;
            }
            console.log(`一共输出了 ${i}次`)
        }

image.png

3. break 跳出循环

continue跳出本次，后面代码立刻结束

        for ( let i = 0; i < 10; i++) {
            if ( i === 5) {
                break;
            }
            console.log(`一共输出了 ${i}次`)
        }

image.png

4.break 的运用

5. 死循环

比较运算的时候都是判断一个值为 true和 false;

比较条件直接写 true 就是死循环
比较条件直接写 false 就是立刻结束此循环，这一次循环永远不可能执行

          for ( let i = 0; true; i++) {
            if ( i === 5) {
                break;
            }
            console.log(`一共输出了 ${i}次`)
        }

二 、变量自增

i++ 先赋值后自增
++i 先自增后赋值
i-- 先赋值后自减
--i 先自减后赋值

前置++, --在参与运算的时候，会在递增前返回数值，单独++没有区别
后置++, --在参与运算的时候，会在递增后返回数值，单独++没有区别

1、 i++ ,先赋值后自增

var a = 20;
var b =a++;//先把a的值赋值给b，然后加 1
alert( b ); 20
alert( a ); 21

2、 ++i ,先自增后赋值

var a = 20;
var b =++a;//先加 1,然后把a的值赋值给b，
alert( b ); 21
alert( a ); 21

三 、for循环与自定义属性案例

四 、嵌套for 循环

        for ( let i = 0; i < 5; i++){
            for ( let j = 0; j < 6; j++) {
                console.log(1);
            }
        }
//  输出30次的1

        for ( let i = 0; i < 5; i++){
            for ( let j = 0; j < 6; j++) {
                for (let z = 0; z < 4; z++){
                    console.log(1);
                }
            }
        }

//  输出120次的1

五 、while 后循环 do while前循环

1.while后循环

        let i = 0;
        while ( i < 10) {
            console.log(i);
            i++;
        }

等同于

        for (let i=0; i < 10; i++ ) {
            console.log(i);
        }

2.while前循环

1.do{

2. code 1 //code 1会先执行一遍，然后在根据条件决定是否再执行code 1;
   3.}while( 条件);

六、for循环的运用

九九乘法表

1.

        //  i 代表(行)  j代表 （列）
        for ( let i = 1; i < 10 ; i++ ) {
            for ( let j = 1; j < i+1 ; j++) {
                box.innerHTML += `<span> ${i} * ${j} = ${ i * j} </span>`;
            }
            box.innerHTML += `<br>`;
        }

image.png

2.

        for ( let a = 1 ; a < 10; a++ ) {
            for ( let b = a; b < 10; b++ ) {
                box.innerHTML += `<span> ${a} * ${b} = ${ a * b } </span>`;
            }
            box.innerHTML += `<br>`;
        }

image.png

3.

        for ( let i = 9; i >= 1; i--) {
            for ( let j = 1; j <= i; j++) {
                box.innerHTML += 
                `
                    <span>
                        ${i} * ${j} = ${ i * j }
                    </span>
                `;
            }
            box.innerHTML +=`<br>`; 
        }

image.png

        for ( let i = 9; i >= 1; i--) {
            for ( let j = i; j <=9; j++) {
                box.innerHTML +=
                `
                    <span>
                        ${i} * ${j} = ${ i * j}
                    </span>
                `;
            }
            box.innerHTML +=`<br>`; 
        }

image.png