for循环嵌套（99乘法表）与数组增删改查（冒泡排序、柱状图）

本文链接：https://blog.csdn.net/hs_2017112123/article/details/128129121

一、循环-for

1. for循环基本使用

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

for循环和while循环的区别：

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

当不明确循环的次数的时候推荐使用while循环

        // 1. 利用for循环输出1-100岁
        for (let i = 1; i <= 100; i++) {
            document.write(`我今年${i}岁了 <br>`)
        }

        //  2. 求1-100所有的偶数和
        let sum = 0
        for (let j = 1; j <= 100; j++) {
            if (j % 2 === 0) {
                sum += j
            }
        }
        document.write(sum)

        // 3. 页面中打印5个小星星
        for (let z = 1; z <= 5; z++) {
            document.write('*')
        }

        // 数组循环/遍历
        let arr = ['马超', '赵云', '张飞', '关羽', '黄忠', '貂蝉']
        // console.log(arr)
        // document.write(arr)
        // arr length 长度，通过它可以告诉我们数组里面有几个元素
        document.write(arr.length)
        for (let i = 0; i < arr.length; i++) {
            document.write(`${arr[i]} <br>`)
        }

2. 退出循环

        for (let i = 1; i < 6; i++) {
            if (i === 2) {
                continue // 退出本次循环，继续下一次循环
                break   //结束循环，退出整个循环
            }
            document.write(i)
        }

3. 循环嵌套

        // 循环嵌套
        for (let i = 1; i < 6; i++) {
            for (let j = 1; j < 6; j++) {
                document.write('*')
            }
        }
        // 外面循环执行一次，里面循环执行全部

记单词案例

        for (let i = 1; i < 4; i++) {
            document.write(`第${i}天 <br>`)
            for (let j = 1; j < 6; j++) {
                document.write(`第${j}个单词 <br>`)
            }
        }

打印倒三角

        for (let i = 1; i < 6; i++) {
            for (let j = 1; j < i + 1; j++) {
                document.write('&')
            }
            document.write('<br>')
        }

99乘法表

<!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 {
            /* 转换为行内块 */
            display: inline-block;
            width: 80px;
            height: 25px;
            /* 垂直居中 */
            line-height: 25px;
            /* 外边距 */
            margin: 5px;
            /* 背景颜色 */
            background-color: pink;
            /* 内边距 */
            padding: 0 10px;
            /* 边框线 */
            border: 1px solid hotpink;
            /* 字体颜色 */
            color: deeppink;
            /* 边框圆角 */
            border-radius: 5px;
            /* 盒子阴影 */
            box-shadow: 2px 2px 2px rgba(0, 0, 0, .2);
            /* 文本居中 */
            text-align: center;
        }
    </style>
</head>
<body>
    <script>
        for (let i = 1; i < 10; i++) {
            for (let j = 1; j < i + 1; j++) {
                document.write(`
                <div>${j} x ${i} = ${i * j}</div>
                `)
            }
            document.write('<br>')
        }
    </script>
</body>
</html>

二、数组

数组（Array）是一种可以按照顺序保存数据的数据类型

元素：数组中保存的每个数据都叫数组元素
下标：数组中数据的编号
长度：数组中数据的个数，通过数组的length属性获得

数组求和

        let arr = [2, 6, 1, 7, 4]
        let sum = 0
        let average = 0
        for (let i = 0; i < arr.length; i++) {
            sum += arr[i]
        }
        average = sum / arr.length
        document.write(`这个数组总和为${sum},平均值为${average}`)

数组求最大值最小值

        let arr = [2, 6, 1, 77, 52, 25, 7]
        // 声明最大值的变量
        let max = arr[1]
        // 声明最小值的变量
        let min = arr[1]
        for (let i = 1; i < arr.length; i++) {
            if (max < arr[i]) {
                max = arr[i]
            }
            if (min > arr[i]) {
                min = arr[i]
            }
        }
        document.write(`最大值：${max} 最小值：${min}`)

数组本质是数据集合，操作数据无非就是增删改查

数组增加新的数据

数组.push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度 (重点)

        let arr = ['red', 'green']
        // 把blue放到arr的后面
        arr.push('blue', 'skyblue')
        // 返回值是新的数组长度
        console.log(arr.push('yellow'))
        console.log(arr)

arr.unshift(新增的内容) 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度

数组删除元素

数组. pop() 方法从数组中删除最后一个元素，并返回该元素的值

数组. shift() 方法从数组中删除第一个元素，并返回该元素的值

        let arr = ['pink', 'green', 'red']
        // 删除最后一个元素
        arr.pop()
        // 删除第一个元素
        arr.shift()
        // 返回值是删除的元素
        console.log(arr.pop())
        console.log(arr.shift())
        console.log(arr)

数组. splice() 方法删除指定元素

