js基础,for循环,循环嵌套,数组方法,遍历数组,冒泡排序的原理

for循环

for循环的基本使用

<script>
    //for(起始条件;退出条件;变化量){
      //循环语句
   // }
    for(let i=1 ; i <=20 ;i++){
document.write('happy')
    }
  </script>

for循环练习

用for循环输出1-100岁

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

求1-100所有偶数的和

<script>
    let sum=0
    for (let i =1; i<=100; i++){
      if (i%2===0){
        
        sum+=i
      }
    }
    document .write(sum)
  </script>

页面打印小星星

<script>
    for (let i = 1 ;i<=5; i++){
      document.write(`♥`)
    }
  </script>

for遍历数组

<script>
    let arr =['一娃','二娃','三娃','四娃','五娃']
    //i小于等于四就会打印arr里面的内容
    
    //i从零开始循环,零代表第一个值,每次循环都会把后面一个值打印出来,直到最后一个值
    for (let i = 0 ; i<arr.length;i++){//length可以告诉我们数组里面有几个值
      //i<=arr.length-1是循环5次,i等于0,数组长度是5,5-1等于4所以
      //所以数组的长度是4,0<=4之间有01234要循环5次
      //i<arr.length也是循环5次,i等于0,数组长度等于5所以0<5之间有01234要循环5次
document.write(`名字是${arr[i]}<br>`)
    }
  </script>

for和while的区别

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

退出循环contiune和break

<script>
    // for (i=1; i<=5;i++){
    //   if (i===2){
    //     continue//退出当前循环,1345
    //   }
    //   document.write(i)
    // }
    for (i=1; i<=5;i++){
      if (i===2){
        break//退出整个循环当i全等于2时跳出整个循环,1
      }
      document.write(i)
    }
  </script>

循环嵌套的执行过程

利用循环的知识来对比一个简单的天文知识，我们知道地球在自转的同时也在围绕太阳公转，如果把自转和公转都看成是循环的话，就相当于是循环中又嵌套了另一个循环。

 

实际上 JavaScript 中任何一种循环语句都支持循环的嵌套，如下代码所示：

 

循环单词记忆单词案例

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

五行五列的小星星案例

<script>
    //i等于1,进入循环,直到小于6,一共循环五次
    for (let i =1 ; i<6;i++){   
//j等于1,进入判断,判断为真打印一次,j自加1等于2,再进入判断,为真打印一次,直到等于6
//等于6不再打印,执行下面的document.write(`<br>`)
//执行完document.write(`<br>`)后跳到i循环上,i自加1等于2开始新一轮的循环
      for (let j = 1 ; j<6;j++){
        //一行打印五个星星
        document.write(`☆`)
      }
      //打印完五个星星后换行
      document.write(`<br>`)
    }
  </script>

倒三角形的星星

<script>
    //i=1,i<6进入循环
    for (let i = 1 ; i<6;i++){
//j=1,j<=1,打印一个,如果是j<i那就会不执行本次循环,跳到换行
//因为每一行多一个星星,i每次自加一,所以j<=i
      for (let j=1 ; j<=i;j++){
        document .write(`☆`)
      }
      document .write(`<br>`)
​
    }
  </script>

99乘法表案例

<style>
    *{
      margin: 0;
      padding: 0;
    }
    span{
   display: inline-block;
      border: 1px solid #000;
      text-align: center;
      width: 63px;
      height: 33px;
     margin-left: -5px;
     
    }
  </style>
  <script>
    //外面循环控制趟数,每个数都要和其他数比一趟
      //里面循环控制次数,一个数要比多少次
    for (let i = 1 ; i<=9; i++){
      for (let j = 1 ; j<=i;j++){
        //第一次循环:如果j=1就打印1x1=1,也就是{j}x{i}=${i*j}
        //打印完后执行换行,i自加1=2,再进行第一次的循环
        document .write(`       
        <span>  ${j}x${i}=${i*j}</span>      
       `)
      }
      document.write(`<br>`)
    }
  </script>

为什么需要数组和数组的使用

数组的基本使用

1. 定义数组

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

   • 计算机中的编号从0开始，所以小明的编号为0，小刚编号为1，以此类推

   • 在数组中，数据的编号也叫索引或下标

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

     定义数组和数组单元

     <script>
       // 1. 语法，使用 [] 来定义一个空数组
       // 定义一个空数组，然后赋值给变量 classes
       // let classes = [];
     ​
       // 2. 定义非空数组
       let classes = ['小明', '小刚', '小红', '小丽', '小米']
     </script>

     通过 [] 定义数组，数据中可以存放真正的数据，如小明、小刚、小红等这些都是数组中的数据，我们这些数据称为数组单元，数组单元之间使用英文逗号分隔。

   取值语法

   通过下标取数据

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

   一些术语

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

数组求和求平均值 案例

