JavaScript学习文档（4）：循环结构、初识数组、数组案例、操作数组

一、循环结构

1、for语句

2、for循环案例

3、for循环嵌套及案例

4、while语句

5、continue关键字

6、break关键字

二、初识数组

1、什么是数组

2、为什么要数组

3、数组的基本使用

三、数组案例

1、数组求和及平均值

2、数组求最大值和最小值

四、操作数组

1、数组操作-----修改

2、数组操作-----新增

3、数组操作-----删除

4、综合案例

（1）根据数据生成柱形图

（2）冒泡排序

一、循环结构

1、for语句

（1）for循环语法

作用：重复执行代码
好处：把声明起始值、循环条件、变化值写到一起，让人一目了然，它是最常使用的循环形式

2、for循环案例

（1）利用for循环输出1~100岁

示例代码如下：

for (let i = 1; i <= 100; i++) {
      document.write(`今年我${i}岁了 <br>`)
    }

（2）求1-100之间所有的偶数和

示例代码如下：

    let sum = 0
    for (let i = 1; i <= 100; i++) {
      if (i % 2 === 0) {
        // 把i加到sum里面去
        // sum = sum + i
        sum += i
      }
    }
    document.write(`1~100之间的偶数和是: ${sum}`)

（3）页面中打印5个小星星

示例代码如下：

   for (let i = 1; i <= 5; i++) {
      document.write('★')
    }

3、for循环嵌套及案例

for循环嵌套

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

案例1：假如每天记住5个单词，3天后一共能记住多少单词?

示例代码如下：

<script>
    // 外层循环打印 第 n 天
    for (let i = 1; i <= 3; i++) {
      document.write(`第${i}天<br>`)
      // 里层循环打印 第几个单词
      for (let j = 1; j <= 5; j++) {
        document.write(`记住了第${j}个单词<br>`)
      }
    }
  </script>

案例2：打印5行5列的星星

示例代码如下：

  <script>
    let row = +prompt('请输入行数:')
    let col = +prompt('请输入列数:')
    // 外层循环打印行数
    for (let i = 1; i <= row; i++) {
      // 里层循环打印几个星星
      for (let j = 1; j <= col; j++) {
        document.write('☆')
      }
      // 进行换行显示
      document.write('<br>')
    }
  </script>

案例3：打印倒三角形星星

示例代码如下：

  <script>
    // 1. 外层循环控制行数
    for (let i = 1; i <= 5; i++) {
      // 2. 里层循环控制列数（几个星星）
      for (let j = 1; j <= i; j++) {
        document.write('◆')
      }
      // 换行
      document.write('<br>')
    }

  </script>

案例4：九九乘法表

思路：

（1）只需要把刚才倒三角形星星做改动

（2）★ 换成 1 x 1 =2 格式

示例代码样式如下：

  <style>
    span {
      display: inline-block;
      width: 100px;
      padding: 5px 10px;
      border: 1px solid pink;
      margin: 2px;
      border-radius: 5px;
      box-shadow: 2px 2px 2px rgba(255, 192, 203, .4);
      background-color: rgba(255, 192, 203, .1);
      text-align: center;
      color: hotpink;
    }
  </style>

示例代码行为如下：

  <script>
    // 1. 外层循环控制行数
    for (let i = 1; i <= 9; i++) {
      // 2. 里层循环控制列数
      for (let j = 1; j <= i; j++) {
        document.write(`<span>${j} X ${i} = ${i * j}</span>`)
      }
      // 换行
      document.write('<br>')
    }

  </script>

4、while语句

（1）循环：重复执行一些操作, while:在....期间，所以 while循环就是在满足条件期间，重复执行某些代码。

（2）语法：

（3）while循环需要具备三要素：

变量起始值
终止条件（没有终止条件，循环会一直执行，造成死循环)
变量变化量（用自增或者自减)

示例代码如下：

  <script>
    // // 1. 变量的起始值
    // let i = 1
    // // 2. 终止条件
    // while (i <= 3) {
    //   document.write('我要循环三次 <br>')
    //   // 3. 变量的变化量
    //   i++
    // }
    // 1. 变量的起始值
    let end = +prompt('请输入次数:')
    let i = 1
    // 2. 终止条件
    while (i <= end) {
      document.write('我要循环三次 <br>')
      // 3. 变量的变化量
      i++
    }
  </script>

5、continue关键字

continue退出本次循环，一般用于排除或者跳过某一个选项的时候,可以使用continue

6、break关键字

break退出整个for循环，一般用于结果已经得到,后续的循环不需要的时候可以使用

二、初识数组

1、什么是数组

数组：(Array)是一种可以按顺序保存数据的数据类型为什么要数组？

2、为什么要数组

（1）思考：如果我想保存一个班里所有同学的姓名怎么办?

（2）场景：如果有多个数据可以用数组保存起来，然后放到一个变量中，管理非常方便

3、数组的基本使用

（1）声明语法

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

（2）取值语法

通过下标取数据
取出来是什么类型的，就根据这种类型特点来访问

示例代码如下：

 <script>
    // 1. 字面量声明数组
    let arr = [1, 2, 'pink', true]
    // 2. 使用new Array 构造函数声明   了解
    let arr1 = new Array(1, 2, 3, 4)
    console.log(arr1)
  </script>

（3）数组一些术语

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

（4）遍历数组

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

三、数组案例

1、数组求和及平均值

题目：求数组[2,6,1,7，4]里面所有元素的和以及平均值

