3、JS基础-DAY3

一、循环-for

1.1 for 循环-基本使用

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

1. for循环语法
   作用：重复执行代码
   好处：把声明起始值、循环条件、变化值写到一起，让人一目了然，它是最常使用的循环形式
   
   例子：求1-100之间所有的偶数和
   for循环的最大价值： 循环数组
   需求： 请将 数组 [‘马超’，‘赵云’， ‘张飞’, ‘关羽‘，’黄忠’] 依次打印出来

2. 退出循环
   continue 退出本次循环，一般用于排除或者跳过某一个选项的时候, 可以使用continue
   break 退出整个for循环，一般用于结果已经得到, 后续的循环不需要的时候可以使用
3. 了解：
   while(true) 来构造“无限”循环，需要使用break退出循环。
   for(; 也可以来构造“无限”循环，同样需要使用break退出循环。
4. for循环和while循环有什么区别呢：
   当如果明确了循环的次数的时候推荐使用for循环
   当不明确循环的次数的时候推荐使用while循环

1.2 for 循环嵌套

一个循环里再套一个循环，一般用在for循环里
例子：
计算： 假如每天记住5个单词，3天后一共能记住多少单词？
拆解：
第一天 ： 5个单词
第二天： 5个单词
第三天： 5个单词

打印5行5列的星星
需求： 页面中打印出5行5列的星星
分析：
①：利用双重for循环来做
②：外层循环控制打印行，内层循环控制每行打印几个（列）

升级版本：
用户输入行数和列数，打印对应的星星！

九九乘法表
需求：如图所示
分析：
①：只需要把刚才倒三角形星星做改动
②： ★ 换成 1 x 1 = 2 格式

运行结果：

二、数组

2.1 数组是什么

目标：能说出数组是什么

1. 数组：(Array)是一种可以按顺序保存数据的数据类型
2. 为什么要数组？
   思考：如果我想保存一个班里所有同学的姓名怎么办？
   场景：如果有多个数据可以用数组保存起来，然后放到一个变量中，管理非常方便

2.2 数组的基本使用

3. 一些术语：
   元素：数组中保存的每个数据都叫数组元素
   下标：数组中数据的编号
   长度：数组中数据的个数，通过数组的length属性获得
   
4. 遍历数组(重点)
   目标：能够遍历输出数组里面的元素
   用循环把数组中每个元素都访问到,一般会用for循环遍历
   语法：

2.3 数组求和、平均值、最大值、最小值

需求：求数组 [2,6,1,7, 4] 里面所有元素的和以及平均值
分析：
①：声明一个求和变量 sum。
②：遍历这个数组，把里面每个数组元素加到 sum 里面。
③：用求和变量 sum 除以数组的长度就可以得到数组的平均值。

数组求最大值和最小值
需求：求数组 [2,6,1,77,52,25,7] 中的最大值
分析：
①：声明一个保存最大元素的变量 max。
②：默认最大值可以取数组中的第一个元素。
③：遍历这个数组，把里面每个数组元素和 max 相比较。
④：如果这个数组元素大于max 就把这个数组元素存到 max 里面，否则继续下一轮比较。
⑤：最后输出这个 max
拓展：
自己求一下最小值

2.4 操作数组

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

2.4.1 修改：

2.4.2 操作数组-新增

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

2. arr.unshift(新增的内容) 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度
   
3. 数组筛选
   需求：将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大于等于 10 的元素选出来，放入新数组
   分析：
   ①：声明一个新的数组用于存放新数据newArr
   ②：遍历原来的旧数组， 找出大于等于 10 的元素
   ③：依次追加给新数组 newArr

4. 数组去0案例
   需求：将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中的 0 去掉后，形成一个不包含 0 的新数组
   分析：
   ①：声明一个新的数组用于存放新数据newArr
   ②：遍历原来的旧数组， 找出不等于0的元素
   ③：依次追加给新数组 newArr

2.4.3 操作数组-删除

1. 数组. pop() 方法从数组中删除最后一个元素，并返回该元素的值
   
2. 数组. shift() 方法从数组中删除第一个元素，并返回该元素的值
   
3. 数组. splice() 方法 删除指定元素
   

开发很常用，比如随机抽奖，比如删除指定商品等等

2.5 案例：根据数据生成柱形图

需求： 用户输入四个季度的数据，可以生成柱形图
分析：
①：需要输入4次，所以可以把4个数据放到一个数组里面
利用循环，弹出4次框，同时存到数组里面
②：遍历改数组，根据数据生成4个柱形图，渲染打印到页面中
柱形图就是div盒子，设置宽度固定，高度是用户输入的数据
div里面包含显示的数字和 第n季度

2.6 冒泡排序

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

2.7 数组排序

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

综合案例

需求：
根据用户输入的个数，页面可以渲染对应王者荣耀永雄的个数
思路分析：

1. 渲染图片比较多，我们可以把图片地址放入数组中，
2. 图片名称是有序号排列的，比如1.webp 2.webp 此处可以使用循环方式重复渲染图片
3. 渲染位置？ 可以考虑放到 box盒子里写script 即可

运行结果：