<script>
    //字符串的长度是5
    let arr= [2,4,6,8,9]
    //求和变量
    let sum=0
    //求平均值变量
    let num = 0
    //只要i小于字符串的长度就循环
    for (let i =1 ; i<arr.length;i++){
      //总和:sum=sum+arr[i]
      sum+=arr[i]//i是数字,没有任何意义,但和arr组合在一起就变得有意义 ,因为循环里写了i++.i每次循环都自加一
                 //前面外面学习了arr[0]是数组的第一个值,所以arr[i}放在循环里就是可以得到整个数组的值
    }
    //平均值:num=sum(总和)/字符串长度arr.length
    num=sum/arr.length
    document.write(`这个同学的总分是${sum}平均分是${num}`)
  </script>

什么是遍历数组(重点)

i是数字,i输出的结果是索引号下标,没有任何意义,但和arr组合在一起就变得有意义 ,因为循环里写了i++.i每次循环都自加1 ,arr[0]是数组的第一个值,所以arr[i}放在循环里就可以得到数组里面的每一个数据,这就叫遍历数组

数组求和再次梳理(重点)

<script>
//数组求和案例
let arr = [2, 6, 1, 7, 4]
let sum = 0
//遍历数组取出里面的每一个元素然后累加
for (let i = 0; i < arr.length; i++) {
//最容易迷惑的地方i和 arr[i]
​
//i是数字,i输出的结果是索引号下标,没有任何意义,但和arr组合在一起就变得有意义 ,因为循环里写了i++.i每次循环都自加一
 //前面外面学习了arr[0]是数组的第一个值,所以arr[i}放在循环里就是可以得到整个数组的值,这就叫遍历数组
// console.log(i)
// arr[i]输出的结果是数组元素（值）
// console.log(arr[i])
sum = sum + arr[i]
} 
console.log(sum)
</script>

​

求数组最大值案列

