JavaScript03 - JavaScript - 前端 - 计算机科学

# JavaScript 基础第三天

# 今日目标

掌握循环语句，让程序具备重复执行能力
掌握数组声明及访问的语法

# 一、循环 - for

# 1、for 循环基本使用

目标：掌握 for 循环重复执行某些代码

需求：罚跑圈 5 圈

# 跑圈核心

起始值
判断条件
值加 1
跑步

# 1.1 for 循环语法

** 作用：** 重复执行代码

** 好处：** 把声明起始值、循环条件、变化值写到一起，让人一目了然，它是最常使用的循环形式

示例代码：

1
2
3

for (变量起始值; 终止条件; 变量值) {
 // 循环体代码   
}

# 1.2 for 循环执行过程

初始化变量，初始化操作在整个 for 循环只会执行一次。
执行条件表达式，如果为 true，则执行循环体语句，否则退出循环，循环结束。
直至条件表达式为假，结束整个 for 循环。

# + 循环练习

1、利用 for 循环输出 1~100 岁

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

3、页面中打印 5 个小星星

4、for 循环的最大价值：循环数组

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

# 1.3 退出循环

continue 退出本次循环，一般用于排除或者跳过某一个选项的时候，可以使用 continue
break 退出整个 for 循环，一般用于结果已经得到，后续的循环不需要的时候可以使用

了解：

while (true) 来构造 “无限” 循环，需要使用 break 退出循环。
for(;😉 也可以来构造 “无限” 循环，同样需要使用 break 退出循环。

# 2、循环嵌套

# 2.1 for 循环嵌套

循环嵌套 是指在 一个循环语句中再定义一个循环语句的语法结构 ，例如在 **for 循环语句中，可以再嵌套一个 for 循环 **，这样的 for 循环语句我们也称之为 双重 for 循环 。

语法：

for (外循环的初始; 外循环的条件; 外循环的操作表达式) {
    for (内循环的初始; 内循环的条件; 内循环的操作表达式) {  
       // 需执行的代码;
   }
}

注意：
 内层循环 可以看做 外层循环的语句 。
外层循环执行 一次 ，内层循环要执行 全部次数 。
内层循环执行的顺序也要 遵循 for 循环的执行顺序 。

# 案例

打印五行五列小星星
打印直角三角形
99 乘法表

# 二、数组

知道什么是数组及其应用的场景，掌握数组声明及访问的语法。

# 3 、创建数组

JS 中创建数组有两种方式：1. 利用 new 创建数组 2. 利用数组字面量创建数组

1. 利用 new 创建数组 (了解)

1 2	let 数组名 = new Array() let arr = new Array() // 创建一个新的空数组

注意 Array () ，A 要大写

2. 利用数组字面量创建数组 (重点)
1
2
3
4
//1. 使用数组字面量方式创建空的数组
let 数组名 = []；
//2. 使用数组字面量方式创建带初始值的数组
let 数组名 = ['小白','小黑','大黄','瑞奇'];
- 数组的字面量是 方括号 [ ] 
- 声明数组并赋值称为数组的 初始化 
- 这种 字面量方式 也是我们以后最多使用的方式
数组元素的类型
数组中可以存放 任意类型 的数据，例如字符串，数字，布尔值等。
1
let arrStus = ['小白',12,true,28.9];

# 3.1 获取数组中的元素

索引 (下标) ： 用来访问数组元素的序号（数组下标从 0 开始）。

索引的作用：

数组可以通过 索引 来访问、设置、修改对应的数组元素，可以通过 数组名 [索引] 的形式来获取数组中的元素。

// 定义数组
let arrStus = [1,2,3];
// 获取数组中的第2个元素
alert(arrStus[1]);

注意：如果访问时 数组没有和索引值对应的元素 ，则得到的值是 undefined

# 3.2 数组的长度

数组的长度：默认情况下表示数组中元素的个数

使用 ** 数组名.length** 可以访问数组元素的数量（数组长度）。

1 2	let arr = ['关羽', '张飞', '马超', '赵云', '黄忠', '刘备', '姜维']; alert(arr.length); // 7

注意：

此处 数组的长度是数组元素的个数 ，不要和数组的索引号混淆。
当我们数组里面的 元素个数发生了变化 ，这个 length 属性 跟着一起变化

# 3.3 操作数组

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

push 动态向数组的尾部添加一个单元
unshit 动态向数组头部添加一个单元
pop 删除最后一个单元
shift 删除第一个单元
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>

# 3.4 冒泡排序（了解）

冒泡排序：是一种算法，把一系列的数据 按照一定的顺序进行排列显示 (从小到大或从大到小）。

原理：

两两比较
大的数放右边（考虑升序）

冒泡排序

// 冒泡排序
let arr = [2, 4, 3, 5, 1]
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]) {
            // 交换2个变量
            let temp = arr[j]
            arr[j] = arr[j + 1]
            arr[j + 1] = temp
        }
    }
}
// arr.sort()  // 排序
// sort 升序排列
// arr.sort(function (a, b) {
//   return a - b
// })
// sort() 降序
arr.sort(function (a, b) {
    return b - a
})
console.log(arr)