for循环

运行特点：

  • 执行到循环时（第一次循环）：初始变量只在这时执行一次；
  • 然后进入条件判断；第一次不会执行变化值；
    之后的循环，不再执行 初始化；先执行变化值；再进入条件判断；

    语法：

    ```javascript for(初始变量; 判断条件; 变化值i++){ 代码块(循环体) }

  1. 满足条件，进行循环体运行，然后往下运行，完成一次循环体后，返回运行变化值i++， 然后条件判断，再循环体，如此循环 不满足，跳出循环

  2. 两个分号不能少，其他可以少或者分开写

  3. 运行详细过程看图

    初始变量——》 判断条件——》循环体——》变化值i++，返回判断条件，依次运行

while雷同；debugger断点可以看出循环过程

  2. ![](http://md.zbztb.cn/uploads/727238650236/1652796196018.png#crop=0&crop=0&crop=1&crop=1&id=fTYDj&originHeight=574&originWidth=846&originalType=binary&ratio=1&rotation=0&showTitle=false&status=done&style=none&title=)
  4. 1. 可以看出代码变的很乱，勿用
  5. 1. 在for()内声明的循环变量，只能在循环内使用；不可在外面使用；
  7. ![1652785674694.png](https://cdn.nlark.com/yuque/0/2022/png/28508367/1652877905248-45823eea-dba9-488e-af61-ac80e41b4c8a.png#clientId=u7447234b-4196-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u781192cd&name=1652785674694.png&originHeight=187&originWidth=226&originalType=binary&ratio=1&rotation=0&showTitle=false&size=18101&status=done&style=none&taskId=u5368a7a7-b034-4500-9e05-9fd5b1f826d&title=)
  9. <a name="79816e4e"></a>
  10. ### for循环和while循环区别
  12. for循环：把声明起始值、循环条件、变化值写到一起；<br />关注循环次数；
  14. while循环：三要素分开写，关注循环条件；
  16. while里面嵌套if，if里面嵌套lf，循环里面可以相互嵌套
  18. <a name="25e74a49"></a>
  19. ### for循环案例
  20. ```javascript
  21. <script>
  22.     // 利用for循环，来输出1~100岁
  23.      debugger
  24.      for(let i = 1; i <=100; i++){ 
  25.        console.log(i)
  26.      }
  27.     // 求1-100之间所有的偶数和 // 2550
  28.     let sum = 0
  29.     for (let num = 1; num <= 100; num++) {
  30.       if (num % 2 === 0) {
  31.         sum += num
  32.         //  console.log(sum)
  33.       }
  34.       console.log(sum)
  35.     }
  36.     // 判断当前值是否为 偶数
  37.     // 页面中打印5个小星星
  38.     for (let i = 1; i <= 5; i++) {
  39.       document.write("🎃")
  40.     }
  41.   </script>

退出循环

循环有个缺点： 循环多少次，已经固定写死了； js执行流程已经给固定了；
因此有个方法，用来实现：满足 一定条件时，中断循环，循环结束；
continue和break的区别：
循环可用
continue：结束本次循环，继续下次循环 （中文：继续）
break：跳出所在的循环（中文：中断），后面的都不做了
扩展： while循环 ，也可以使用 continue 和 break

for循环嵌套

内部循环次数多，作用范围小

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

     <script>
    // 外层循环控制行
    // 内层循环控制列
    // 动态控制行列
    // let row = prompt("请输入行：")
    // let col = prompt("请输入列")
    // for (let na = 1; na <= row; na++) {
    //   for (let gua = 1; gua <= col; gua++) {
    //     document.write('🎃')
    //   }
    //   document.write('<br>')
    // }
         正三角
    for (let na = 0; na < 5; na++) {
      for (let gua = 0; gua <= na; gua++) {
        document.write('🎃')
      }
      document.write('<br>')
    }

         倒三角
    for (let na = 1; na <= 5; na++) {
      for (let gua = 5; gua >= na; gua--) {
        document.write('🎃')
      }
      document.write('<br>')
    }

        乘法表
  for (let num = 1; num <= 9; num++) {
      for (let num2 = 1; num2 <= num; num2++) {
          模板字符串
        document.write(`<div class="box">${num2} * ${num}= ${num * num2} </div>`)
      }
      document.write('<br>')
    }
  </script>

数组

数组(Array)是一种可以按顺序保存数据的数据类型，复杂类型之一；
可以包含简单数据类型，可以存储多个任意的值，数据的集合
【变量是一个容器，可以存任意类型数据】

创建数组

🔥声明语法：
let 数组名 = [数据1，数据2，...]
适合做数组名的有arr  list  名称s、es像items...   英语的复数


💥取值语法：

🙌数组名[下标=编号]
数据的编号也叫索引或下标

