JavaScript基础知识点总结:从零开始学习JavaScript(三)

2023-12-28 09:18:27

?

?

如果大家感感兴趣也可以去看:

🎉博客主页:阿猫的故乡

🎉系列专栏: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中,有一些新特性可以简化对数组的操作,如下所示:

  1. 扩展运算符(Spread Operator):使用三个点(...)来展开一个数组,可以将一个数组中的元素快速复制到另一个数组中。

    const arr1 = [1, 2, 3];
    const arr2 = [...arr1, 4, 5];
    console.log(arr2); // 输出 [1, 2, 3, 4, 5]
    

  2. Array.from():可以将类数组对象或可迭代对象转换为数组。

    const nodeList = document.querySelectorAll('p');
    const arr = Array.from(nodeList);
    console.log(arr); // 输出包含所有 <p> 元素的数组
    

  3. Array.prototype.find():根据给定的测试函数,返回数组中满足条件的第一个元素,若不存在则返回undefined。

    const arr = [1, 2, 3, 4, 5];
    const result = arr.find(element => element > 3);
    console.log(result); // 输出 4
    

  4. Array.prototype.filter():根据给定的测试函数,返回数组中满足条件的所有元素组成的新数组。

    const arr = [1, 2, 3, 4, 5];
    const result = arr.filter(element => element % 2 === 0);
    console.log(result); // 输出 [2, 4]
    

  5. Array.prototype.map():根据给定的转换函数,将数组中的每个元素进行转换,并返回转换后的新数组。

    const arr = [1, 2, 3];
    const result = arr.map(element => element * 2);
    console.log(result); // 输出 [2, 4, 6]
    

  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 数组的末尾依次添加 element1element2element3

另外,你也可以使用赋值操作符 = 来新增元素。例如:

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);
  }
}

上述代码中,外层循环控制乘法表的行数,内层循环控制每一行的列数,通过循环嵌套可以逐行逐列输出乘法表的结果。

需要注意的是,在使用循环嵌套时,要注意控制内外层循环的迭代次数,以免造成死循环。此外,循环嵌套中的变量命名应尽量避免冲突,以免产生错误或混淆。

综合案例

当然可以!下面是五道关于循环嵌套的练习题:

  1. 打印出一个由数字组成的倒三角形,要求倒三角形的底边长为5。例如:
55555
4444
333
22
1

  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

  1. 打印出一个正方形矩阵,要求矩阵的边长为4,每个元素为其对应的行索引和列索引的和。例如:
0 1 2 3
1 2 3 4
2 3 4 5
3 4 5 6

  1. 打印出一个由"*"组成的等腰三角形,要求三角形的高度为7。例如:
      *
     ***
    *****
   *******
  *********
 ***********
*************

  1. 打印出一个菱形,要求菱形的高度为9。例如:
    *
   ***
  *****
 *******
*********
 *******
  *****
   ***
    *

?

答案一下:

?

当然!以下是五道题目的代码答案:

  1. 打印出一个由数字组成的倒三角形,要求倒三角形的底边长为5。
for (let i = 5; i >= 1; i--) {
  let row = '';
  for (let j = 1; j <= i; j++) {
    row += i;
  }
  console.log(row);
}

  1. 打印出一个九九乘法表的倒序,要求只打印出小于等于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));
    }
  }
}

  1. 打印出一个正方形矩阵,要求矩阵的边长为4,每个元素为其对应的行索引和列索引的和。
for (let i = 0; i < 4; i++) {
  let row = '';
  for (let j = 0; j < 4; j++) {
    row += (i + j) + ' ';
  }
  console.log(row);
}

  1. 打印出一个由"*"组成的等腰三角形,要求三角形的高度为7。
for (let i = 1; i <= 7; i++) {
  let row = ' '.repeat(7 - i) + '*'.repeat((2 * i) - 1);
  console.log(row);
}

  1. 打印出一个菱形,要求菱形的高度为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);
}

希望这些代码能够帮助你巩固循环嵌套的概念!

文章来源:https://blog.csdn.net/weixin_70007095/article/details/135249768
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。