<script>
let arr= [2, 6, 1, 77, 52, 25, 7]
//声明最大值的变量
//得到数组元素的方法数组名[索引号]
let max = arr[0]
//遍历数组
for (let i = 1; i < arr.length; i++) {
//i是什么？是序号1234567
//只不过这个序号，正好和数组的索引号对应
//i可以看做是数组的索引号
//得到数组元素的方法数组名[索引号]arr[i]
if(max < arr[i]){
max = arr[i]
}
console.log(max)
</script>

​

操作数组-查和改

<script>
    let arr = ['小红','小兰', '小明']
    //访问/查询
    console.log(arr[0])
    //2.改
    arr[0] = '小李'
    document.write (arr)//小李小兰小明
    </script>

增加数组元素push(重点)

<script>
    let i =20
    let arr = ['red', 'green']
    // 把 blue 放到 arr 的后面
    // arr.push('blue')
    //返回值是新的数组长度：
    //不但把数组放入数组，而且还告诉我们，看看有3个值啦
    // console.log(arr.push('blue'))
    arr.push('blue','skyblue','小明',i)
    console.log(arr)
    </script>

​

unshift前面追加元素

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

​

筛选数组案例

<script>
    let arr = [2,0,6,1,77,0,52,0,25,7]
    let sum =[]
    //i就是索引号0123456789
    for (let i = 0 ;i<arr.length;i++){
   //arr[i]就是数组里的每一个元素,2,0,6,1,77,0,52,0,25,7
   //只要arr[i]满足>=10这个条件,就把arr[i]里面的值打印到新数组sum里面 
      if(arr[i]>=10){
        //满足条件的依次追加给新数组
        //arr[i]大于等于十的值追加给sum
        sum.push(arr[i])
      }
    }
    console.log(sum)
  </script>

数组增加新的数据小结

1. 想要数组末尾增加数据元素利用那个方法？

• arr.push()

• 可以添加一个或者多个数组元素

• 返回的是数组长度

1. 想要数组开头增加数据元素利用那个方法？

   • arr.unshift()

   • 可以添加一个或者多个数组元素

   • 返回的是数组长度

2. 重点记住那个？ arr.push()

筛选数组去0案例

<script>
    let arr = [2,0,6,1,77,0,52,0,25,7]
    //声明新数组
    let sum =[]
    //遍历旧数组
    //i就是索引号0123456789
    for (let i = 0 ;i<arr.length;i++){
   //arr[i]就是数组里的每一个元素,2,0,6,1,77,0,52,0,25,7
   //只要arr[i]满足不等于0这个条件,就把arr[i]里面的值打印到新数组sum里面 
      if(arr[i]>0){//或者(arr[i]!==0)
        //满足条件的依次追加给新数组
        //arr[i]大于等于十的值追加给sum
        sum.push(arr[i])
      }
    }
    console.log(sum)
  </script>

操作数组

数组做为对象数据类型，不但有 length 属性可以使用，还提供了许多方法：

1. push 动态向数组的尾部添加一个单元

2. unshit 动态向数组头部添加一个单元

3. pop 删除最后一个单元

4. shift 删除第一个单元

5. splice 动态删除任意单元

使用以上4个方法时，都是直接在原数组上进行操作，即成功调任何一个方法，原数组都跟着发生相应的改变。并且在添加或删除单元时 length 并不会发生错乱。

<script>
  // 定义一个数组
  let arr = ['html', 'css', 'javascript']
​
  // 1. push 动态向数组的尾部添加一个单元
  arr.push('Nodejs')
  console.log(arr)
  arr.push('Vue')
​
  // 2. unshit 动态向数组头部添加一个单元
  arr.unshift('VS Code')
  console.log(arr)
​
  // 3. splice 动态删除任意单元
  arr.splice(2, 1) // 从索引值为2的位置开始删除1个单元
  console.log(arr)
​
  // 4. pop 删除最后一个单元
  arr.pop()
  console.log(arr)
​
  // 5. shift 删除第一个单元
  arr.shift()
  console.log(arr)
</script>

解释： start起始位置： 指定修改的开始位置（从0计数） deleteCount: 表示要移除的数组元素的个数 可选的。如果省略则默认从指定的起始位置删除 到最后

<script>
// 重点删除 arr.splice(从哪里开始删，删几个)
let arr = ['red', 'green', 'blue']
// 我就想把green 删掉
//第一个1是从索引号是1的位置开始删
//第二1是删除几个
// arr.splice(1, 1)
arr.splice(1, 1)
console.log(arr)
</script>

​

splice添加数组

数据删除元素小结

1.想要数组末尾删除1个数据元素利用那个方法？带参数吗？ arr.pop() 不带参数 返回值是删除的元素 2.想要数组开头删除1个数据元素利用那个方法？带参数吗？ arr.shift() 不带参数 返回值是删除的元素 3.想要指定删除数组元素用那个？开发常用吗？有那些使用场景？ arr.splice(起始位置，删除的个数） 开发很常用，比如随机抽奖，比如删除指定商品等等

冒泡排序的原理

冒泡排序上

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

1.一共需要的趟数我们用外层for循环 5个数据我们一共需要走4趟 长度就是数组长度减去1 arr.length-1 2.每一趟交换次数我们用里层for循环 第一趋交换4次 第二趋交换3次 第三趋交换2次 第四植交换1次 长度就是数组长度减去次数 但是我们次数是从0次开始的 所以最终 arr.length-i-1 3.交换2个变量就好了

冒泡排序下

<script>
    let arr = [5 ,4, 3, 2, 1]
    //1.外层循环控制,总数是5个数,每个数都要与其他数比一趟所以趟数循环4趟arr.length-1(5-1)(5-2)(5-3)(5-4)
    for (let i = 0; i < arr.length -1; i++) {
    // 2.里层的循环一个数与其他数比几次 控制一趟交换几次 arr.length-i-1(5-0-1)(5-1-1)(5-2-1)(5-3-1)
    for (let j = 0; j < arr.length - i - 1; j++)
    //交换两个变量
       //arr[j]=arr[0]=5,arr[j+1]=arr[1]=4
        //arr[j+1]=4,这里的arr[j]代表了数组里面值的位置arr[j]就是0
    // arr[j](5) arr[j+1](4),如果arr[j]>arr[j+1],如果5大于4
    if(arr[j] > arr[j + 1]){
      //把arr[j]给空值,(把5存到空值里面)
    let temp = arr[j]
    //把arr[j+1](4)存到arr[j]的空盒子里面
    arr[j]=arr[j+1]
    //此时arr[j+1]是空盒子,把temp的值(arr[j])5给arr[j+1]
    arr[j + 1]= temp
    }
    }
    
    console.log(arr)
  </script>

用函数排序

<script>
    let arr=[5,2,3,6,9,8,4,5,7,1,0,45,0,15,45,45]
    arr.sort(function(a,b){
      return b-a
    })
    document.write(arr)
  </script>

综合案例生成柱形图

 <script>
        //设一个空数组,用push收集用户输入的数据,把它放在空数组里面
      let arr= []
      for (i=1;i<=4;i++){
          //因为要收集四个季度的数据,所以要弹出四次框
          //不要写四次prompt,直接把弹出框写在循环里面
          arr.push(prompt(`请输入第${i}季度的数据`))
      }
      //打印盒子头部
      document.write(` <div class="box">`)
        //打印盒子中间
        //用循环把四个盒子打印出来
        for( let i=0 ; i<arr.length;i++){
       //把盒子的结构放在输出标签里面,然后把盒子的高换成用户输入的数据也就是arr[i]
            document.write(`
            <div style="height: ${arr[i]}px;">
            <span> ${arr[i]}</span>
            <h4>第 ${[i+1]}季度</h4>
        </div>
     
      `)
        }
      //打印盒子尾部
      document.width(`</div>`)
    </script>
​

四、单词

单词	说明	实例
unshift	在数组前面增加元素
pop	删除数组最后一个元素
shift	删除数组第一个元素
splice	删除指定元素
push	增加数组元素