JavaScript第三天

一.for循环：

1.语法：

for（初始值；条件；值的变化）{操作体} 注意：分号不能少

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

一.利用for循环输出1~100岁:

    <script>
        // 初始index变量值为1,条件为大于100后终止循环，变化值为每一次循环加1
        for (let index = 1; index <= 100; index++) {
            // 循环了100次，所以输出index为1，2，3，...100再终止循环
            document.write(`${index}<br>`)   
        }
    </script>

二. 求1-100之间所有的偶数和:

    <script>
        // 声明一个变量为来装偶数和
        let sum = 0
        for (let index = 1; index <= 100; index++) {
            // 方案一：利用逻辑与来实现，为基数就短路
            (index % 2 === 0) && (sum += index)  //为偶数就赋值给sum，sum加本身再加偶数index
            // 方案二：例用if分支语句来实现，条件为偶数才通过
            if (index % 2 === 0) {
                sum += index //最后通过sum加本身再加偶数index
            }
        }
        document.write(sum) //输出sum就是偶数和
    </script>

三.页面中打印5个小星星

    <script>
        // 先使for循环条件为5次就停止
        for (let index = 1; index <= 5; index++) {
            // 再声明的变量(直接输出也行）放在for循环里使它循环5次
            let xing = document.write("⭐")  //然后注意星星图标是字符串要引号包裹
        }
    </script>

2.退出循环：

continue:

结束本次循环，继续下次循环

break:

跳出所在的循环

3.循环嵌套：

注释：一个循环里再套一个循环，一般用在for循环里

    <script>
        for (外部声明记录循环次数的变量; 循环条件; 变化值) {
            
            for (内部声明记录循环次数的变量; 循环条件; 变化值) {
            
            循环体
        }
        }
    </script>

一.for 循环嵌套-应用

    <script>
        for (let a = 1; a <= 3; a++) {
            // 使用a的变化来依次增加天数
            document.write(`第${a}天`)
            // 使用输出来增加换行标签<br>,第一次循环结束会换行
            document.write(`<br>`)
            // 外面for的第一次循环结束后会接着内部for第一次循环，然后外循环第二次，内循环第二次依次循环
            for (let b = 1; b <= 5; b++) {
               document.write(`记住第${b}个单词`) 
               document.write(`<br>`) 
            }
        }
    </script>

二.页面中打印出5行5列的星星

    <script>
        // 让变量a来控制列，使用<br>换行，一列5个
        for (let a = 0; a < 5; a++) {
            document.write(`<br>`)
            document.write('⭐')
            // 让变量b来控制行，一行五个，本来变量a一行有一个，所以只要循环4次就行
            for (let b = 0; b < 4; b++) {
                document.write('⭐')
            }
        }
    </script>

三.九九乘法表

    <script>
        for (let a = 1; a <= 9; a++) {
            document.write(`<br>`)
            for (let b = 0; b < a; b++) {
                let sum = (b+1) * a
                document.write(`<span>${b + 1}x${a}=${sum}</span>`)
            }
        }
    </script>

4. for循环和while循环有什么区别：

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

二.数组:

数组(Array)是一种可以按顺序保存数据的数据类型

1.声明语法：

 <script>
       let 数组名 = [数据1,数据2,数据3,...,数据n]
    //    例：
       let names =['小明','小刚','小王']
    </script>

数组是按顺序保存，所以每个数据都有自己的编号
计算机中的编号从0开始，所以小明的编号为0，小刚编号为1，以此类推
在数组中，数据的编号也叫索引或下标
数组可以存储任意类型的数据

2.. 取值语法：

    <script>
       数组名[下标]
    //    例：
       let names =['小明','小花','小王']
       names[0]  //小明
       names[2]  //小王
    </script>

3.一些术语：

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

    <script>
       数组名[下标]
    //    例：
       let names =['小明','小花','小王','小刘']
       names[0]  //小明
       names[2]  //小王
       console.log(names.length) //长度为4
    </script>

4. 遍历数组：

用循环把数组中每个元素都访问到,一般会用for循环遍历

    <script>
        for (let index = 0; index < 数组名.length; index++) {
            数组名[index]
        }
       
    //    例：
       let names =['小明','小花','小王','小刘']
        for (let i = 0; i < names.length; i++) {
            document.write(names[i])
        }
    </script>

5.数组求和平均值（案例一）

    <script>
        let arr = [2, 6, 1, 7, 4]
        // 提前声明一个求和的变量
        let sum = 0
        for (let index = 0; index < arr.length; index++) {
            // 总和等于sum本身加每一个元素
            sum += arr[index] 
        }
        console.log(sum)  //和
        console.log(sum / arr.length) //平均值=总和除以数组的长度
    </script>

