for 循环的基本使用

for循环概况: 一般的循环结构,有while循环,do..while循环,hefor循环. 如果明确了循环的次数的时候推荐使用for循环不明确循环的次数的时候推荐使用while循环 while(true)来构造“无限”循环，需要使用break退出循环. for循环可用for(;;)来构造“无限”循环，同样需要使用break退出循环。

for循环基本使用:

for(声明初始化变量;循环结束条件;变量变化){
      //代码块
    }

for循环小练习:遍历数组:

let arr = ['孙悟空','猪九戒','沙老大','法海','小白龙'];
    for (let i = 0; i < arr.length; i++) {
    //声明一个变量为数组元素
       let name = arr[i];
       document.write(name+'<br>')
     }

一般情况下也可以使用foreach方法来遍历,但不推荐使用,for in, for of 变量值例如:i是一个string类型,当我们使用number类型来打印时,需要转换一下类型.

标准的for循环中的i是number类型,表示的是数组的下标,但是foreach循环中的i表示的是数组的key是string类型,因为js中一切皆为对象。

for循环嵌套

首先要了解continue与break的一些基本概念:

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

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

let sum = 0

let arr = [10, 20, 30, 40]

for (let i = 0; i < arr.length; i++) {

if (i == 2) {

continue

}

sum += arr[i]

}

console.log(sum)

continue跳过 i == 2这种情况,打印结果会没有i=2这个结果,但是其他循环值照常运行

而break是遇到break,立即终止所在循环,例如以下,当数组元素为10时,结束循环,后续循环不在执行.

let arr = [88,20,10,22,44]
    let a = -1
    for (let i = 0; i < arr.length; i++) {
      if(arr[i] === 10){
        a = i;
        break;
      }
    }
    document.write(a)

分享一下小案例:

1.打印等腰三角形星星:

首先需要我们理清思路,一般的正三角形和倒三角形我们是通过两次for循环来确定航属于列数,再进行嵌套打印

let num = prompt('请输入等腰三角形行数：')
    let str = ''

//正三角形,在页面中打印
//外层循环是我们制定的行数
for (let i = 1; i <= num; i++) {
      //当行打印一行时,列应该打印相同的数量,所以列应该小于等于行数
      for (let k = 1; k <= i; k++) {
        document.write('*&nbsp;') ;
      }
      //换行,不然打印的行会在一行显示
      document.write('<br>');
    }
    
    //同样的正三角也是同样的思路,我们可以先打印一个倒三角,倒三角输出的为空格,空格使我们看不见的,也就说明空格把我们的*挤了过去
    for (let i = 1; i <= num; i++) {
    //打印空白倒三角
      for (let j = 0; j < num- i; j++) {
        document.write('&nbsp;') 
      }
      for (let k = 1; k <= i; k++) {
        document.write('*&nbsp;') 
      }
      document.write('<br>')
    }
    //这样做在一些浏览器中显示的有可能不是等腰三角形,我遇见过...

2.九九乘法表:

这种我暂时没用Dom和Bom,单纯用一下js

<style>
//给body和div增加一个宽度,防止页面缩小时,我们的九九乘法表会掉下去,不好看
    body{
      width: 1200px;
    }
    //给每个小格子设定样式,让页面好看一些
    div{
      display: inline-block;
      border: pink 1px solid;
      margin: 5px;
      padding: 5px;
      width: 70px;
      text-align: center;
      box-shadow: 5px,5px,5px,rgba(255, 255, 255, .5);
      border-radius: 5px;
      color: yellowgreen;
    }
  </style>
  <script>
  //一模一样的行列
    for (let i = 1; i <= 9; i++) {
      for (let j = 1; j <= i; j++) {
        document.write('<div>'+j+'&nbsp;x&nbsp;'+i+'='+i*j+'</div>') 
      }
      document.write('<br>')
      
    }
  </script>

3.排序,我暂时只写了选择排序与冒泡排序的方法,三元运算符写了个简单的三个数的排序,sort()方法比较简单

 let ji = 0;```
//设置用来调换位置的值

let arr = [12,43,1,34,56]
// 冒泡排序
//这个算法的名字由来是因为越小的元素会经由交换慢慢“浮”到数列的顶端。
//它重复地走访过要排序的数列，一次比较两个元素，如果他们的顺序错误就把他们交换过来。走访数列的工作是重

复地进行直到没有再需要交换，也就是说该数列已经排序完成。 //遍历数组,因为第一个不需要与自己作比较,循环次数减一 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]) {
          ji = arr[j]
          arr[j] = arr[j+1]
          arr[j+1] = ji
        }
      } 
    }
    console.log(arr) 
    
    // 选择排序,把选择排序看成战斗,赢了留下,输了就离开
    // 比较的轮数
    for (let i = 0; i < arr.length-1; i++) {
      // 一轮里面作战的次数
      for (let j = i+1; j < arr.length; j++) {
        if (arr[i]>arr[j]) {
          // 把大的数赋值给后面的arr[j]
          ji = arr[i]
          arr[i] = arr[j]
          arr[j] = ji
        }
      } 
    }
    console.log(arr)
    
    /* // 用sort方法
    arr.sort(function (a,b) {
      return b - a;//倒序a-b是正序
    });
    
    console.log(arr) */
    
    let count1 = +prompt('请输入一个数');
    let count2 = +prompt('请输入另一个数');
    // count1===count2?alert('两数相等'):(count1>count2 ? alert(`最大值是${count1}`):alert(`最大值是${count2}`));
    

    let count3 = +prompt('请输入第三个数');
    count1>count2?(count1>count3?(count3>count2?document.write(count1,count3,count2):document.write(count1,count2,count3)):document.write(count3,count1,count2)):(count2>count3?document.write(count2,count3,count1):
    document.write(count3,count2,count1));