一、循环嵌套

1.1循环嵌套的执行逻辑

循环嵌套(双重循环) : 循环里面嵌套一个循环

// debugger
        // 一行10列的表格
        let str = '<table border="1" rules="all" width="700" height="500">';

        // 外层循环:行数    循环1次，
        for(let j=1; j<=10;j++){             //j=1                     2 
            str += '<tr>';

            // 内层循环:列数     内层循环循环一周。
            for(let i=1;i<=10;i++){         //i=1 2 3 4 5 6 7 8 9 10  i=1 2 3 4 5 6 7 8 9 10
                str += '<td></td>'
            }

            str += '</tr>';
        }
    
        str += '</table>';
        document.write(str)

1.2 循环嵌套三角形星星

<script>
        /* 需求：打印一个三角形星星
        ☆
        ☆ ☆
        ☆ ☆ ☆
        ☆ ☆ ☆ ☆
        ☆ ☆ ☆ ☆ ☆
        */

        /* 
        i 外层循环行数 : 1 2 3 4 5
        j 内层循环列数 :
            当i为1,  打印1列
            当i为2,  打印2列
            当i为3,  打印3列
            当i为4,  打印4列
            当i为5,  打印5列
        */   
        //外层
        for(let i = 1;i<=5;i++){
            //内层
            for(let j = 1;j <= i;j++){
                document.write('☆ ')
            }
            document.write('<br>')
        }
    </script>

1.3 使用循环嵌套写九九乘法表

<script>
        // let str = '<table border="1" rules="all" width="700" height="500"><tr><td></td></tr><tr><td></td><td></td></tr>'
        let str = '<table border="1" rules="all" width="700" height="500">'
        for(let row=1; row<10 ;row++){
            str += '<tr>';
            for(let col=1; col<=row;col++){
                str +=`<td>${col}*${row}=${col*row}</td>`
            }
            str += '</tr>';
        }
        str +='</table>'
        document.write(str)

    </script>

二、逻辑运算符扩展

1.1-逻辑短路

<script>
    // JS设计者设计的逻辑&&  ||的一种规则
    let a = 10;
    let ret = false && ++a;
    console.log(a); // 10
    /* 
    逻辑与短路：
    根据逻辑与的口诀：找假
    左侧为false，右侧就没有必要再进行一次运算，所以右侧a++没有被计算，相当于被短路
    */

    let b = 10;
    let ret1 = true || ++b;
    console.log(b); // 10
    /* 
    逻辑或短路：
    根据逻辑与的口诀：找真
    左侧为true，右侧就没有必要再进行一次运算，所以右侧b++没有被计算，相当于被短路
    */

    /*
    小结：
      短路有两种：
      逻辑与：    false && 被短路
      逻辑或：    true || 被短路
    */
  </script>

1.2-逻辑运算符的值

<script>
    // 比较运算符 的结果是布尔值
    // 逻辑运算符的结果是什么？ 哪一侧的数据能决定整个式子的结果就将哪个的数据返回
    let ret = 10 || 20;     // Boolean(10)   true
    console.log(ret);       // 10

    let ret1 = 10 && 20;     // Boolean(10)   true && Boolean(20) true
    console.log(ret);       // 20

    console.log('猫' || '狗');  //猫
    console.log('猫' && '狗');  //狗

  </script>

三、数组类型

1.1-数组介绍

数组(Array): 就是一组数据的集合存储在单个变量下的优雅方式

数组是什么？ : 是一种复杂数据类型
数组作用？ : 可以在变量中 ‘存储多个数据’
数组内存原理？ : 数组内存由三个部分组成(数组三要素)
1. 元素: 数组中的数据
2. 下标: 元素的位置
3. 长度: 元素的数量

//需求：存储 五个人名字
        //弊端：（1）代码冗余 （2）维护不便
        // let s1 = '小明'
        // let s2 = '小刚'
        // let s3 = '小花'
        // let s4 = '小美'
        // let s5 = '小白'

        //使用数组： 一个变量存储多个数据
        let array = ['小明','小刚','小花','小美','小白']

        console.log( array )

1.2-数组语法

数组声明： let 数组名 = [元素1,元素2,元素3,.......]
数组取值数组名[下标]
数组长度数组名.length

//1.声明数组    let 数组名 = [数据1,数据2,数据3,.....]
let names = ['小明','小刚','小花','小美','小白']
//2.数组取值   数组名[下标]
console.log( names )//['小明', '小刚', '小花', '小美', '小白']
console.log( names[0] )//小明
//3.数组长度   数组名.length
console.log(names.length)//5

4.利用new 创建数组
var 数组名 = new Array();
var arr = new Array(); //创建了一个空数组

1.3-数组遍历

