JavaScript基础之for循环基础,数组的增删改查及冒泡排序解析

最新推荐文章于 2022-08-27 16:37:16 发布

码少女壮士

最新推荐文章于 2022-08-27 16:37:16 发布

阅读量524

点赞数 6

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_40630195/article/details/121795707

版权

JavaScript基础03

for循环

for循环语法

将重复执行的代码变为for循环:

<script>
  for(声明起始值;循环条件;变化值;){
    循环体
  }
</script>

案例:

<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>
    <script>
        // 1. 利用for循环输出多少岁了
         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) {
                 // sum = sum + i
                 sum += i
             }
         }
         document.write(sum)

        // 3. 页面打印5个小星星
         for (let i = 1; i <= 5; i++) {
             document.write('☆')
         }
    </script>
</body>

</html>

for循环和while循环有什么区别呢：

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

循环退出

循环结束：

continue：结束本次循环，继续下次循环

break：跳出所在的循环

for循环嵌套

<script>
  for(声明起始值;循环条件;变化值;){
  	for(声明起始值;循环条件;变化值;){
   		循环体
 	 }
  }
</script>

案例1:输出几行几列小星星

<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>
    <script>
        let num1 = prompt('请输入行数')
        let num2 = prompt('请输入列数')
        // 外层行  里层每个的几个星星
        for (let i = 1; i <= num1; i++) {
            for (let j = 1; j <= num2; j++) {
                document.write('★')
            }
            // 五个星星打完了，再换行
            document.write('<br>')
        }

    </script>
</body>

</html>

案例2 输出倒三角小星星

<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>

    <script>
        // 外层打印几行
        for (let i = 1; i <= 5; i++) {
            // 里层打印几个星星
            for (let j = 1; j <= i; j++) {
                document.write('★')
            }
            document.write('<br>')
        }
    </script>
</body>

</html>

案例3—9x9乘法表

<!DOCTYPE html>
<html lang="en">

<head>
  <style>
    div {
      display: inline-block;
      height: 25px;
      line-height: 25px;
      margin: 5px;
      padding: 4px 5px;
      border: 1px solid rgb(18, 183, 189);
      background-color: skyblue;
      border-radius: 5px;
      box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, .5);
    }
  </style>
</head>

<body>

  <script>
    for (let i = 1; i <= 9; i++) {
      for (let j = 1; j <= i; j++) {
        document.write(`
        <div>
          ${j} &times; ${i} = ${i*j}
        </div>
         `)
      }
      document.write('<br>')
    }
  </script>
</body>

</html>

数组

数组语法

声明语法

let 数组名=[数据1,数据2,数据3,…,数据n]

例

<script>
  let arr=['小明','小红',1,2,'小绿']
</script>

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

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

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

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

基本使用

数组名[下标],例

<script>
  let arr = [2, 6, 1, 7, 4]
  console.log(arr[3])//打印7
</script>

通过下标取数据

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

一些术语：

元素：数组中保存的每个数据都叫数组元素

下标：数组中数据的编号

长度：数组中数据的个数，通过数组的length属性获得(arr.length)

遍历数组

请添加图片描述

案例

<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>
    <script>
        // 数组求和案例
        let arr = [2, 6, 1, 7, 4]
        let sum = 0
        // 遍历数组 取出里面的每一个元素 然后累加
        for (let i = 0; i < arr.length; i++) {
            // 最容易迷惑的地方 i 和 arr[i]
            // i 输出的结果是 索引号  下标
            // console.log(i)
            // arr[i] 输出的结果是 数组元素（值）
            // console.log(arr[i])
            sum = sum + arr[i]
        }
        console.log(sum)
    </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
</head>

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

</html>

操作数组

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

请添加图片描述

增加数组内容案例

<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>
    <script>
        let arr = ['pink', 'hotpink', 'deeppink']
        // 访问 / 查询
        console.log(arr[0])//输出 ['pink']
        // 2. 改
        arr[0] = 'lightpink'
        console.log(arr)//输出 ['lightpink', 'hotpink', 'deeppink']
    </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
