JavaScript 第三天

JavaScript 基础第三天 — for 循环 和 array数组

1. for循环基本使用:

1. for循环也是重复执行代码

2. 好处: 把声明起始值、循环条件、变化值写到一起，一目了然

3. 如果明确循环次数的时候使用for循环

4. 不明确循环次数的时候使用while循环

   for (声明变量; 循环条件; 变化值) {
       // 循环体
   }

5. for 输出1到100偶数之间的和

   let num1 = 0
   for (let num2 = 1; num2 <= 100; num2++) {
       if (num2 % 2 === 0) {
           num1 += num2
       }
   }

6. for循环 最大优势是遍历数组

   let num1 = ['pink', 'blue', 'green']
   // num1.length和<=3的区别
   // for (let num2 = 0; num2 <= 3; num2++) {
   for (let num2 = 0; num2 < num1.length; num2++) {
       document.write(num1[num2])
   }

2. 循环退出:

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

2. break：直接结束本次循环

   for (let num1= 1; num1 <= 6; num1++) {
       if (num1 === 3) {
           // continue 退出本次循环, 继续下次循环
           // break 直接结束本次循环  
       }
       document.write(num1)
   }

3. for 循环嵌套:

一个循环里再套一个循环，一般用在for循环里
for (外部声明变量; 循环条件 变化值) {
    for (内部声明变量; 循环条件; 变化值) {
        // 循环体
    }
}

1. 使用 for 嵌套 用户输入后打印几行几列星星

let num1 = prompt('请输入多少列个星')
let num2 = prompt('请输入多少行个星')
for (let num3 = 1; num3 <= num1; num3++) {
    for (let num4 = 1; num4 <= num2; num4++) {
        document.write('❤')
    }
    document.write(`<br>`)
}

2. 打印倒三角形星星, 外循环控制行, 内循环控制列打印几个 内循环个数跟第几行是一一对应的

for (let num1 = 1; num1 <= 5; num1++) {
    for (let num2 = 1; num2 <= num1; num2++) {
        document.write('💚')
    }
    document.write(`<br>`)
}

3. 使用for 嵌套 打印九九乘法表

for (let num1 = 1; num1 <= 9; num1++) {
    for (let num2 = 1; num2 <= num1; num2++) {
        document.write(`${num2} x ${num1} = ${num1 * num2}`)
    }
    document.write(`<br>`)
}

---

4. 数组的基本使用:

1. 数组(Array)是一种可以按顺序保存数据的数据类型
2. 在数组中，数据的编号也叫索引或下标
3. 数组是按顺序保存，每个数据都有自己的编号
4. 数组可以存储任意类型的数据
5. 如果有多个数据可用数组保存
6. 计算机中的编号从0开始，第一个编号为0，第二个编号为1，以此类推

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

1. 通过下标取数据

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

let num = [1, 2, 3]
num[0] num[1] num[2]

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

2. 下标：数组中数据的编号

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

let num ['pink', 'blue', 'green']
console.log(num[0]) // pink
console.log(num.length) // 3

5. for 遍历数组:

1. 用循环把数组中每个元素都访问到,一般会用for循环遍历

for (let i = 0; i < 数组名.length; i++) {
    // 数组名[i]
}

1. 使用for循环 求数组的 和/平均值

1. 声明一个求和变量 num2
2. 遍历这个数组，把里面每个数组元素加到 num2 里面
3. 用求和变量 num2 除以数组的长度得到数组的平均值

let num1 = [2, 6, 1, 7, 4]
let num2 = 0
let num3 = 0
for (num4 = 0; num4 < num1.length; num4++) {
    document.write(num1[num4])
    num2 += num1[num4]
}
num3 = num2 / num1.length
document.write(`和是${num2},平均值是${num3}`)

2. 使用for循环 求数组最大值

1. 声明一个保存最大元素的变量 num2
2. 默认最大值可以取数组中的第一个元素
3. 遍历这个数组，把每个数组元素和 num2 相比较
4. 如果这个数组元素大于num2 就把这个数组元素存到 num2 里面，否则继续下一轮比较
5. 最后输出这个 num2

let num1 = [2, 6, 1, 77, 52, 25, 7]
let num2 = num1[0]
for (let num3 = 1; num3 < num1.length; num3++) {
    if (num2 < num1[num3]) {
        num2 = num1[num3]
    }
}
document.write(num2)

3. 使用for循环 求数组中大于等于5的和 45

let num1 = [4, 9, 5, 20, 3, 11]
let num2 = 0
for (let num3 = 0; num3 < num1.length; num3++) {
    if (num1[num3] >= 5) {
        num2 += num1[num3]
    }
}
document.write(num2)

4. 使用for循环 计算以下数组中能被3整除的偶数的和 24

let num1 = [2, 6, 18, 15, 40]
let num2 = 0
for (let num3 = 0; num3 < num1.length; num3++) {
    if (num1[num3] % 3 === 0 && num1[num3] % 2 === 0) {
        num2 += num1[num3]
    }
}

