JavaScript - for 循环结构与数组

最新推荐文章于 2023-05-04 00:36:30 发布

Henry_ww

最新推荐文章于 2023-05-04 00:36:30 发布

阅读量479

点赞数 1

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/Henry_ID/article/details/119274869

版权

JavaScript 专栏收录该内容

47 篇文章 2 订阅

订阅专栏

循环结构

循环结构作用：代码重复执行

1.1-for循环结构

1.for循环语法

for( 语句1;语句2;语句3 ){
    循环体：需要反复执行的代码;
}

2.执行步骤：
- 1.执行语句1（定义一个循环变量）
  - 2.执行语句2，判断语句2条件是否成立（条件表达式）
    - 2.1 如果条件成立，则执行循环体代码
      - 执行语句3（循环变量自增），重复步骤2
    - 2.2 如果不成立，结束循环，执行大括号后面的代码
3.for循环好处及注意点
- 好处：循环变量的声明与循环变量自增在一个小括号中，可以更好的避免死循环
- 注意点：原则上语句1，语句2，语句3可以是任意代码，但是不建议乱写，因为会导致死循环

语句1：通常是定义循环变量
语句2：条件表达式
语句3：通常都是循环变量自增/自减（视需求而定

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body></body>
    <!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>for循环</title>
        </head>
        <body>
            <script>
                /* 
        1. for循环语法

        for(代码1;代码2;代码3){
            循环体代码
        };

         */

                //需求：打印三次 大前端爱你们么么哒
                for (let i = 1; i <= 3; i++) {
                    console.log("大前端爱你们么么哒");
                }

                /* 
            for循环注意点 ： 原则上代码1，代码2，代码3可以写任意代码,但是一般不会乱写
            代码1 ： 声明循环变量
            代码2 ： 循环条件
            代码3 ： 循环变量自增
          */
            </script>
        </body>
    </html>
</html>

在这里插入图片描述

1.2-for循环练习(箩筐思想求和)

箩筐思想求和

a.声明空箩筐

b.遍历萝卜堆数

c.将萝卜放入箩筐中

<!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>for循环-空框思想求和</title>
    </head>

    <body>
        <script>
            //4.求累加和/ 平均值 = 累加和/数量

            /* 
         箩筐思想 ： 三步法
         1.声明空箩筐
         2.遍历萝卜堆数
         3.将萝卜放入箩筐
          */
            //1.声明空箩筐
            let sum = 0;
            // 2.遍历萝卜堆数
            for (let i = 1; i <= 100; i++) {
                console.log(i); // 遍历出来  1 ~ 100
                // 3.将萝卜放入箩筐
                sum += i;
            }

            console.log(sum);
        </script>
    </body>
</html>

1.3-for循环练习(擂台思想求最大/小值)

擂台思想求最大/小值

a.声明擂主

b.遍历挑战者

c.依次与擂主PK，交换位置

<!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>for循环-擂台思想求最大值</title>
    </head>

    <body>
        <script>
                                /* 
                            擂台思想 ： 三步法
                        
                            1.声明空擂主 : （第一次挑战者无条件坐擂主）
                            2.遍历挑战者
                            3.依次和擂主PK
                            */

            //5.求最大值与最小值
            //请用户输入5个数, 将最大的那个数打印出来

            // 求最大值:

            // 定义一个擂主:保存最大值 , 需要的是用户的最大值,定义一个变量一定能够被打赢(定义一个最小值) -Infinity
            let max = -Infinity;
            // 打擂:5次  (for循环遍历)
            for (let i = 0; i < 5; i++) {
                let user = +prompt(`请输入第${i + 1}个数`);
                // console.log(i);

                // 依次和擂主Pk
                if (user > max) {
                    // 交换擂主
                    max = user;
                }
            }

            document.write(`您输入的数字中最大的那个数是${max}`);

     

             //请用户输入5个数, 将最小的那个数打印出来

            //  求最小值
            //1.声明空擂主 : （第一次挑战者无条件坐擂主）
            let min = Infinity;
            //2.遍历挑战者(for 循环)
            for (let i = 1; i <= 5; i++) {
                let num = prompt("请输入第" + i + "个挑战者");
                //3.依次和擂主PK
                if (num < min) {
                    // 交换擂主
                    min = num;
                }
            }
            console.log(min);
        </script>
    </body>