</head>

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

<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>
    <script>
        let arr = ['red', 'green']
        // arr.unshift('pink', 'blue')
        console.log(arr.unshift('pink', 'blue'))//输出新数组长度
        console.log(arr)//输出['red', 'green','pink', 'blue']
</body>

</html>

删除数组内容案例

返回的都是被删除的元素, arr**.**splice()用的最多,返回的是被删除的数组

<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>
    <script>
        // let arr = ['red', 'green', 'blue']
        // 删除最后一个元素
        // arr.pop()
        // 看我删了一个， 删的是 最后一个 blue
        // console.log(arr.pop())
        // 看我删了一个， 删的是 第一个 red
        // console.log(arr.shift())
        // shift是删除     unshift比shift 加了一个 un 表示加
        // console.log(arr)
        // 重点删除  arr.splice(从哪里开始删， 删几个)
        let arr = ['red', 'green', 'blue']
        //  我就想把green 删掉
        // 第一个1 是从索引号是1的位置开始删
        // 第二1 是删除几个
        // arr.splice(1, 1)
        // arr.splice(1)
        console.log(arr)
    </script>
</body>

</html>

综合案例

冒泡排序

<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>
  <script>
    //冒泡排序,使数组经过排序变为从大到小排列
    let arr = [32, 453, 56, 7, 2, 675, 3, 46, 23]
    //外循环:总共进行数组长度减1次循环
    for (let i = 0; i < arr.length - 1; i++) {
      //.每次外循环取出数组前arr.length-i-1个数字
      //内循环:每次外循环后arr[arr.length-i-1]下标的元素寻访的值就确定为(wei)当轮内循环循环后所得的最小的数据
      //比较方法:取出下标为0的数据,与下标为1的数据作比较,如果比下标为一的数据小,则与它交换位置.在用下标为1的数据与下标为2的数据作比较,如果小于下标为2的数据,则交换.依次交换到最后一个未确定位置的数据,可以确定arr[arr.length-i-1]存放的数据
      for (let j = 0; j < arr.length - i - 1; j++) {
        let temp
        if (arr[j] < arr[j + 1]) {
          temp = arr[j]
          arr[j] = arr[j + 1]
          arr[j + 1] = temp
        }
      }
    }
    document.write(arr)
  </script>
</body>

</html>

根据输入的四个季度的数据生成柱状图

<!DOCTYPE html>
<html lang="en">

<head>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .box {
      display: flex;
      width: 450px;
      height: 300px;
      margin: 100px auto;
      border-left: 2px solid pink;
      border-bottom: 3px solid pink;
      justify-content: space-around;
      align-items: flex-end;

    }

    .box>div {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      text-align: center;
      width: 50px;
      /* height: 120px; */
      background-color: skyblue;
    }

    .box>div>span {
      margin-top: -20px;
    }

    .box>div>h4 {
      margin-bottom: -30px;
      margin-left: -15px;
    }
  </style>
</head>

<body>
  <script>
    let arr = []
    for (let i = 0; i < 4; i++) {
      arr.push(+prompt(`请输入第${i+1}季度的数据`))
      console.log(arr);
    }
    document.write(`<div class=" box">`)
    for (let j = 0; j < 4; j++) {
      document.write(` 
      <div style="height:${arr[j]}px">
        <span>${arr[j]}</span>
        <h4>第${j+1}季度</h4>
      </div>  
   `)
    }
    document.write(`</div>`)
  </script>
</body>

</html>

码少女壮士

关注

6
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
JavaScript基础之for循环基础,数组的增删改查及冒泡排序解析

for循环,for循环嵌套,数组增删改查,冒泡排序,JavaScript基础,arr.push(),arr.unshift(),arr.pop(),arr.shift(),arr.splice()
复制链接

扫一扫