<script>
        /* 
        1.数组语法
            (1).数组声明：  let  数组名 = [元素1,元素2,元素3,.......]
            (2).数组取值    数组名[下标]
            (3).数组长度    数组名.length
        2.数组遍历： 依次读取数组每一个元素值
            固定格式的for循环:  
                for(let i = 0;i < arr.length ;i++){
                    arr[i]
                }
         */

        let names = ['小明','小刚','小花','小美','小白','小彪']

        //遍历数组： for循环
        for(let i = 0;i < names.length;i++ ){
            console.log( names[i] )
        }   
        // console.log( names[0] )
        // console.log( names[1] )
        // console.log( names[2] )
        // console.log( names[3] )
        // console.log( names[4] )
        
    </script>

三、数组操作(增删改查)

1.1-查询与修改元素

<script>
        /* 
        1.声明数组  let 数组名 = [元素1,元素2,元素3,....]
        2.数组取值(查)    数组名[下标]
        3.数组赋值(改)    数组名[下标] = 值
        */    

        let arr = [ 20,66,88,50,100 ]
        
        /*数组取值 
        (1)如果下标存在，则会获取元素值
        (2)如果下标不存在，则会获取undefined
        */
        console.log( arr[2] )//88
        console.log( arr[6] )//undefined

        /*数组赋值 
        (1)如果下标存在，则获修改元素值
        (2)如果下标不存在，
        */
       arr[0] = 99//修改0下标元素值
       arr[6] = 70//动态新增一个元素
       console.log(arr)
        
    </script>

1-2-新增元素(push与unshift)

<script>
        /*数组新增有两个方法
        
        数组名.push(元素)  : 一个或多个元素,添加到末尾
        数组名.unshift(元素)  : 一个或多个元素,添加到开头
        
        */
        let arr = [20,50,88,60,100]
        //1. 添加到末尾
        arr.push(90,200)
        console.log(arr)
        //2. 添加到开头
        arr.unshift(5,8)
        console.log(arr)
</script>

1.3-删除元素(pop与shift)

<script>
        let arr = [10,20,30,40,50]
        
        //1.删除最后一个元素  arr.pop()
        arr.pop()
        console.log(arr)

        //2删除第一个元素  arr.shift()
        arr.shift()
        console.log( arr )
</script>

1.4-删除指定元素

<script>
        let arr = [10,20,30,40,50]
        
        /* 
        arr.splice(start,deleteCount)
            第一个值： 起实位置。 从0开始
            第二个值： 要删除的数量
                * 如果没有指定数量，则会删除从起始位置到后面所有元素
        */
        arr.splice(1,2)//表示从下标1开始，往后删除2个元素.把20，30给删除了
        console.log(arr)//[10,40,50]
        
    </script>

四、数组应用

1.1-数组求和

<script>
      /* 本案例思路在开发中很常见，叫做累加和 : 求一组数据的 总和 
      (1)声明一个变量存储结果
      (2)遍历数组中每一个元素
      (3)累加
      */
      let arr = [20, 50, 66, 88, 70]

      //1.声明空变量存储结果
      let sum = 0
      //2.遍历数组
      for (let i = 0; i < arr.length; i++) {
        console.log(arr[i])
        //3.累加
        sum += arr[i]
      }

      console.log(sum, sum / arr.length)
    </script>

1.2-求数组最大元素与最小元素

<script>
        /*求数组最大值
        1.声明变量默认为第一个元素
        2.遍历数组
        3.依次比较大小，然后赋值
        */
        let arr = [20,50,66,88,70]    

        //1.声明变量默认为第一个元素
        let max = arr[0]
        //2.遍历数组
        for(let i = 1;i < arr.length;i++){
            console.log( arr[i] )
            //3.比较大小，然后赋值
            if( arr[i] > max){
                max = arr[i]
            } 
        }

        console.log(max)
    </script>

1.3-筛选数组

<script>
        //需求：将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大于等于 10 的元素选出来，放入新数组

        /* 
        1.找出指定范围符合条件的数
        2.把符合条件的数放入新数组中（新增元素）
        */
        

        let arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
        //1.声明空数组
        let newArr = []
        //2.遍历旧数组，找出符合条件的数
        for(let i = 0;i<arr.length;i++){
            if( arr[i] >= 10 ){
                //3.添加到新数组中
                console.log(arr[i])
                newArr.push( arr[i] )
            }   
        }

        console.log( newArr )
    </script>

1.4-查找元素的下标

<script>
        let arr = ['zhangsan', 'lisi', 'wangwu', 'zhaoliu', 'qianqi','wangwu']

        // 查找 wangwu 的下标
        let target = 'wangwu'
        for(let i=0;i<arr.length;i++){
            if(arr[i] == target){
                
                console.log(`与${target}相同的元素的下标是${i}`);
            }
        }

    </script>

1.5-数组去0

