06.JavaScript循环与数组

146 阅读6分钟

preview -.png

1.循环的分类

1.while循环

1.使用 while 循环时一定要注意,它必须要有退出条件,否则会成为死循环

2.while 循环和 for 循环的不同之处在于 while 循环可以做较为复杂的条件判断,比如判断用户名和密码

3.代码结构

while (条件) {
    //循环代码
}

2.do while 循环

1.do... while 语句其实是 while 语句的一个变体。该循环会先执行一次代码块,然后对条件表达式进行判断,如果条件为真,就会重复执行循环体,否则退出循环。

2.代码结构

1.先执行一次循环体代码

2.再执行条件表达式,如果结果为 true,则继续执行循环体代码,如果为 false,则退出循环,继续执行后面代码

do{
    //循环代码 - 条件表达式为 true 时重复执行循环体代码
}  while(条件)

4.使用方法


<!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>Document</title>
</head>

<body>

    <script>
    /*     // 1.do while 循环 语法结构
        do {
            // 循环体
        } while (条件表达式)
        // 2.  执行思路 跟while不同的地方在于 do while 先执行一次循环体 在判断条件 如果条件表达式结果为真,则继续执行循环体,否则退出循环
        // 3. 代码验证 */
        var i = 1;
        do {
            document.write('how are you?');
            i++;
        } while (i <= 0)
        // 4. 我们的do while 循环体至少执行一次
    </script>
</body>

</html>

3.for循环

1.也是重复执行代码

2.好处:把声明起始值、循环条件、变化值写到一起,让人一目了然

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

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

5.代码结构

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

2.while循环

1.循环的语法

while(循环条件) {
    要重复执行的代码(循环体)
}

1.循环:重复执行某段代码, 而 while : 在…. 期间

2.跟if语句很像,都要满足小括号里的条件为true才会进入执行代码

3.while大括号里代码执行完毕后不会跳出,而是继续回到小括号里判断条件是否满足,若满足又执行大括号里的代码,然后再回到 小括号判断条件,直到括号内条件不满足,即跳出

2.while循环注意事项

let i=1
while(i <=3){
    document.write(`我会循环3次<br>`)
    i++
}

1.循环的本质就是以某个变量为起始值,然后不断产生变化量,慢慢靠近终止条件的过程。 所以,循环需要具备三要素:

1.变量起始值 let i=1

2.终止条件(没有终止条件,循环会一直执行,造成死循环) i <=3

3.变量变化量(用自增或者自减) i++

3.综合案列

1.while循环案列

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>
    <script>
        let num = +prompt('请输入一个数字')
        while (num>0){
            document .write(`月薪过万就来黑马程序员<br>`)
            num--
        }
    </script>
</body>
</html>

2.你爱我吗案列

1.用户输入 爱 结束循环

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>
    <script>
        let love = prompt('你爱我吗')
        while (love !== '爱') {
            // alert('你到底爱不爱我')
            love = prompt('你爱我吗')
        }
       console.log(love);
    </script>
</body>
</html>

3.简易ATM存取款机案列

1.当用户取款时 进行余额的减法

2.当用户存款时 进行余额的加法

3.当用户查询时 查询当前余额

4.当用户退出时 直接退出操作

5.3.加减法补充

 money = money + 10; // 加10
      money += 10; // 加10
两种写法相同
      money = money - 10;// 减10
      money -= 10;	//减10
<!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>
    <script> 
        /* 步骤1.声明一个变量提示用户操作  sum
                    let sum = prompt(`请选择您的操作
            1.取款
            2.存款
            3.查看余额
            4.退出 `);
        */

        /* 步骤2.当用户输入对应的信息时 会有对应的功能
            1.用户输入 1
                还会继续弹窗  问一遍 上面1的内容
            2.用户输入 2
                还会继续弹窗  问一遍 上面1的内容
            3.用户输入 3
                还会继续弹窗  问一遍 上面1的内容
            4.用户输入4
                结束使用    
        */
        // 只要不是输入 4   输入任何东西都会提示弹窗  输入1 2 3 会展现功能

        /* 步骤3.
            1.定义一个变量:  money  余额
            2.用户输入1  取款  withdrawal
                1.在弹出一个单独的弹窗  让用户输入想要取款的数量  
                2.取款:  余额-取款数量  
                money -=  withdrawal   
            3.用户输入2 存款   deposit
                1.在弹出一个单独的弹窗  让用户输入想要存款的数量 
                2.存款:   存款数量 + 余额        
                money += deposit
            4.用户输入3 余额  money
                1.在弹出一个单独的弹窗  显示用户的余额
                2.  输出 money  余额
            5.用户输入 4 结束使用
  
        */      
        //1.提示用户输入
        let sum;//提示
        //2.用户余额
        let money = 0; //余额
        //功能实现
        while (sum!==4){
            //当用户输入不等于4的时候弹窗   输入4的时候结束
            sum = +prompt(`请选择您的操作
            1.取款
            2.存款
            3.查看余额
            4.退出
            `)
            if (sum===1) {
                //当用户输入1时 进行取款功能的实现
               let withdrawal=+prompt('请输入取款金额')
                money -= withdrawal
            }   else if (sum===2) {
                //当用户输入2时 进行存款功能的实现
                let deposit=+prompt('请输入存款金额')
                money += deposit
            }   else if (sum===3) {
                //当用户输入3时  进行余额查询的功能
                alert(money)
            }
        }      
    </script>
