JavaScript for语句与数组

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

for 语句

  <script>
    //  变量起始值;  判断条件;变量变化量
    for (let i = 1; i <= 3; i++) {
      document.write('月薪过万')
    }
  </script>

循环练习

利用for循环输出1~100岁

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

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

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

页面中打印5个小星星

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

循环数组

需求:请将 数组[‘马超’,’赵云’,’张飞’,’关羽’,’黄忠’]依次打印出来

  <script>
    let arr = ['张无忌', '张三丰', '张之洞', '张学友', '张居正',]
    for (let i = 0; i <= 4; i++) {
      console.log(arr[i])
    }

    // 遍历数组:优化后终止终止条件:起始值小于数组长度,也就是 0~4
    let arb = ['张无忌', '张三丰', '张之洞', '张学友', '张居正',]
    for (let i = 0; i < arb.length; i++) {
      console.log(arb[i])
    }

    // 遍历数组:优化后终止终止条件:起始值小于等于数组长度减去1,也就是 0~4
    let ard = ['张无忌', '张三丰', '张之洞', '张学友', '张居正',]
    for (let i = 0; i <= ard.length - 1; i++) {
      console.log(ard[i])
    }
  </script>

退出循环

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

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

  <script>
    for (let i = 1; i <= 5; i++) {
      if (i === 3) {
        continue
      }
      console.log(i)
      document.write(i) // 1245
    }
  </script>
  <script>
    for (let i = 1; i <= 5; i++) {
      if (i === 3) {
        break
      }
      console.log(i)
      document.write(i) // 12
    }
  </script>

无限循环

for(;;) 也可以来构造无限循环,同样需要使用break退出循环。

  <script>
    for (;;) {
      console.log(1)
    }
  </script>

for循环和while循环区别

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

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

循环嵌套

外部的for执行一次,内部的for执行全部次。

计算:假如每天记住5个单词,3天后一共能记住多少单词?

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

案例练习

打印5行5列的星星

  <script>
    // 外层for循环打印行数
    // 内层for循环打印几个小星星

    for (let i = 1; i <= 5; i++) {
      for (let j = 1; j <= 5; j++) {
        document.write(`⭐️`)
      }
      // 进行换行显示
      document.write('<br>')
    }
  </script>

升级代码:用户输入行数和列数,打印对应的星星!

  <script>
    // 外层for循环打印行数
    // 内层for循环打印几个小星星

    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>

打印倒三角形

  <script>
    // 外层for循环打印行数
    // 内层for循环打印几个小星星

    // 外层循环 i = 1行 2行 3行 4行 5行
    // 内层终止条件 j <= i (1~5列)
    
    for (let i = 1; i <= 5; i++) {
      for (let j = 1; j <= i; j++) {
        document.write(`⭐️`)
      }
      // 进行换行显示
      document.write('<br>')
    }
  </script>

九九乘法表

  <script>
    // 外层for循环打印行数
    // 内层for循环打印几个小星星

    // 外层循环 i = 1行 2行 3行 4行 5行
    // 内层 终止条件 j <= i (1~5列)

    for (let i = 1; i <= 9; i++) {
      for (let j = 1; j <= i; j++) {
        document.write(`<span> ${j} X ${i} = ${i * j}</span>`)
      }
      // 进行换行显示
      document.write('<br>')
    }
  </script>

数组

数组(Array)是一种可以按顺序保存数据的数据类型。为什么使用数组?如果有多个数据可以用数组保存起来,然后放到一个变量中,管理非常方便。

  <script>
    // 1. 字面量声明数组
    let arr = [1, 2, 'xinbiao', true]
    console.log(arr)

    // 2.  使用new Array 构造函数声明,只做了解
    let arb = new Array(1, 2, 3, 4)
    console.log(arb)
  </script>

数组求和与平均值

需求:求数组[2,6,1,7,4]里面所有元素的和以及平均值。分析:

①:声明一个求和变量 sum
②:遍历这个数组,把里面每个数组元素加到 sum 里面。
③:用求和变量 sum 除以数组的长度就可以得到数组的平均值。

  <script>
    let arr = [2, 6, 1, 7, 4]
    let sum = 0

    // 遍历累加
    for (let i = 0; i < arr.length; i++) {
      sum = sum + 1
    }
    console.log(`数组的和的结果是${sum}`)
    console.log(`数组的平均值结果是${sum / arr.length}`)
  </script>

数组求最大值和最小值

需求:求数组[2,6,1,77,52,25,7]中的最大值,分析:

①:声明一个保存最大元素的变量 max
②:默认最大值可以取数组中的第一个元素。
③:遍历这个数组,把里面每个数组元素和max相比较。
④:如果这个数组元素大于max 就把这个数组元素存到 max里面,否则继续下一轮比较。
⑤:最后输出这个 max

  <script>
    let arr = [2, 6, 1, 77, 52, 25, 7]
    let max = arr[0]
    let min = arr[0]
    
    //这里的起始量是1,数组0就不用比较,因为max初始值就是数组0
    for (let i = 1; i < arr.length; i++) {
      // 遍历数组,max比数组大,max就等于数组
      if (max < arr[i]) {
        max = arr[i]
      }
      // 遍历数组,min比数组小,min就等于数组
      if (min > arr[i]) {
        min = arr[i]
      }

      // 不用if语句,改用三元运算符
      /*
      max < arr[i] ? max = arr[i] : max
      min > arr[i] ? min = arr[i] : min
      */
    }
    console.log(`数组的最大值${max}`) // 数组的最大值77
    console.log(`数组的最小值${min}`) // 数组的最小值 1
  </script>

空数组给值

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

  <script>
    let arr = []
    arr[0] = 1
    arr[1] = 5
    console.log(arr)
  </script>

修改数组

把数组中的red 改为红色。

  <script>
    let arr = ['白色', '黑色', '蓝色', 'red',]
    arr[3] = '红色'
    console.log(arr)
  </script>

给所有数组都加上一个词,例如白色的纸,黑色的纸···

  <script>
    let arr = ['白色', '黑色', '蓝色', '红色',]
    for (let i = 0; i < arr.length; i++) {
      arr[i] = arr[i] + '的纸'
    }
    console.log(arr);
  </script>

新增数组

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

 <script>
    let arr = ['脉动', '尖叫',]
    arr.push('乐虎')
    console.log(arr)

    console.log(arr.push('乐虎')) // 3 打印新增数组,返回的是新增数组的长度
  </script>

arr.unshift方法将一个或多个元素添加到数组的开头,并返回该数组的新长度。

  <script>
    let arr = ['脉动', '尖叫',]
    arr.unshift('乐虎', '雪碧')
    console.log(arr)

    console.log(arr.unshift('乐虎', '雪碧')) // 4 打印新增数组,返回的是新增数组的长度
  </script>
</body>

筛选数组

需求:将数组2,[0,6,1,77,0,52,0,25,7]中大于等于10的元素选出来,放入新数组。分析:

①:声明一个新的数组用于存放新数据newArr
②:遍历原来的旧数组,找出大于等于10的元素
③:依次追加给新数组 newArr

  <script>
    let arr = ['2', '0', '6', '1', '77', '0', '52', '0', '25', '7']
    let newArr = []
    for (let i = 0; i < arr.length; i++) {
      if (arr[i] >= 10) {
        newArr.push(arr[i])
      }
    }
    console.log(newArr)
  </script>

『案例』数组去0

原本是!== 不全等的意思,测试过程中不生效,换成!= 不等,就可以了。

 <script>
    let arr = ['2', '0', '6', '1', '77', '0', '52', '0', '25', '7']
    let newArr = []
    for (let i = 0; i < arr.length; i++) {
      if (arr[i] != 0) {
        newArr.push(arr[i])
      }
    }
    console.log(newArr)
  </script>