arr.splice(start, deleteCount)
arr.splice(起始位置, 删除几个元素)

冒泡排序

      let arr = [2, 3, 1, 5, 4, 6, 0]
        // 1. 外层循环控制趟数
        for (let i = 0; i < arr.length - 1; i++) {
            // 2. 里层循环控制交换次数
            for (let j = 0; j < arr.length - i - 1; j++) {
                // 交换两个变量
                if (arr[j] > arr[j + 1]) {
                    let temp = arr[j]
                    arr[j] = arr[j + 1]
                    arr[j + 1] = temp 
                }
            }
        }
        console.log(arr)

三、综合案例

根据用户输入数据生成季度柱状图

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            /* 弹性布局 */
            display: flex;
            width: 700px;
            height: 300px;
            border-left: 1px solid pink;
            border-bottom: 1px solid pink;
            margin: 50px auto;
            /* justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。 */
            /* 均匀排列每个元素，每个元素周围分配相同的空间 */
            justify-content: space-around;
            /* 元素位于容器的结尾。弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。 */
            align-items: flex-end;
            text-align: center;
        }

        .box>div {
            display: flex;
            width: 50px;
            background-color: pink;
            /* flex-direction 属性规定灵活项目的方向。 */
            /* 灵活的项目将垂直显示，正如一个列一样。 */
            flex-direction: column;
            /* 均匀排列每个元素，首个元素放置于起点，末尾元素放置于终点 */
            justify-content: space-between;
        }

        .box div span {
            margin-top: -20px;
        }

        .box div h4 {
            margin-bottom: -35px;
            width: 70px;
            margin-left: -10px;
        }
    </style>
</head>

<body>
    <!-- <div class="box">
        <div style="height: 123px;">
            <span>123</span>
            <h4>第1季度</h4>
        </div>
        <div style="height: 156px;">
            <span>156</span>
            <h4>第2季度</h4>
        </div>
        <div style="height: 120px;">
            <span>120</span>
            <h4>第3季度</h4>
        </div>
        <div style="height: 210px;">
            <span>210</span>
            <h4>第4季度</h4>
        </div>
    </div> -->
    <script>
        // 1. 利用循环弹出四次输入框，会得到4个数据，放到数组里面
        let arr = []
        for (let i = 1; i < 5; i++) {
            // prompt(`请输入第 ${i} 季度的数据`)
            arr.push(prompt(`请输入第 ${i} 季度数据`))
        }
        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>
</body>
</html>

代码练习

        // 使用for循环 - 求出数组元素的和 [5, 8, 9, 2, 1, 5]
        let arr = [5, 8, 9, 2, 1, 5, 10]
        let sum = 0
        for (let i = 0; i < arr.length; i++) {
            sum += arr[i]
        }
        document.write(sum)

        // 使用for循环 - 求出数组里大于5的和 [4, 9, 5, 20, 3, 11]
        let arr = [4, 9, 5, 20, 3, 11]
        let sum = 0
        for (let i = 0; i < arr.length; i++) {
            if (arr[i] > 5) {
                sum += arr[i]
            }
        }
        document.write(sum)

        //  使用for循环 - 求出班级里同学们平均年龄[15, 19, 21, 33, 18, 24]
        let arr = [15, 19, 21, 33, 18, 24]
        let sum = 0
        for (let i = 0; i < arr.length; i++) {
            sum += arr[i]
        }
        let average = sum / arr.length
        document.write(average)

        // 打印数组里所有的奇数  [5, 2, 8, 10, 3, 7]
        let arr = [5, 2, 8, 10, 3, 7]
        let Arr = []
        for (let i = 0; i < arr.length; i++) {
            if (arr[i] % 2 !== 0) {
                Arr.push(arr[i])
            }
        }
        document.write(Arr)

        // 计算[2, 6, 18, 15, 40] 中能被3整除的偶数的和
        let arr = [2, 6, 18, 15, 40, 30]
        let sum = 0
        for (let i = 0; i < arr.length; i++) {
            if (arr[i] % 3 === 0 && arr[i] % 2 === 0) {
                sum += arr[i]
            }
        }
        document.write(sum)

        // 计算[2, 6, 18, 15, 40] 中能被3整除的偶数的个数
        let arr = [2, 6, 18, 15, 40, 30]
        let Arr = []
        for (let i = 0; i < arr.length; i++) {
            if (arr[i] % 3 === 0 && arr[i] % 2 === 0) {
                Arr.push(arr[i])
            }
        }
        document.write(Arr.length)

        // 给一个数字数组，该数组中有很多数字0，将不为0的数据存入到一个新的数组中
        let arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7, 0, 18, 0]
        let Arr = []
        for (let i = 0; i < arr.length; i++) {
            if (arr[i] !== 0) {
                Arr.push(arr[i])
            }
        }
        document.write(Arr)

Caroline Finish 2022/12/1