JavaScript:for循环与数组

for循环

把声明起始值、循环条件、变化值写到一起，让人一目了然

• for(声明循环次数的变量;循环条件;变化值){循环体}

for循环和while循环的区别

• 当如果明确了循环的次数的时候推荐使用for循环
• 当明确循环的次数的时候推荐使用while

循环退出

• continue：结束本次循环，继续下次循环
• break：跳出所在的循环

循环嵌套

• for(声明外部循环次数的变量;循环条件;变化值){for(声明内部循环次数的变量;循环条件;变化值){循环体}}

  • 九九乘法表

<script>
        // 1. 打印几行？ 9行
        // 2. 每行打印几个div? 当前行数个div

        // 外层循环 1 - 9
        for (let i = 1; i <= 9; i++) {
            for (let j = 1; j <= i; j++) {
                document.write(`<div>${j} x ${i} = ${i * j}</div>`)
            }
            document.write(`<br>`)
        }
    </script>

• 倒三角

   // 外层打印几行
        for (let i = 1; i <= 5; i++) {
            document.write(`这是第${i}行,内层循环${i}次`)
            for (let j = 1; j <= i; j++) {
                document.write(`★`)
            }
            document.write(`<br>`)
        }

最常用

• 循环数组

数组

数组的使用

• 数组的本质是集合，使用为增删改查

  • 增

    • 后增arr.push()
    • 前增arr.umshift

  • 查

    • 数组[下标]

  • 改

    • 数组[下标]=新值

  • 删

    • arr.pop()
    • arr.shift
    • arr.splice(下标，个数)

遍历数组

• 访问数组里的每一个数据
• 依次访问
• 循环访问
• 提取公式

案例

• 冒泡排序（重点）

  <script>
        let arr = [5, 4, 3, 2, 1]

        // 1. 创建外层循环控制遍历轮数，轮数为数组长度 - 1
        // arr.length = 5
        for (let i = 1; i <= arr.length-1 ; i++) {
            // 轮次为 i  交换次数为x     i + x  = arr.length   
            // 所以 x = arr.length - i
            // console.log(arr.length - i);
            // document.write(`第${i}轮循环<br>`);
            for (let j = 1; j <= arr.length ; j++) {
                // document.write(`每轮循环的第${j}次<br>`)
                if (arr[j] < arr[j - 1]) {
                    let temp
                    temp = arr[j]
                    arr[j] = arr[j - 1]
                    arr[j - 1] = temp
                }

            }
        }
        console.log(arr);
        </script>

• 求最大值，最小值

    <script>
        let arr = [100, 1000, 1, 77, 52, 25, 7]
        // 先定义数组中下标为0的元素为最大值
        let max = arr[0]

        // 循环遍历数组 如果遍历数组中的元素大于max值，则将该项赋值给max，然后继续比较, 知道循环结束

        for (let i = 1; i < arr.length; i++) {
            if (arr[i] > max) max = arr[i]
            // max = arr[i] > max ? arr[i] : max
        }
        document.write(max)
    </script>

• 生成柱状图

 <script>
        // 1. 准备一个数组存放用户输入的四个数据
        let arr = []
        // 2. 利用循环，实现4次prompt弹窗
        for (let i = 0; i < 4; i++) {
            arr.push(prompt(`请输入第${i + 1}季度的数据`))
        }
        document.write(`<div class="box">`)
        for (let i = 0; i < arr.length; i++) {
            document.write(`
                <div style="height: ${arr[i]}px;">
                    <span> ${arr[i]}</span>
                    <h4>第${i + 1}季度</h4>
                </div>
            `)
        }
        document.write(`</div>`)
    </script>

\