删除数组

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

  <script>
    let arr = ['张华', '李莲', '张明', '李飞']
    arr.pop()      //把李飞给删除了,最后的数组给删除掉
    arr.pop()      //把张明也给删除了,最后的数组给删除掉
    console.log(arr.pop()) // 张明,————告诉你我把那个元素删除掉了
    console.log(arr)
  </script>

.shift() 方法从数组中删除最前一个元素,并返回该元素的值。

  <script>
    let arr = ['张华', '李莲', '张明', '李飞']
    arr.shift()      //把张华给删除了,最后的数组给删除掉
    arr.shift()      //把李莲也给删除了,最后的数组给删除掉
    console.log(arr)
  </script>

指定删除

随机抽奖,中奖的用户就需要从数组里面删除,不允许重复抽奖。

数组.splice()方法删除指定元素。arr.splice(start, deleteCount) ,指定修改的开始位置从0计数,如果省略则默认从指定的起始位置删除到最后。

  <script>
    let arr = ['张华', '李莲', '张明', '李飞']
    //从索引号1(起始位置,删除几个元素)
    arr.splice(1, 2)
    console.log(arr) // 张华,李飞
  </script>
</body>

『案例』生成柱形图

需求:用户输入四个季度的数据,可以生成柱形图。

① 需要输入4次数据并放到一个数组里面,利用循环,弹出4次框;
② 遍历改数组,根据数据生成4个柱形图,渲染打印到页面中,柱形图用<div>并设置宽度固定,高度是用户输入的数据,div里面包含显示的数字和第几季度。

  <script>
    // 声明一个空数组
    let arr = []

    for (let i = 1; i <= 4; i++) {
      // 用户输入数据,并从后面添加到数组
      arr.push(prompt(`请输入第${i}季度的数据`))
    }
    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>
123
第1季度
156
第2季度
120
第3季度
210
第4季度

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>

『案例』冒泡排序

冒泡排序是一种简单的排序算法。它重复地走访过要排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来。走访数列的工作是重复地进行直到没有再需要交换,也就是说该数列已经排序完成。

这个算法的名字由来是因为越小的元素会经由交换慢慢“浮”到数列的顶端。比如数组 [2,3,1,4,5] 经过排序成为了 [1,2,3,4,5] 或者 [5,4,3,2,1]

JavaScript for语句与数组
  <script>
    // 声明一个数组
    let arr = [5, 4, 3, 2, 1]

    // 5个数据比较走4趟,所以length - 1
    for (let i = 0; i < arr.length - 1; i++) {

      //每趟交换的次数都减少1,第一趟是4,第二趟是3···所以length - 1 -1
      for (let j = 0; j < arr.length; j++) {
        // 开始交换的前提是第一个数大于第二个数才交换
        if (arr[j] > arr[j + 1]) {
          let temp = arr[j]     // 临时变量 第一个数据给临时变量,第一个数据和第二个数据互换
          arr[j] = arr[j + 1]
          arr[j + 1] = temp
        }
      }
    }
    console.log(arr)
  </script>

数组排序

.sort() 默认的的升序,那么想要降序就要使用函数完成。

 <script>
    let arr = [5, 4, 3, 2, 1]

    // 默认是升序
    arr.sort()
    console.log(arr)

    // 升序
    arr.sort(function (a, b) {
      return a - b
    })
    console.log(arr)

    // 降序
    arr.sort(function (a, b) {
      return b - a
    })
    console.log(arr)
  </script>

原创文章,作者:霍欣标,如若转载,请注明出处:https://www.bigengwu.cn/xue/79.html

霍欣标的头像霍欣标
上一篇 2024-07-02 23:53
下一篇 2024-07-14 23:34

相关推荐

博主人懒,应管局要求暂不开启站内私信和评论功能,如需帮助请发邮件。

邮箱账号:1969600480@qq.com