IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> JavaScript 循环和数组 for循环嵌套 冒泡排序 -> 正文阅读

[JavaScript知识库]JavaScript 循环和数组 for循环嵌套 冒泡排序

for 循环

重复执行代码
好处:把声明起始值、循环条件、变化值写到一起,让人一目了然
语法

for循环流程图
for循环和while循环在使用上面不同的应用场景
已知循环的次数的时候推荐使用for循环
未知确循环的次数的时候推荐使用while循环

for 循环嵌套

语法

多层 for 循环嵌套的执行过程与单个 for 循环的执行过程是一模一样的。多层 for 循环的嵌套只不过是将单个 for 循环大括号中的“语句”换成了 for 循环而已。

代码示例

实现如下效果

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 外层循环:控制图形的行 i = 1表示 图像第一行
      // 内层循环:控制每一行 列的数量
      // 第一行 i = 1:只有1个星星 也就说明 里面的循环只需要循环 1次
      // 第二行 i = 2:只有2个星星 也就说明 里面的循环只需要循环 2次
      // 第三行 i = 3:只有2个星星 也就说明 里面的循环只需要循环 3次
      // .......
      for (let i = 1; i <= 5; i++) {
        for (let j = 1; j <= i; j++) {
          document.write('?')
        }
        document.write('<br>')
      }
    </script>
  </body>
</html>

?数组的基本使用

第一篇文章有介绍,写法,用法,在放一边

声明语法

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

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

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

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

使用方法

?遍历数组:

?用循环把数组中每个元素都访问到,一般会用for循环遍历,在数组求和,平均值,找最大,最小值等等会使用到

语法:

举例: 打印数组内数据

?数组求和,平均值代码

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      let arr = [2, 6, 1, 7, 4]
      // 1. 声明求和的变量 和 平均值的变量
      // 2. 遍历数组
      // 3. 求和与平均值
      let sum = 0
      let avg = 0
      for (let i = 0; i < arr.length; i++) {
        // sum += 数组的元素
        sum = sum + arr[i]
      }
      console.log(sum)
      avg = sum / arr.length
      console.log(avg)
    </script>
  </body>
</html>

?操作数组

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

?数组增加新的数据

语法:

数组名.push()

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

?

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

?

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

综合案例

冒泡排序

冒泡排序算法分析:
1. 比较相邻的元素,前一个比后一个大(或者前一个比后一个小)调换位置
2. 每一对相邻的元素进行重复的工作,从开始对一直到结尾对,这步完成后,结尾为最大或
最小的数 .
3. 针对除了最后一个元素重复进行上面的步骤
4. 重复 1-3 步骤直到完成排序
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      let arr = [10, 3, 7, 24, 6, 81, 5]
      // 依次的比较相邻的元素 如果前一个比后一个要大则交换他们的位置
      // 1. 遍历数组
      // 2. 比较 ?
      // 3. 交换位置  交换两个变量的值
      for (let i = 0; i < arr.length - 1; i++) {
        // 1. 里面的循环的
        // 第1趟的时候 我们需要比较 6次就能将 最大放到数组的最后面  i = 0 表示第一趟    j < 7 - 1 - 0
        // 第2趟的时候 我们需要比较 5次就能将 最大放到数组的最后面  i = 1               j < 7 -1 -1
        // 第3趟的时候 我们需要比较 4次就能将 最大放到数组的最后面  i =2                j < 7 - 1- 2
        // 第4趟的时候 我们需要比较 3次就能将 最大放到数组的最后面  
        for (let j = 0; j < arr.length - 1 - i; j++) {
          if (arr[j] > arr[j + 1]) {
            // 1. 声明一个临时变量
            let temp
            // 2. 将 arr[j]这个变量 的值赋值为 temp
            temp = arr[j]
            // 3. 将 arr[j + 1]的值赋值为 arr[j]
            arr[j] = arr[j + 1]
            // 4. 将 temp 的值 赋值为 arr[j+1]
            arr[j + 1] = temp
          }
        }
      }
      console.log(arr)
    </script>
  </body>
</html>

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-12-10 10:58:30  更:2021-12-10 11:01:00 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 9:12:35-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码