</body>
</html>

3.for循环

1.for循环语法与基本使用

1.也是重复执行代码

2.好处:把声明起始值、循环条件、变化值写到一起,让人一目了然

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

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

5.代码结构

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

2.循环退出

1.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>Document</title>
</head>
<body>
    <script>
        let num =0
        for (let index = 0; index <=100; index++) {
            if (index%2 ===0){
                continue
            }
            num += index
        }
        console.log(num);
    </script>
</body>
</html

2.break:跳出所在的循环-终止循环

<!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>
    <script>
        let num =0
        for (let index = 0; index <=100; index++) {
            num +=index
            if (num>500)
            break
            // num  大于500时停止循环
        }
        console.log(num);
    </script>
</body>
</html>

3.嵌套循环

1.一个循环里再套一个循环,一般用在for循环里

2.代码结构

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

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>
    <script>
        let sum = 0;
        for (let index = 1; index <= 100; index++) {
            if(index %2 === 0) {
            sum += index
            }      
        }
        console.log(sum);
    </script>
</body>
</html>

4.综合案列

1.打印小星星

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>
    <script>
        let num = +prompt("输入数字")
        for (let index = 0; index <= num; index++) {  
            document.write(`${index}⭐<br>`)      
        }

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

2.几天记多少单词

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>
    <script>
        let day = +prompt('请输入天数')
        let count = +prompt('请输入单词数量')

        for (let index = 1; index <=day ; index++) {
            document.write (`第${index}天<br>`)

            for (let index1 = 1; index1 <=count; index1++) {
                document.write(`记住${index1}个单词<br>`)    
            }
        }
    </script>
</body>
</html>

3.倒三角

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>
    <script>
        let day = +prompt('请输入天数')
        let count = +prompt('请输入单词数量')

        for (let index = 1; index <=day ; index++) {
            document.write (`第${index}天<br>`)

            for (let index1 = 1; index1 <=count; index1++) {
                document.write(`记住${index1}个单词<br>`)    
            }
        }
    </script>
</body>
</html>

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>
    <script>
        let num = +prompt('请输入行数')
        for (let index = num; index >= 1; index--) {
            for (let index1 = 1; index1 <= index; index1++) {
                document.write(`⭐`)
            }
            document.write (`<br>`)
        }
    </script>
</body>
</html>

4.九九乘法表