---

6. 操作数组:

1. 数组本质是数据集合, 操作数据无非是增、删、改、查
2. 查: 查询数组数据, 数组[下标], 称为访问数组数据
3. 改: 重新赋值, 数组[下标] = 新值
4. 增: 数组添加新数据, arr.push(新增内容)、arr.unshift(新增内容)
5. 删: 删除数组中数据, arr.pop()、arr.shift()、arr.splice(操作下标,删除个数)

1. 增：数组增加新的数据

1. 数组.push()：将一个或多个元素添加到数组的末尾，并返回该数组的新长度 (重点💖)

let num1 = [1, 2]
// push 添加新数组到末尾
num1.push(3)

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

let num1 = [1, 2]
// unshift 添加新数组到第一个
num1.unshift(3)
// 添加一个新数组并返回数组的长度
console.log(num1.push(4))

１. 数组筛选, 将数组中大于等于10的元素选出来, 放入新数组

1. 声明一个新数组用于存放新数据 num2
2. 遍历原来的旧数组, 找出大于等于10的元素
3. 依次追加给新数组num2

let num1 = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
let num2 = []
for (let num3 = 0; num3 < num1.length; num3++) {
    if (num1[num3] >= 10) {
        num2.push(num1[num3])
    }
}
document.write(num2)

2. 数组去0, 将数组中0去掉, 形成不包含0的新数组

1. 声明一个新数组用于存放新数据num2
2. 遍历原来的旧数组, 找出不等于0的元素
3. 依次追加给新数组num2

let num1 = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
let num2 = []
for (let num3 = 0; num3 < num1.length; num3++) {
    if (num1[num3] !== 0) {
        num2.push(num1[num3])
    }
}
document.write(num2)

2. 删: 数组删除元素

1. 数组. pop(): 从数组中删除最后一个元素, 并返回该元素的值
2. 数组. shift(): 从数组中删除第一个元素, 并返回该元素的值
3. 数组. splice(): 删除指定元素
4. start: 起始位置, 指定修改的开始位置 (从0计数)
5. deletecount: 删除数组的个数, 省略则默认从指定起始位置删除到最后

let num1 = [10, 20, 30]
// 删除数组中最后一个元素
num1.pop()
// 删除数组中第一个元素
num1.shift()
// 从第三个元素删除到第六个元素
// num1.splice(start起始位置, deletecount删除几个元素)
num1.splice(3, 6)
// 添加一个新数组并返回删除的元素
console.log(num1.pop())

3. 删除元素的使用场景:

1. 开发很常用, 比如随机抽奖、删除指定商品…
2. 随机抽奖, 中奖用户需要从数组里删除, 不允许重复抽奖
3. 点击删除按钮, 相关数据会从商品数据中删除 后期会用到删除操作, 特别是splice

---

7. 冒泡排序:

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

let num1 = [5, 4, 3, 2, 1]
// 1.一共需要的趟数, 5个数据我们要走4趟, 用外层for循环
// 所以: 数组的长度减去1 length - 1
for (let num2 = 0; num2 < num1.length - 1; num2++) {
    // 2.每一趟交换次数, 用内层循环 
    // 所以: 减去数组长度1 但我们从0开始, 就是 length - num2 - 1
    for (let num3 = 0; num3 < num1.length - num2 - 1; num3++) {
        // 3.if 做判断 0 大于 1 执行交换变量
        if (num1[num3] > num1[num3 + 1]) {
            // 4.交换变量
            let temp = num1[num3]
            num1[num3] = num1[num3 + 1]
            num1[num3 + 1] = temp
        }
    }
}
document.write(num1)

---

8. 根据输入数据生成柱形图

1. 需要输入4次，所以把4个数据放到一个数组里 num1[]
2. 利用循环，弹出4次输入框，同时存到数组里面 num1[]
3. 遍历改数组，根据数据生成4个柱形图，渲染打印到页面中
4. 柱形图就是div盒子, 设置宽度固定, 高度是用户输入的数据
5. div里面包含显示的数字和第N季度

// 用循环弹出四次输入框, 会得到4个数据，放到num1数组里
let num1 = []
for (let num2 = 1; num2 <= 4; num2++) {
    num1.push(prompt(`请输入第${num2}季度数据`))
}
console.log(num1)
// 注意渲染循环的是柱子
document.write(`<div class ="box">`)
// 循环4个柱子
    for (let num2 = 0; num2 < num1.length; num2++) {
        document.write(`
     <div style="height: ${num1[num2]}px;">
        <span>${num1[num2]}</span>
        <h4>第${num2 + 1}季度</h4>
     </div>
     `)
    }
document.write(`</div>`)

---

9. 本节单词:

1. for
2. array
3. arr
4. push
5. unshift
6. pop
7. shift
8. splice
9. continue
10. break
11. start
12. deletecount