如果大家感感兴趣也可以去看：
🎉博客主页：阿猫的故乡
🎉系列专栏：JavaScript专题栏
🎉ajax专栏：ajax知识点
🎉欢迎关注：👍点赞🙌收藏✍️留言
学习目标：
掌握循环语句，让程序具备重复执行能力
掌握数组声明及访问的语法
学习内容：
循环-for
数组
学习时间：
- 周一至周五晚上 7 点—晚上9点
- 周六上午 9 点-上午 11 点
- 周日下午 3 点-下午 6 点
学习产出：
循环-for
-
• for循环基本使用
目标：掌握for循环重复执行某些代码
1. for循环语法
l 作用：重复执行代码
l 好处：把声明起始值、循环条件、变化值写到一起，让人一目了然，它是最常使用的循环形式
1. 利用for循环输出1~100岁
2. 求1-100之间所有的偶数和
3. 页面中打印5个小星星
4. for循环的最大价值： 循环数组
目标：掌握for循环重复执行某些代码
2. 退出循环
l continue 退出本次循环，一般用于排除或者跳过某一个选项的时候, 可以使用continue
l break 退出整个for循环，一般用于结果已经得到, 后续的循环不需要的时候可以使用
了解：
1. while(true) 来构造“无限”循环，需要使用break退出循环。
2. for(;;) 也可以来构造“无限”循环，同样需要使用break退出循环。
for 循环嵌套
需求： 页面中打印出5行5列的星星
分析：
①：利用双重for循环来做
②：外层循环控制打印行，内层循环控制每行打印几个（列）
升级版本：
用户输入行数和列数，打印对应的星星！
目标：能说出数组是什么
l 数组：(Array)是一种可以按顺序保存数据的数据类型
l 为什么要数组？
Ø 思考：如果我想保存一个班里所有同学的姓名怎么办？
Ø 场景：如果有多个数据可以用数组保存起来，然后放到一个变量中，管理非常方便
数组的基本使用
目标：能够声明数组并且能够获取里面的数据
l 1. 声明语法
2.2 数组的基本使用
l 例
l 数组是按顺序保存，所以每个数据都有自己的编号
l 计算机中的编号从0开始，所以小明的编号为0，小刚编号为1，以此类推
l 在数组中，数据的编号也叫索引或下标
l 数组可以存储任意类型的数据
数组的基本使用
l 2. 取值语法
l 例
l 通过下标取数据
l 取出来是什么类型的，就根据这种类型特点来访问
. 一些术语：
Ø 元素：数组中保存的每个数据都叫数组元素
Ø 下标：数组中数据的编号
Ø 长度：数组中数据的个数，通过数组的length属性获得
. 遍历数组(重点)
目标：能够遍历输出数组里面的元素
l 用循环把数组中每个元素都访问到,一般会用for循环遍历
l 语法：
数组求和
需求：求数组 [2,6,1,7, 4] 里面所有元素的和以及平均值
分析：
①：声明一个求和变量 sum。
②：遍历这个数组，把里面每个数组元素加到 sum 里面。
③：用求和变量 sum 除以数组的长度就可以得到数组的平均值。
操作数组
在ES6中，有一些新特性可以简化对数组的操作，如下所示：
-
扩展运算符（Spread Operator）：使用三个点(...)来展开一个数组，可以将一个数组中的元素快速复制到另一个数组中。
const arr1 = [1, 2, 3]; const arr2 = [...arr1, 4, 5]; console.log(arr2); // 输出 [1, 2, 3, 4, 5] -
Array.from()：可以将类数组对象或可迭代对象转换为数组。
const nodeList = document.querySelectorAll('p'); const arr = Array.from(nodeList); console.log(arr); // 输出包含所有 <p> 元素的数组 -
Array.prototype.find()：根据给定的测试函数，返回数组中满足条件的第一个元素，若不存在则返回undefined。
const arr = [1, 2, 3, 4, 5]; const result = arr.find(element => element > 3); console.log(result); // 输出 4 -
Array.prototype.filter()：根据给定的测试函数，返回数组中满足条件的所有元素组成的新数组。
const arr = [1, 2, 3, 4, 5]; const result = arr.filter(element => element % 2 === 0); console.log(result); // 输出 [2, 4] -
Array.prototype.map()：根据给定的转换函数，将数组中的每个元素进行转换，并返回转换后的新数组。
const arr = [1, 2, 3]; const result = arr.map(element => element * 2); console.log(result); // 输出 [2, 4, 6] -
Array.prototype.reduce()：根据给定的累加器函数，将数组中的所有元素进行累计计算，并返回最终的计算结果。
const arr = [1, 2, 3, 4, 5]; const result = arr.reduce((accumulator, currentValue) => accumulator + currentValue); console.log(result); // 输出 15
以上是ES6中常用的数组操作方法，可以根据需要使用相应的方法来操作数组。
操作数组-新增
要在数组中新增元素，你可以使用 push() 方法。这个方法将一个或多个元素添加到数组的末尾，并返回新数组的长度。
例如，假设我们有一个名为 arr 的数组，我们想要在其末尾添加一个元素 element：
arr.push(element);
你也可以一次添加多个元素。例如：
arr.push(element1, element2, element3);
这将会在 arr 数组的末尾依次添加 element1、element2 和 element3。
另外，你也可以使用赋值操作符 = 来新增元素。例如：
arr[arr.length] = element;
这将在 arr 数组的末尾新增一个元素 element。
注意：以上两种方法都会修改原数组，而不是创建一个新的数组。如果你希望创建一个新数组并在其中新增元素，可以使用 concat() 方法或者数组解构操作符 ...。
操作数组-删除
要删除数组中的元素，可以使用数组的 splice() 方法。
splice() 方法接受两个参数：
- 第一个参数是要删除的元素的起始索引。
- 第二个参数是要删除的元素个数。
以下是一个示例，演示如何删除数组中的元素：
let numbers = [10, 20, 30, 40, 50];// 删除索引为2的元素（30）
numbers.splice(2, 1);console.log(numbers); // [10, 20, 40, 50]
在上述示例中，我们删除了索引为2的元素，即数组中的第3个元素（30）。
请注意，splice() 方法会修改原始数组，因此在使用之前最好先备份原始数组，以防止意外修改。
总结：
1. 想要数组末尾删除1个数据元素利用那个方法？带参数吗？
Ø arr.pop()
Ø 不带参数
Ø 返回值是删除的元素
2. 想要数组开头删除1个数据元素利用那个方法？带参数吗？
Ø arr.shift()
Ø 不带参数
Ø 返回值是删除的元素
3. 想要指定删除数组元素用那个？开发常用吗？有那些使用场景？
Ø arr.splice(起始位置, 删除的个数)
Ø 开发很常用，比如随机抽奖，比如删除指定商品等等
-
• 循环嵌套
循环嵌套是指在一个循环内部再嵌套了另一个循环。通过循环嵌套可以实现多层循环的效果，可以在每一次外部循环的迭代过程中，执行内部循环的所有迭代过程。
常见的循环嵌套包括两层、三层等。
例如，下面是一个两层循环嵌套的示例代码，在控制台输出一个九九乘法表：
for (var i = 1; i <= 9; i++) {for (var j = 1; j <= i; j++) {console.log(j + " * " + i + " = " + j*i);}
}
上述代码中，外层循环控制乘法表的行数，内层循环控制每一行的列数，通过循环嵌套可以逐行逐列输出乘法表的结果。
需要注意的是，在使用循环嵌套时，要注意控制内外层循环的迭代次数，以免造成死循环。此外，循环嵌套中的变量命名应尽量避免冲突，以免产生错误或混淆。
综合案例
当然可以！下面是五道关于循环嵌套的练习题：
- 打印出一个由数字组成的倒三角形，要求倒三角形的底边长为5。例如：
55555
4444
333
22
1
- 打印出一个九九乘法表的倒序，要求只打印出小于等于5的行和列。例如：
5 * 5 = 25
5 * 4 = 20
4 * 4 = 16
5 * 3 = 15
4 * 3 = 12
3 * 3 = 9
5 * 2 = 10
4 * 2 = 8
3 * 2 = 6
2 * 2 = 4
5 * 1 = 5
4 * 1 = 4
3 * 1 = 3
2 * 1 = 2
1 * 1 = 1
- 打印出一个正方形矩阵，要求矩阵的边长为4，每个元素为其对应的行索引和列索引的和。例如：
0 1 2 3
1 2 3 4
2 3 4 5
3 4 5 6
- 打印出一个由"*"组成的等腰三角形，要求三角形的高度为7。例如：
************************************
*************
- 打印出一个菱形，要求菱形的高度为9。例如：
****************
*************************
答案一下：
当然！以下是五道题目的代码答案：
- 打印出一个由数字组成的倒三角形，要求倒三角形的底边长为5。
for (let i = 5; i >= 1; i--) {let row = '';for (let j = 1; j <= i; j++) {row += i;}console.log(row);
}
- 打印出一个九九乘法表的倒序，要求只打印出小于等于5的行和列。
for (let i = 5; i >= 1; i--) {for (let j = 5; j >= 1; j--) {if (i <= 5 && j <= 5) {console.log(i + ' * ' + j + ' = ' + (i * j));}}
}
- 打印出一个正方形矩阵，要求矩阵的边长为4，每个元素为其对应的行索引和列索引的和。
for (let i = 0; i < 4; i++) {let row = '';for (let j = 0; j < 4; j++) {row += (i + j) + ' ';}console.log(row);
}
- 打印出一个由"*"组成的等腰三角形，要求三角形的高度为7。
for (let i = 1; i <= 7; i++) {let row = ' '.repeat(7 - i) + '*'.repeat((2 * i) - 1);console.log(row);
}
- 打印出一个菱形，要求菱形的高度为9。
for (let i = 1; i <= 5; i++) {let row = ' '.repeat(5 - i) + '*'.repeat((2 * i) - 1);console.log(row);
}
for (let i = 4; i >= 1; i--) {let row = ' '.repeat(5 - i) + '*'.repeat((2 * i) - 1);console.log(row);
}
希望这些代码能够帮助你巩固循环嵌套的概念！