<script>
      //需求：将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中的 0 去掉后，形成一个不包含 0 的新数组

      /*实际开发场景：去除数组中指定的元素，生成新数组
            (1)微信账单： 收入 + 支出。  需求是只看收入(支出类型去除)
            (2)商品列表 ： 京东自营(把非自营商品去除)
        */

      let arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
      //1.声明空数组存储结果
      let newArr = []
      //2.遍历数组，找出不为0的元素
      for (let i = 0; i < arr.length; i++) {
        if (arr[i] !== 0) {
          console.log(arr[i])
          //3.新增到空数组
          newArr.push(arr[i])
        }
      }

      console.log(newArr)
    </script>

1.6-数组坍塌

<script>
    // 将元素0删除掉
    let arr = [5, 12, 0, 8, 11, 0, 9, 0, 15, 0, 0, 20, 0, 28, 19, 0, 3];
    // 方法一
    /* for (let i = 0; i < arr.length; i++) {
      if (arr[i] == 0) {
        arr.splice(i, 1);
        i--;
      }
    } */
    // 方法二
    for (let i = arr.length-1; i >= 0; i--) {
      if (arr[i] == 0) {
        arr.splice(i, 1);
      }
    }
    console.log(arr);

1.7 数组翻转

<script>
    let arr = ['red','green','blue','orange','pink','purple'];
    let newArr = [];
    for(let i = arr.length - 1; i >= 0; i--){
      newArr[newArr.length] = arr[i];
    }
    console.log(newArr); // ['purple', 'pink', 'orange', 'blue', 'green', 'red']
</script>

五、循环结构while循环

1.1-while循环

<script>
        // 
        // for(let i=1; i<=10; i++){
        //     console.log(i);
        // }

        // while就是for循环的一个语法变形
        let i = 1;
        while (i <= 10) {
            console.log(i);
            i++
        }

        /* 
        语法：
            // ...
            while(表达式){
                // 循环体
            }
            // ... 后续代码
        执行逻辑：
            首先判断 表达式 是否成立，如果不成立就退出整个while结构，
            如果成立就执行 循环体 
            当循环体执行结束后，再来判断表达式
            依此规律循环往复的执行，直到表达式不成立
        
        */
        
    </script>

1.2 do while循环

1.do while 循环 语法结构
do {
	// 循环体代码 - 条件表达式为true时重复执行循环体代码
} while(条件表达式);
2. 执行思路：跟while不同的地方在于do while 先执行一次循环体，在判断条件，如果条件表达式结果为真，则继续执行循环体，否则退出循环 
3.我们的do while 循环体至少执行一次

1.3-while循环与for循环的区别

<script>
        // for循环体一般于根据次数进行循环(循环次数已知)
       
        // while循环一般于根据条件进行循环(循环次数未知)
        // while 在解决循环次数未知时的代码 套路

        /* 
        while( true ){
            // ....
            // ....
            if(退出条件){
                // 退出 break在循环内会结构当前的循环结构
                break;
            }
            // ....
            // ....
            // ....
            // ....
        } 
        */

        /* while(true){
            let data = prompt('请输入数，如果要退出，就输出大于10000的数')

            if(data > 10000){
                break;
            }

            console.log(data)
        } */

        while(true){
            let data = prompt('请输入一个数，如果想退出，请输入我要退出');
            console.log(data);
            if(data == '我要退出'){
                break;
            }
        }

    </script>

1.3-break与continue

<script>
        // break  必须用在循环内
        // break就是用于结束循环的，
        /* 
        for(let i=0;i<100;i++){
            document.write('hello')
            break;
            document.write('hello')
        } */
</script>

<script>
        // continue 必须用在循环体
        // 用于结构本次循环其后的代码，继续下一次循环
        for(let i=1;i<10;i++){
            if( i % 3 == 0){
                continue;
                // break;
                // console.log('hello')
            }
            console.log(i)
        }

        /* 
        break
            直接跳出当前循环结构

        continue
            结构本次循环，继续下一次循环
        */

    </script>

JS基础--循环嵌套&逻辑短路&数组&while循环

一、循环嵌套

1.1循环嵌套的执行逻辑

1.2 循环嵌套三角形星星

1.3 使用循环嵌套写九九乘法表

二、逻辑运算符扩展

1.1-逻辑短路

1.2-逻辑运算符的值

三、数组类型

1.1-数组介绍

1.2-数组语法

1.3-数组遍历

三、数组操作(增删改查)

1.1-查询与修改元素

1-2-新增元素(push与unshift)

1.3-删除元素(pop与shift)

1.4-删除指定元素

四、数组应用

1.1-数组求和

1.2-求数组最大元素与最小元素

1.3-筛选数组

1.4-查找元素的下标

1.5-数组去0

1.6-数组坍塌

1.7 数组翻转

五、循环结构while循环

1.1-while循环

1.2 do while循环

1.3-while循环与for循环的区别

1.3-break与continue