JavaScript基础知识点总结：从零开始学习JavaScript（三）

 

 

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

🎉博客主页：阿猫的故乡

🎉系列专栏：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 数组的末尾依次添加 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);
  }
}

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

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

综合案例

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

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

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