如果大家感感兴趣也可以去看:
🎉博客主页:阿猫的故乡
🎉系列专栏:JavaScript专题栏
🎉欢迎关注:👍点赞🙌收藏✍️留言
学习目标:
掌握循环语句,让程序具备重复执行能力
掌握数组声明及访问的语法
学习内容:
循环-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);
}
希望这些代码能够帮助你巩固循环嵌套的概念!