JavaScript基础（day03:for循环、数组）

 学习源码可以看我的个人前端学习笔记 (github.com):qdxzw/frontlearningNotes

觉得有帮助的同学，可以点心心支持一下哈

if多分支语句和switch的区别

循环-for

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

1.for循环-基本使用

案例（循环练习）

    for (let i = 0; i <= 100; i++) {
      document.write(`${i}岁\n`)
    }

    let sum = 0
    for (let i = 0; i <= 100; i++) {
      if (i % 2 == 0) {
        sum = sum + i
      }
    }
    alert("1~100之间所有的偶数和为" + sum)

    for (let i = 1; i <= 5; i++) {
      document.write("☆");
    }

    let arr = ["马超", "赵云", "张飞", "关羽", "黄忠"]
    for (let i = 0; i < arr.length; i++) {
      document.write(arr[i] + "\n")
    }

总结（for循环和while循环的区别）

2.for循环嵌套

案例（假如每天记住5个单词，3天后一共能记住多少单词）

    for (let i = 1; i <= 3; i++) {
      document.write(`第${i}天<br>`)
      for (let j = 1; j <= 5; j++) {
        document.write(`记住第${j}个单词<br>`)
      }
    }

案例（打印5行5列的星星）

    for (let i = 1; i <= 5; i++) {
      for (let j = 1; j <= 5; j++) {
        document.write("⭐")
      }
      document.write("<br>")
    }

案例（打印倒三角形星星）

    for (let i = 1; i <= 5; i++) {
      for (let j = 1; j <= i; j++) {
        document.write("⭐")
      }
      document.write("<br>")
    }

案例（九九乘法表）

    // 打印九九乘法表
    for (let i = 1; i <= 9; i++) {
      for (let j = 1; j <= i; j++) {
        document.write(`${j}*${i}=${j * i}\n`)
      }
      document.write("<br>")
    }

数组

1.数组是什么

Array是一种可以按顺序保存数据的数据类型

2.数组的基本使用

声明语法

字面量、构造函数

取值语法

一些术语

遍历数组（重点）

案例（数组求和）

    // 数组求和
    let array = [2, 6, 1, 7, 4]
    let sum = 0
    let average = 0
    for (let i = 0; i < array.length; i++) {
      sum = sum + array[i]
    }
    average = sum / array.length
    console.log("数组求和为：" + sum);
    console.log("数组的平均值为：" + average);

案例（数组求最大值和最小值）

  // 求数组[2,6,1,77,52,25,7]中的最大值和最小值
    let array = [2, 6, 1, 77, 52, 25, 7]
    let max = 2
    let min = 2
    // 外部循环获取整个数组的元素
    for (let i = 0; i < array.length; i++) {
      if (array[i] > max) {
        max = array[i]
      }
      if (array[i] < min) {
        min = array[i]
      }
    }
    console.log("最大值：" + max);
    console.log("最小值：" + min);

     // 求数组[2,6,1,77,52,25,7]中的最大值和最小值
    let array = [2, 6, 1, 77, 52, 25, 7]
    let temp = 0
    let max = 0
    let min = 0
    // 冒泡排序
    // 外部循环获取整个数组的元素
    for (let i = 0; i < array.length - 1; i++) {
      // 内部循环比较已经循环出来的元素的大小并对调位置
      for (let j = 0; j < array.length - i - 1; j++) {
        // 降序排列
        if (array[j] < array[j + 1]) {
          temp = array[j]
          array[j] = array[j + 1]
          array[j + 1] = temp
        }
      }
    }
    console.log(array);
    console.log("最大值：" + array[0]);
    console.log("最小值：" + array[array.length - 1]);

3.操作数组

新增

push

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

unshift

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

总结

案例（数组筛选）

    // 数组筛选
    let array = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
    let newArray = []
    for (let i = 0; i < array.length; i++) {
      if (array[i] >= 10) {
        newArray.push(array[i])
      }
    }
    console.log(newArray);

案例（数组去0）

    let array = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
    let newArray = []
    for (let i = 0; i < array.length; i++) {
      if (array[i] !== 0) {
        newArray.push(array[i])
      }
    }
    console.log(newArray);

删除

pop

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

shift

数组.shift() 方法从数组中删除第一个元素，并返回该元素的值

splice

数组.shift() 方法 删除指定元素

总结

综合案例（根据数据生成柱形图）

    * {
      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;
    }

 let box = document.getElementsByClassName("box")
    // 根据数据生成柱形图
    let array = []
    for (let i = 1; i <= 4; i++) {
      array.push(+prompt(`请输入第${i}季度的值`))
    }
    document.write(`<div class="box">`)
    for (let i = 0; i < array.length; i++) {
      document.write(`  
    <div style="height: ${array[i]}px;">
      <span>${array[i]}</span>
      <h4>第${i + 1}季度</h4>
    </div>`)
    }
    document.write(`<\div>`)

冒泡排序

    // 求数组[2,6,1,77,52,25,7]中的最大值和最小值
    let array = [2, 6, 1, 77, 52, 25, 7]
    let temp = 0
    let max = 0
    let min = 0
    // 冒泡排序
    // 外部循环获取整个数组的元素
    for (let i = 0; i < array.length - 1; i++) {
      // 内部循环比较已经循环出来的元素的大小并对调位置
      for (let j = 0; j < array.length - i - 1; j++) {
        // 降序排列
        if (array[j] < array[j + 1]) {
          temp = array[j]
          array[j] = array[j + 1]
          array[j + 1] = temp
        }
      }
    }
    console.log(array);
    console.log("最大值：" + array[0]);
    console.log("最小值：" + array[array.length - 1]);

数组排序

sort

数组.sort() 方法可以排序