6.数组求最大值和最小值：

    <script>
        let arr = [2, 6, 1, 77, 52, 25, 7]
        // 提前假设第一个变量就是最大值
        let max = arr[0]
        // 提前假设第一个变量就是最小值
        let min = arr[0]
        for (let index = 0; index < arr.length; index++) {
            // 方案2 求最大值
            // 如果这个数组元素大于max 就把这个数组元素存到 max 里面，否则继续下一轮比较。
            (arr[index] > max) && (max = arr[index])

            // 方案1 求最大值
            if (arr[index] > max) {
                max = arr[index]
            }
            // 最小值  如果这个数组元素小于min 就把这个数组元素存到 min 里面，否则继续下一轮比较。
            if (arr[index] < min) {
                min = arr[index]    
            }
        }
        console.log(min)
        console.log(max)
    </script>

三.操作数组:

数组本质是数据集合, 操作数据无非就是增删改查语法：

查：查询数组数据

数组[下标] 或者我们称为访问数组数据
改：重新赋值

数组[下标] = 新值
增：数组添加新的数据

arr.push(新增的内容) arr.unshift(新增的内容
删：删除数组中数据

arr.pop() arr.shift() arr.splice(操作的下标,删除的个数)

1.push ：末尾增加

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

    <script>
        arr.push(元素,...,元素n)
        // 例
        let arr=['red','green']
        arr.push('pink','black')
        console.log(arr) //['red','green','pink','balck']
    </script>

例： 数组大于等于10筛选

    <script>
        let arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
        // 首先声明一个新的数组用于存放新数据newArr
        let newArr = []
        for (let index = 0; index < arr.length; index++) {
            // 如果arr数组里面的值大于或等于10
            if (arr[index] >= 10) {
                // 使声明的新数组添加旧数组筛选出来的值
                newArr.push(arr[index])
            }

        }
        // 再打印出来一个新的数组
        console.log(newArr)
    </script>

2.unshift ：开头增加

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

    <script>
        arr.unshift(元素,...,元素n)
        // 例
        let arr=['red','green']
        arr.unshirt('pink','black')
        console.log(arr) //['pink','balck','red','green']
    </script>

例： 数组筛选去0

    <script>
        let arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
        // 首先声明一个新的数组用于存放新数据newArr
        let newArr = []
        for (let index = 0; index < arr.length; index++) {

            // 方案一 遍历原来的旧数组， 找出不等于0 的元素，依次追加给新数组newArr
            (arr[index] !== 0) && (newArr.unshift(arr[index]))
            // 方案二
            if (arr[index] !== 0) {
                newArr.unshift(arr[index])
            }
        }
        console.log(newArr)
    </script>

3.pop ：末尾删除

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

    <script>
        arr.pop()
        // 例
        let arr=['red','green','pink']
        arr.pop()
        console.log(arr) //['red','green']
    </script>

4.shift :开头删除

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

    <script>
        arr.shift()
        // 例
        let arr=['red','green','pink']
        arr.shift()
        console.log(arr) //['green','pink']
    </script>

5.splice ：指定删除

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

指定修改的开始位置（从0计数）

    <script>
        arr.splice(start,deleteCount)

        arr.splice(起始位置,删除几个元素)
    </script>

start 起始位置: 指定修改的开始位置（从0计数）

deleteCount 删除几个元素:
表示要移除的数组元素的个数可选的。如果省略则默认从指定的起始位置删除到最后

案例！！根据数据生成柱形图

需求：用户输入四个季度的数据，可以生成柱形图分析： ①：需要输入4次，所以可以把4个数据放到一个数组里面利用循环，弹出4次框，同时存到数组里面 ②：遍历改数组，根据数据生成4个柱形图，渲染打印到页面中柱形图就是div盒子，设置宽度固定，高度是用户输入的数据 div里面包含显示的数字和第n季度

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

        ul {
            list-style: none;
            width: 1000px;
            height: 600px;
            background-color: palegreen;
            margin: 100px auto;
            display: flex;
            justify-content: space-around;
            align-items: flex-end;
        }

        ul li {
            position: relative;
            width: 100px;
            background-color: pink;
        }

        span {

            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
        }

        div {
            position: absolute;
            top: 100%;
            text-align: center;
            width: 100%;
        }
    </style>
</head>

<body>

    <script>
        let html = (`<ul>`)
        let liHeight = []
        let arr = +prompt('多少个季度')
        for (let index = 0; index < arr; index++) {
            let row = +prompt(`${index+1}个季度是多少`)
            liHeight.push(row)
            html += (`<li style="height:${liHeight[index]}px;"><span>${liHeight[index]}</span><div>第${index+1}季度</div></li>`)
        }
        html += (`</ul>`)
        document.write(html)
    </script>
</body>

</html>

学习JavaScript的第三天！！！