下标=编号从0开始，用于取值查询或者赋予新值
取出来是什么类型的，就根据这种类型特点来访问

例如：1.在获取值的时候，如果索引越界，那边就会返回undefined
        console.log(names[100])----undefined
扩展:
    1. 元素： 数组中保存的每个数据都叫数组元素

💖长度：数组个数

🚀数组名.length

通过数组的length属性获得

也可以给长度赋值，如果赋值为0，相当于清空了数组的成员
数组名.length = 0

访问数组的最后一个元素 : arr[arr.length - 1]
不要用alert和document.write,了解

🔥🔥🔥数组遍历：

按照顺序，依次访问集合中的每个元素
一般用for循环先遍历
for(let 变量 = 0；变量 < 数组名.length；变量++){
数组名[编号]
}
案例：取最大值

 <script>
    // 最大值：77
    // [2,6,1,77,52,25,7]
    // 1. 整体思路： 数组遍历，依次获取当前值和 max 对比；
    // 2. 由于数组第一个数据对比时，max值为undefined,
    // 那么我们直接吧 这一个值，当做当前的最大值
    let nums = [2, 6, 1, 77, 52, 25, 7];
    let max = nums[0];
    // 先遍历
    for (let i = 0; i < nums.length; i++) {
      if (nums[i] > max) {
        max = nums[i]
      }
    }
    console.log(max)
     // 求和和平均值
    let num = [2, 6, 1, 7, 4];
    let sum = 0
    for (let i = 0; i < num.length; i++) {
      let value = num[i];
      sum += value
    }
    console.log(sum)
    let avan = sum / num.length
    console.log(avan)
  </script>

操作数组

增加

数组.push()方法，添加一个或多个元素到数组末尾==，返回数组新长度

arr.push(元素)   加多个元素，逗号隔开

它是个变更方法，会改变原数组

数组.unshift()方法，添加一个或多个元素到数组开头==，返回数组新长度

arr.unshift(元素)   加多个元素，逗号隔开

它是个变更方法，会改变原数组

删除

数组名.pop() 从数组中删除最后一个元素，只能删除一个元素，并返回该元素的值
数组名.shift() 从数组中删除第一个元素，只能删除一个元素，并返回该元素的值

  // pop: 1.删除数组最后一个元素 2.只能删除一个  3.返回值为，被删除的元素
    // 关注点： 是被删除的元素
    let sheep = ['懒洋洋', '美羊羊', '暖洋洋', '喜羊羊'];
    let name1 = sheep.pop()
    console.log('name1: ', name1);
    console.log(sheep) // 喜羊羊

    // shift 1.删除数组第一个元素 2.只能删除一个   3.返回值为，被删除的元素
    let name2 = sheep.shift()
    console.log('name2: ', name2);
    console.log(sheep) //懒洋洋

数组名.splice(起始索引位置 ，删除数量 ，新增元素 )

 <script>
    // splice: 1. 删除任意位置的元素 2.可以用来删除多个元素 3. 返回值为，被删除的元素数组
    // 注意事项： 1. 被删除的元素包含了开始值;  
                 2. 第二个参数不填的话，执行结果为删除起始值，到最后一个元素
    let sheep = ['懒羊羊', '美羊羊', '暖洋洋', '喜羊羊'];
    sheep.splice(0, 1)
    // 删除数量写错没事，不报错
    console.log('sheep: ', sheep);

    // 相当于 pop

    // 数组最后一位元素下标 arr.length-1
    sheep.splice(sheep.length - 1, 1)
    console.log('sheep: ', sheep);

    // 如何在任意位置，添加一个元素

    // splice： 第三个参数，就是要新增元素

    // splice(起始位,要删除的数量,要新增的元素)
    sheep.splice(0, 0, "慢羊羊")
    console.log(sheep)

    // sheep.splice(0)  清除数组
    console.log(sheep)
  </script>

for循环和数组 - 图1

修改

数组arr[i] = 新值

let arr = [1,2,1,2,5]
console.log(arr[5])   //undefined
//在为数组的某个位置的元素重新赋值时
  1. 如果有这个索引，那么就是修改数值
  2. 如果没有这个索引，就是添加新成员；会影响数组长度
     不常用，因为索引缺点不直观

arr[8] = 'abc'   //添加到数组中，动态特征

 🔥🔥🔥数值长度与索引有关，添加没有的索引，那么长度为索引+1，中间有空值

console.log(arr.length);  //9

查询

for 循环遍历 索引下标，长度

反转

数组名.reverse() 对数组进行反转，会改变原来的数组，返回反转后的新数组

let arr=[1,2,3]
console.log(arr.reverse())
结果     [3,2,1]

排序

数组名.sort() 对数组排序，会改变原来的数组，返回排序后的新数组

let arr = [1,5,3,4,6]
console.log(arr.sort())
返回值 新数组

image.png