<!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-sizing: border-box;
        }
        div {
            display: inline-block;
            background-color: pink;
            text-align: center;
            color: #fff;
            padding: 0 10px;
            margin-right: 10px;
            margin-bottom: 10px;
            height: 30px;
            line-height: 30px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <!-- <div>9 * 9 = 81</div> -->
    <script>
    for (let index = 1; index <= 9; index++) {
        for (let index1 = 1; index1 <=index; index1++) {
            document.write(`<div>${index} * ${index1} = ${index *index1}</div>`) 
        }
        document.write(`<br>`)
    }        

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

4.数组

1.什么是数组

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

2.为什么要数组?

如果我想保存一个班里100个人的姓名怎么办?

如果有多个数据可以用数组保存起来

2.数组的基本使用

1.声明语法

let 数组名 = [数据1,数据2,数据3,............,数据n]

1,举例

let name = ['关羽','张飞','赵云','马超','黄忠']

2.数组是按顺序保存,所以每个数据都有自己的编号

3.计算机中的编号从0开始,所以关羽的编号为0,张飞编号为1,以此类推

4.在数组中,数据的编号也叫 索引或下标

5.数组可以存储任意类型的数据

2.取值语法

数组名[下标]

1.举例

let name = ['关羽','张飞','赵云','马超','黄忠']
name[0]   //关羽
name[1]	  //张飞

2.通过下标取数据

3.取出来是什么类型的,就根据这种类型特点来访问

3.术语

1.元素:数组中保存的每个数据都叫数组元素

2.下标:数组中数据的编号

3.长度:数组中数据的个数,通过数组的length属性获得

let name = ['关羽','张飞','赵云','马超','黄忠']
console.log(name[0])    //关羽
console.log(name[1])	//张飞
console.log(name.length) // 5

4.遍历数组

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

2.语法

for (let index = 0; index < 数组名.length ; index++) {
    数组名[index]
}

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>
    <script>
        //1.声明一个数组  name
        let name = ['关羽','张飞','赵云','马超','黄忠']
        // 注意:数组[0,1,2,3,4,5]
        //.获取这个数组中的第二个元素
        console.log(name[2]);//赵云
        // 告诉我这个数组里面有几个元素  (数组的长度)
        // name.length   表示该数组的长度
        console.log(name.length);//5

        console.log(name[100]);
        //不会有一个正常的结果   undefined
    </script>
</body>
</html>

3.综合案列

1.数组的循环

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>07-数组的循环.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <script>

      // 定义一个数组 
      let arr=[10,20,30,40,50];

      // 挨个打印数组里面的元素
      arr[0]; // 10
      arr[1]; // 20
      arr[2]; // 30 
      arr[3]; // 40
      arr[4]; // 50
      // arr[5]; // undefined 

      // 通过循环 挨个打印数组里面的元素
      for (let index = 0; index < 5 ; index++) {
        // index =  1 , 2 ,3 ,4 , 5   arr[5] 
        // arr[index]   1 没有输出  arr[0]  2 输出 arr[5] undefined
        // 综上所述 我们发现  下标 index 的范围只能是 0 - 4 
        // let index = 0; 
        // index <= 4 或者 index < 5  因为 数组的长度 arr.length = 5 
        // index < 5   =>  index < arr.length 

        /* 
        小结:
         1 我们使用 数组做for循环的时候 
           1 let index= 0 ;
           2 判断循环的条件  index < 数组的长度 

         */

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

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>
    <script>
        // 1.声明一个数组
        let arr = [2,6,1,7,4];
        // 2.声明一本变量 存放数据
        let sum = 0;
        // 3.循环
        for (let index = 0; index < arr.length; index++) {
        // 4.计算总和
            sum += arr[index];
        }
        // 5.打印总和
        console.log(sum);
        //6.平均值
        console.log(sum / arr.length);
    </script>
</body>
</html>

3.数组求最大值

1.求最大值

2.if(arr[index] <max) 求最小值

<!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>
    <script>
        // 1.定义一个数字
        let arr = [2,6,1,77,52,25,7]
        // 2.假设一个最大值  数组的第0个元素
        let max =arr[0]
        // 3.循环
        for (let index = 0; index < arr.length; index++) {
            //如果当前的数组元素  大于 max
            if(arr[index] > max){
                //设置  max 等于 你这个数组元素
                max=arr[index]
            }
        }
        console.log(max);
    </script>
</body>
</html>

4.数组-增加

1.push 是把新的元素 设置到 数组的末位

2.unshift 是把新的元素 设置到数组的开头

3.splice 把元素添加到指定位置

 <script>
        //1.定义一个数组
        let name = ['关羽','张飞','赵云','马超','黄忠']
        //多增加一个元素
        name.push('刘备')
        console.log(name);
    </script>

5.数组的过滤

<!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>
    <script>
        //1.定义第一个数组
        let arr1= [2,0,6,1,77,0,52,0,25,7];
        //2.定义第二个数组用来存放过滤后的值
        let arr2 = [];
        //3.循环第一个数组 
        for (let index = 0; index < arr1.length; index++) {
            //判断当前循环的元素  和10  之间的关系
            if(arr1[index]>10)//判断当前元素时候大于10{
                //把当前元素添加到新的数组里面
                arr2.push(arr1[index])
            }
        //打印第二个数组
        console.log(arr2);
    </script>
</body>
</html>

6.数组的删除

1.pop 删除最后一个元素

2.shift 删除第一个元素

3.splice 删除指定位置的元素

1.splice[1.3.''流氓']

2.第一个数字 代表数组里面的位置

2.第二个数字 代表删除从这个元素 往后一个元素(包括自身) 如果为0 则表示不删除

3.第三个值 代表当前位置前增加的元素

   <script>
       /* 
      1 push 和 unshift 都可以做到 给数组添加新元素
      2 这两个代码在执行的时候  还可以返回  数组的长度 
       */
      //  数组 删除最后一个元素 pop
      //  数组 删除第一个元素  shift

      let arr = ['西瓜', '香蕉', '麻瓜'];

      // 希望删除掉最后的一个元素  麻瓜 不要
      // arr.pop();
      // console.log(arr); // ['西瓜', '香蕉']


      // 希望删除掉第一个元素  
      arr.shift();  
      console.log(arr);//['香蕉','麻瓜'] 
    </script>

7.指定位置删除与增加

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>20-数组指定元素来删除.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <script>
      let arr = ['西瓜', '香蕉', '麻瓜'];
      // 现在想要删除 香蕉

      // splice("想要删除的元素的下标","想要删除几个");

      // 删除数组中的下标为1的元素,
      // 从 1 的位置开始 想要删除几个
      // arr.splice(1, 2);
      //
      // console.log(arr);

      //  指定位置来插入元素
      // splice("想要删除的元素的下标","想要删除几个","在该下标位置添加元素");

      // 在 1的位置,删除0个元素,增加一个红薯
      // let arr = ['西瓜', '香蕉', '麻瓜'];
      // ['西瓜', '红薯', '香蕉', '麻瓜'];
      arr.splice(1, 1, '红薯');
      console.log(arr);
    </script>
  </body>
</html>

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>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        ul{
            display: flex;
            width: 1000px;
            height: 600px;
            background-color: skyblue;
            margin: 100px auto;
            list-style: none;
            justify-content: space-around;
            align-items: flex-end;
        }
        li {
            width: 100px;
            background-color: pink;
            position: relative;
        }
        span {
            position: absolute;
            left: 50%;
            top: -30px;
            transform: translate(-50%);
        }
        div {
            position: absolute;
            top: 100%;
            width: 100%;
            text-align: center;
        }
    </style>
</head>
<body>
    <!-- 1.静态布局
    <ul>
        <li><span>1</span><div>第几季度</div></li>
        <li><span>1</span><div>第几季度</div></li>
        <li><span>1</span><div>第几季度</div></li>
        <li><span>1</span><div>第几季度</div></li>
    </ul> -->

    <script>
        //1.定义一个数组 用于接收用户输入的信息
        let liheight = []
        //2.定义一个数组 用于输出用户的信息
        let  ul = `<ul>`;
        //3.第一个循环  接收用户的数据
        for (let index = 0; index <4; index++) {
            let height =+prompt(`请输入第${index+1}季度的数据`)
            // 4.将用户数据添加到数组
            liheight.push(height)
        }
        // 5.第二个循环  用户将用户的数据输出
        for (let index = 0; index <4; index++) {
            ul += `<li style="height:${liheight[index]}px;">
                <span>${liheight[index]}</span>
                <div>第${index+1}季度</div>
                </li>`
        }
        //数组结尾
        ul += `</ul>`
        document.write(ul)

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

9.数组的补充

1.获取数组的最后一个元素

arr[arr.length - 1]
数组[数组长度 -1]

2.新增或者修改数组元素

 arr[10]='南瓜'   
        1 如果 10这个位置已经有元素 那么 就是修改
        2 如果 10这个位置没有元素  添加就可以了  最终数组的度变成 10+1  

3.数组 可以存放任意类型的数据 可以这么做,但是不建议 我们建议 一个数组内的数据类型要统一!!

 let arr = ['西瓜', 100, null, true, NaN, undefined, 80];
可以这么做 但是没必要 不优雅

4.数组快速清空 或者删除元素的方式

<script>
		arr.length = 0
		数组长度为0  清空数组所有元素
 

      // let arr = ['西瓜', '香蕉', '麻瓜','香瓜','苦瓜','傻瓜'];
      // // let arr = ['西瓜', '香蕉', '麻瓜'];
      // // 获取数组中最后的一个元素
      // // arr.length - 1
      // console.log(arr[arr.length - 1]);

      // let arr = ['西瓜', '香蕉', '麻瓜'];

      // 想要把香蕉修改成葡萄
      // arr[1] = '葡萄'; // 修改

      // console.log( arr[3] );// 输出什么 undefined

      // 添加元素
      // arr[3] = '南瓜';
      // console.log(arr);

      // arr[10] = '南瓜';
      // console.log(arr[8]);

      // 存放其他类型 数据
      // let arr = ['西瓜', 100, null, true, NaN, undefined, 80];

      let arr = ['西瓜', 100, null, true, NaN, undefined, 80];

      // 把数组 清空掉!!  不想要里面的元素了!!
      // arr = [];

      // 保留 3个元素 其他不要了
      // arr.length = 3;
      arr.length = 0;

      console.log(arr);
</script>