</html>

1.4-break与continue关键字

1.break：结束整个语句
- break既可以用于循环结构也可以用于switch分支结构
2.continue：结束本次循环体，进入下一次循环判断
- continue只能用于循环结构语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>break与continue关键字</title>
</head>
<body>
    
</body>
<script>
    /**
     * break：结束整个语句
        * break既可以用于循环结构也可以用于switch分支结构
     * continue：结束本次循环体，进入下一次循环判断
        * continue只能用于循环结构语句
     */



    //示例：吃包子：我买了十个包子，包子每次只能吃一个，需要循环吃十个
        //break：假如吃到第五个我吃饱了，后面的包子就都不用吃了
        //continue:假如吃到第五个吃出来小强，那我第五个不吃了，但是我没吃饱，后面还是要继续吃
    let sum = 0;
    for(let i = 1;i<=10;i++){

        // continue
        // if(i == 5) {
        //     console.log ( "吃到小强了，这个包子我不吃了" );
        //      continue;//结束本次循环体（后面的代码不会执行），循环没有结束，还是会依次执行语句3和语句2
        // };

        //break
        if(i==5){
            console.log ( "我吃饱了，后面的包子都不想吃了" );
            break;//结束整个循环语句
        }

        console.log ( "我吃的是第" + i + "个包子" );
    }

</script>
</html>

1.5-循环次数不固定02：穷举

穷举：从1遍历到无穷大，找出符合条件的数

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>循环次数不固定02：穷举</title>
    </head>
    <body></body>
    <script>
        //需求：有一群人，如果3个人站一排多出1个人，如果4个人站一排多出2个人，如果5个人站一排多出3个人
        //请问这群人有多少人

        for (let i = 1; i < Infinity; i++) {
            //从1循环到无穷大，也是一种死循环
            if (i % 3 == 1 && i % 4 == 2 && i % 5 == 3) {
                console.log("人数为" + i);
                break; //找到答案，结束循环
            }
        }
    </script>
</html>

1.6-数组遍历