示例代码如下：

    let arr = [2, 6, 1, 7, 4]
    // 1. 求和的变量 sum
    let sum = 0
    // 2.遍历累加
    for (let i = 0; i < arr.length; i++) {
      // console.log(arr[i])
      // sum = sum + arr[i]
      sum += arr[i]
    }
    console.log(`数组的和的结果是: ${sum}`)
    // 3. 平均值  和 / arr.length  = 4
    console.log(`数组的平均值结果是: ${sum / arr.length}`)


    // sum = sum + arr[0]
    // console.log(sum) 
  </script>

2、数组求最大值和最小值

示例代码如下：

  <script>
    let arr = [2, 6, 1, 7, 400, 55, 88, 100]
    // max里面要存的是最大值
    let max = arr[0]
    // min 要存放的是最小值
    let min = arr[0]
    // 遍历数组
    for (let i = 1; i < arr.length; i++) {
      // 如果max 比 数组元素里面的值小，我们就需要把这元素赋值给 max
      // if (max < arr[i]) max = arr[i]
      max < arr[i] ? max = arr[i] : max
      // 如果min 比 数组元素大， 我们就需要把数组元素给min
      // if (min > arr[i]) {
      //   min = arr[i]
      // }
      min > arr[i] ? min = arr[i] : min
    }
    // 输出 max
    console.log(`最大值是: ${max}`)
    console.log(`最小值是: ${min}`)
  </script>

四、操作数组

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

1、数组操作-----修改

示例代码如下：

  <script>
    // let arr = []
    // console.log(arr)
    // // console.log(arr[0])  // undefined
    // arr[0] = 1
    // arr[1] = 5
    // console.log(arr)
    let arr = ['pink', 'red', 'green']
    // 修改
    // arr[0] = 'hotpink'
    // console.log(arr)
    // 给所有的数组元素后面加个老师  修改
    for (let i = 0; i < arr.length; i++) {
      // console.log(arr[i])
      arr[i] = arr[i] + '老师'
    }
    console.log(arr)

  </script>

2、数组操作-----新增

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

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

示例代码如下：

  <script>
    let arr = ['pink', 'hotpink']
    // 新增  push 推末尾
    // console.log(arr.push('deeppink'))  // 3
    // arr.push('deeppinnk', 'linghtpink')
    // console.log(arr)
    // 开头追加
    arr.unshift('red')
    console.log(arr)
  </script>

数组筛选案例：将数组[2,0,6,1,77,0，52,0，25,7]中大于等于10的元素选出来，放入新数组

示例代码如下：

  <script>
    // 重点案例
    let arr = [2, 0, 6, 1, 77, 9, 54, 3, 78, 7]
    // 1. 声明新的空的数组
    let newArr = []
    // 2. 遍历旧数组
    for (let i = 0; i < arr.length; i++) {
      if (arr[i] >= 10) {
        // 3. 满足条件 追加给新的数组
        newArr.push(arr[i])
      }
    }
    // 4. 输出新的数组
    console.log(newArr)
  </script>

数组去0案例：将数组[2,0,6,1,77,0,52,0，25,7]中的О去掉后，形成一个不包含0的新数组

示例代码如下：

  <script>
    let arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
    // 1. 声明一个新的数组
    let newArr = []
    // 2. 遍历筛选
    for (let i = 0; i < arr.length; i++) {
      if (arr[i] !== 0) {
        newArr.push(arr[i])
      }
    }
    // 输出新数组
    console.log(newArr)
  </script>

3、数组操作-----删除

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

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

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

示例代码如下：

  <script>
    let arr = ['red', 'green', 'blue']
    // console.log(arr.pop()) // blue
    // 1.pop() 删除最后一个元素
    // arr.pop()
    // arr.pop()
    // console.log(arr)
    // 2. shift() 删除第一个元素
    // arr.shift()
    // console.log(arr)
    // 3. splice 删除指定元素  splice(起始位置-索引号, 删除几个)
    arr.splice(1, 1)  // 是从索引号1的位置开始删， 只删除1个
    // arr.splice(1) // 从green 删除到最后
    console.log(arr)
  </script>

4、综合案例

（1）根据数据生成柱形图

CSS代码如下：

    <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: space-around;
            align-items: flex-end;
            text-align: center;
        }

        .box>div {
            display: flex;
            width: 50px;
            background-color: pink;
            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>

JS代码如下：

   <script>
        // 1. 四次弹框效果
        // 声明一个新的数组
        let arr = []
        for (let i = 1; i <= 4; i++) {
            // let num = prompt(`请输入第${i}季度的数据:`)
            // arr.push(num)
            arr.push(prompt(`请输入第${i}季度的数据:`))
            // push记得加小括号，不是等号赋值的形式
        }
        // console.log(arr)  ['123','135','345','234']
        // 盒子开头
        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>

（2）冒泡排序

原理：跟交换变量的思路其实差不多，记住里面的趟数和交换次数总结一下规律

冒泡排序是一种简单的排序算法。
它重复地走访过要排序的数列，一次比较两个元素，如果他们的顺序错误就把他们交换过来。走访数列的工作是重复地进行直到没有再需要交换，也就是说该数列已经排序完成。
这个算法的名字由来是因为越小的元素会经由交换慢慢“浮”到数列的顶端。
比如数组[2,3,1,4,5]经过排序成为了[1,2,3,4,5]或者[5,4,3,2,1]

示例代码如下：

  <script>
    let arr = [2, 4, 3, 5, 1]
    for (let i = 0; i < arr.length - 1; i++) {
      for (let j = 0; j < arr.length - i - 1; j++) {
        // 开始交换 但是前提 第一个数大于第二个数才交换
        if (arr[j] > arr[j + 1]) {
          // 交换2个变量
          let temp = arr[j]
          arr[j] = arr[j + 1]
          arr[j + 1] = temp
        }
      }
    }
      console.log(arr)
  </script>