1.数组的遍历：获取数组中每一个元素的值，称之为遍历该数组
- 如果想要获取数组中每一个元素的值，则需要通过循环语法来获取
2.一般使用for循环来遍历数组，只不过数组的遍历是一种固定格式的for循环
3.固定循环语句格式:for(let i = 0; i < arr.length; i++) {// 数组遍历的固定结构}
- 思考：为什么循环变量let i = 0 而不是1呢？

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>数组遍历</title>
    </head>
    <body></body>
    <script>
        /**
         * * 1.数组的遍历：获取数组中每一个元素的值，称之为遍历该数组
         *          * 如果想要获取数组中每一个元素的值，则需要通过循环语法来获取
         *    2.一般使用for循环来遍历数组，只不过数组的遍历是一种固定格式的for循环
         *    3.固定循环语句格式:
         *    `for(let i = 0; i < arr.length; i++) {
         *    // 数组遍历的固定结构
         *    }`
         */

        let arr = [10, 20, 30, 40, 50];

        for (let i = 0; i < arr.length; i++) {
            let item = arr[i]; //获取数组的每一个元素
            console.log(item);
        }
    </script>
</html>

1.7 - 翻转数组

//真正使用,一行搞定
console.log( arr.reverse( ) );

1.7.1 - 翻转数组(思维锻炼)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body></body>
    <script>
        let arr = ["a", "b", "c", "d", "e"];
        //  0   1   2   3   4

        // 翻转数组目标:['e','d','c','b','a']
        //        0   1   2   3   4

        // 简单的思路解析
        // 1.创建一个新数组:空的
        // 2.从原数组最后开始读取元素:读取一个就放到新数组中

        // 分析:新数组放数据  新数组[新数组.length] = 值
        // 分析:老数组如何从后面开始读取数据? for循环的变量  从 length - 1 到 0

        let newArr = [];
        for (let i = arr.length - 1; i >= 0; i--) {
            console.log(arr[i]);
            newArr[newArr.length] = arr[i];
        }
        console.log(newArr);
    </script>
</html>

1.7.2 - 交换数组(思维锻炼)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body></body>
    <script>
        let arr = ["a", "b", "c", "d", "e"];
        /* 
        1.2 交换法
            (1)遍历数组一半
            (2)下标为 i元素   与  下标为 arr.length-1-i  元素交换
        */

        //1.遍历数组的一半
        for (let i = 0; i < arr.length / 2; i++) {
            // 第一个与最后一个
            // i= 0 arr.length - 1
            // i= 1 arr.length - 1 - 1
            // i= 2 arr.length - 1 - 2

            // i  ===  arr.length - 1 - i

            console.log(i); //0,1,2

            // a = arr[i]  b = arr[arr.length - 1 - i]
            // let  temp = a
            // a = b
            // b = temp

            //2. 下标为i元素  和 下标为arr.length-1-i元素交换
            let temp = arr[i]; // 01-定义一个新变量保存  第 i 个位置的值
            arr[i] = arr[arr.length - 1 - i]; //  后面的覆盖前面的
            arr[arr.length - 1 - i] = temp; //
        }
        console.log(arr);
    </script>
</html>

1.8 - 二维数组及遍历

二维数组：数组元素又是数组

◆ 一维数组：数组元素都是基础数据类型
◆ 二维数组：数组元素都是一维数组
◆ 二维数组访问：一维一层下标
◆ 一维访问：数组变量[下标] 得到的是数组
◆ 二维访问：数组变量[下标][下标]

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body></body>
    <script>
        let angle = ["安琪拉", 18, "女", "仍个球"];
        let fox = ["妲己", 20, "女", "爱心"];
        let monkey = ["猴子", 22, "男", "棍子"];

        // 二维数组:将数组扔到数组里
        let hero = [angle, fox, monkey];
        console.log(hero);

        //    二维数组访问
        // 1.访问一维:数组变量[下标]
        console.log(hero[1]);

        // 2.访问二维:在第一维的基础上增加下标访问即可  数组变量[下标][下标]
        console.log(hero[1][0]);

        // 二维数组遍历:循环 里面  套循环
        for (let i = 0; i < hero.length; i++) {
            // i 是下标,hero[i] 访问元素:也是一个数组
            console.log(hero[i]);

            // hero[i] 是一个数组:可以遍历
            for (let j = 0; j < hero[i].length; j++) {
                // hero[i] 是一个数组,j 是数组下标  ,访问元素 hero[i][j]
                console.log(hero[i][j]);
            }
        }
    </script>
</html>

1.9 - 数组形式访问字符串

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body></body>
    <script>
        let str = "我爱你中国";
        console.log(str);

        // 字符串:本质的存在是 数组,由下标和length
        console.log(str.length);

        console.log(str[0]);

        // 字符串具有恒定性:不可修改
        str[0] = "你";
        console.log(str); //无效

        // 变量可以被重新赋值:修改字符串就必须给字符串变量重新赋值
        str = "你爱我中国";
        console.log(str);

        // 总结
        // 以后但凡有 length 属性的东西,一定可以用数组的形式去访问(由下标):为开发者带来便捷性
        // 能访问不一定能修改(数组可以,其他都不行)
    </script>
</html>

2.0 - 案例:

01-九九乘法表

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body></body>
    <script>
        // 需求:做九九乘法表

        // 九九乘法表 : 有行有列 (二维结构)

        for (let i = 1; i <= 9; i++) {
            // 循环:负责输出内容
            // 列的数量跟行有关:第几行就有几列

            for (let j = 1; j <= i; j++) {
                // i 代表行, j 代表列

                document.write(`${i} * ${j}  =  ${i * j}  &nbsp;`);
            }
            // 换行
            document.write(`<br>`);
        }
    </script>
</html>

02 - 动态生成柱状图

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            .box {
                display: flex;
                align-items: flex-end;
                justify-content: space-evenly;
                width: 1200px;
                height: 400px;
                border: 3px solid rgb(241, 30, 30);
            }
            /* .box > div {
                width: 400px;
                height: 300px;
                background-color: rgb(12, 221, 236);
            } */
        </style>
    </head>
    <body>
        <!-- <div class="box">
            <div></div>
        </div> -->
    </body>
    <script>
        // 1.获取用户输入
        let sum = +prompt("请输入柱状图柱子的数量");
        // 柱子宽度
        let width = 1200 / (sum * 2 + 1);
        // 渲染大盒子  一半
        document.write('<div class="box">');
        // 遍历每一个柱子
        for (let i = 0; i < sum; i++) {
            // 柱子的高度,颜色rgb都随机
            let h = Math.ceil(Math.random() * 400);

            let r = Math.round(Math.random() * 255);
            let g = Math.round(Math.random() * 255);
            let b = Math.round(Math.random() * 255);

            // 渲染柱子
            document.write(`<div style="width:${width}px;height:${h}px;background-color: rgb(${r}, ${g}, ${b});"></div>`);
        }

        // 结束渲染大盒子
        document.write("</div>");
    </script>
</html>

03- for循环 - 起始值,结束值 for (; start <= end; start++)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            div {
                width: 100px;
                height: 100px;
                background-color: #6cf;
                float: left;
                margin: 10px;
            }
        </style>
    </head>
    <body></body>
    <script>
        // 需求:用户指定要生成的div次数
        // let user = +prompt("请输入要生成的div数量");
        // for (let i = 0; i < user; i++) {
        //     document.write("<div></div>");
        // }

        let start = +prompt("请输入起始值:");
        let end = +prompt("请输入结束值:");
        for (; start <= end; start++) {
            document.write("<div></div>");
        }
    </script>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=, initial-scale=1.0" />

        <title>Document</title>
    </head>
    <body></body>
    <script>
        // // 求 1 - 10 之间的所有整数之和
        // // 定义一个空框
        // let num = 0;
        // // 遍历
        // for (let i = 1; i <= 10; i++) {
        //     // 求和
        //     num += i;
        // }
        // // 打印
        // console.log(num);

        let sum = 0;
        let start = +prompt("请输入初始值");
        let end = +prompt("请输入结束值");
        for (; start <= end; start++) {
            sum += start;
            console.log(start);
        }
        console.log(sum);
    </script>
</html>

循环补充

while循环结构

1.语法：

while(条件 true/false){

        循环体/需要重复执行的代码;
    }

执行步骤：
- 1.判断条件是否成立
  - 1.1 如果成立，执行循环体代码，然后重复步骤1
  - 1.2 如果不成立，结束循环，执行大括号后面的代码
3.注意点
- （1）小括号中的语句，无论结果是什么都会转换成布尔类型来判断是否成立
- （2）避免写一个死循环

do-while循环结构

1.语法:

do{
    循环体;
}while( 条件 );

2.执行过程
- 1.先执行循环体代码
- 2.执行条件语句
  - 如果结果为true，执行循环体代码
  - 如果为false，循环结束
- 3.重复步骤2
3.do-while和while实现的循环其实是一样的，只有一个不同点：do-while循环不管怎样先执行一次循环体代码，然后再判断条件
- while循环：先奏后斩（先判断条件再执行循环体）
- do-while循环：先斩后奏（不管怎样先执行一次循环体代码，然后再判断条件）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>



<script>

    /* 1. 学习目标 ： do-while循环 
       
       2. 学习路线
            (1)复习while语法特点
            (2)学习do-while语法
            (3)介绍do-while语法应用场景
    
    */


    //1.while循环:
    //let i = 1;
    // while(i > 5){
    //     //循环条件不成立，循环体一次都不执行
    //     console.log ( "哈哈哈哈" );
    //     i++
    // }

    //2.do-while循环
    /**
     do-while语法：(用的很少)

     do{
            循环体;
        }while( 条件 );

     特点：无论如何先执行一次循环体，然后再去判断条件
     */
    let i = 1;
        do{
            console.log ( "呵呵呵呵呵" );
            i++;
        }while (i > 5);



    //while循环：先奏后斩（先判断条件再执行循环体）
    //do-while循环：先斩后奏（不管怎样先执行一次循环体代码，然后再判断条件）


    //3.do-while循环与while循环应用场景
    //无论如何需要先执行一次循环体，使用do-while代码更简洁

    //例子：让用户输入账号和密码，如果输入正确就登陆成功，如果输入错误就让他一直输入

    //while循环实现
    // let username = prompt('请输入账号');
    // let password = prompt('请输入密码');
    //
    // while(username != 'admin' || password != '123456'){
    //     username = prompt('请输入账号');
    //     password = prompt('请输入密码');
    // }

    //do-while实现
    do{
        let username = prompt('请输入账号');
        let password = prompt('请输入密码');
    }while(username != 'admin' || password != '123456')

</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>循环补充</title>
    </head>
    <body></body>
    <script>
        // while循环: 解决不确定次数的循环
        // while (条件 true / false) {
        //     循环体 / 需要重复执行的代码;
        //     一般, while循环都会结合break
        // }

        // 需求: 猜数字

        let rand = Math.ceil(Math.random() * 100); // 1-100

        // while循环: 不确定猜的次数
        let flag = true;
        // while (flag) {
        //     // 死循环

        //     let user = +prompt('请输入0-100之间的数字')

        //     if (user > rand) {
        //         alert('猜大了')
        //     } else if (user < rand) {
        //         alert('猜小了')
        //     } else {
        //         alert('猜中了,就是' + rand)
        //         // break                           // 结束循环
        //         flag = false
        //     }
        // }

        // 不论for循环还是while循环: 条件如果不满足: 循环不执行
        for (; false; ) {
            console.log("1");
        }

        // 需求: 循环必须执行,哪怕只有一次?
        // do {
        //     循环体;
        // } while (条件);

        // 先干了再说
        do {
            console.log(2);
        } while (false);

        // do-while的特点: 保证循环体一定执行1次(最少)
        // 循环体执行的次数 与条件判定的次数一样

        // 总结: 三种循环的选择
        // 1. 如果指定次数: for循环(有起始有结束)
        // 2. 如果不确定次数: while
        // for替代: for(;;){}
        // 3. 如果要求循环体必须执行: do-while
        // for替代: for(let flag = true; flag;){}
    </script>
</html>

三种循环结构总结

1.原则上，三种循环结构语句之间可以互转，只不过每一种语句的适用场景不一样
2.最常用：for循环：适合循环次数固定
3.while循环：适合循环次数不固定
4.do-while循环：适合循环次数不固定，但是循环体代码至少要执行一次

Henry_ww

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript - for 循环结构与数组

循环结构循环结构作用：代码重复执行1.1-for循环结构1.for循环语法for( 语句1;语句2;语句3 ){ 循环体：需要反复执行的代码;}2.执行步骤：1.执行语句1（定义一个循环变量）2.执行语句2，判断语句2条件是否成立（条件表达式）2.1 如果条件成立，则执行循环体代码执行语句3（循环变量自增），重复步骤22.2 如果不成立，结束循环，执行大括号后面的代码3.for循环好处及注意点好处：循环变量的声明与循环变量自增在一个小括号中
复制链接

扫一扫