【JavaScript学习|黑马2023课程】js基础day03——for循环使用、数组入门

1.1 for 循环 - 基本使用

for 循环是一种常见的控制流结构，用于重复执行代码块。它由三个部分组成：初始化、条件和迭代表达式。

for (初始化; 条件; 迭代) {
  // 在每次迭代中执行的代码
}

• 初始化: 在循环开始前执行一次。
• 条件: 在每次迭代前评估。如果条件为 false，循环终止。
• 迭代: 在每次迭代结束时执行。

示例：

for (let i = 0; i < 5; i++) {
  console.log(i);
}

此循环将输出 0 到 4 的数字。

1.2 退出循环

在 for 循环中，有两个关键字可用于退出循环：continue 和 break。

1.2.1 使用 continue

continue 语句用于跳过当前迭代中剩余的代码，直接进行下一次迭代。通常用于在特定条件下排除或跳过某个选项。

示例：

for (let i = 0; i < 5; i++) {
  if (i === 2) {
    continue; // 当 i 为 2 时跳过当前迭代
  }
  console.log(i);
}

上述循环将打印数字 0、1、3、4，跳过了 i 为 2 的情况。

1.2.2 使用 break

break 语句用于提前终止整个 for 循环。当已经得到期望的结果，后续的循环不再需要时使用。

示例：

for (let i = 0; i < 5; i++) {
  if (i === 3) {
    break; // 当 i 为 3 时退出整个循环
  }
  console.log(i);
}

上述循环将打印数字 0、1、2，并在 i 为 3 时退出循环。

通过 continue 和 break，我们可以更灵活地控制循环的执行流程。

1.2.3 无限循环

有时候，我们需要创建无限循环，即循环在满足某条件之前一直执行。以下是两种常见的方式：

①使用 while(true)

使用 while(true) 可以构造一个“无限”循环，需要使用 break 语句来退出循环。

示例：

while (true) {
  // 循环体
  // ...
  
  if (someCondition) {
    break; // 根据某个条件退出循环
  }
}

这种方式会一直循环，直到满足某个条件，然后使用 break 退出。

②使用 for(;;)

使用 for(;;) 也可以构造一个“无限”循环，同样需要使用 break 语句来退出循环。

示例：

for (;;) {
  // 循环体
  // ...
  
  if (someCondition) {
    break; // 根据某个条件退出循环
  }
}

这种形式与 while(true) 实现的效果相同，是一种紧凑的写法。

1.3 循环嵌套

循环嵌套是指在一个循环体内部包含另一个循环。这种结构可以用于处理复杂的问题，但需要小心，以防止出现死循环。

示例：

for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 2; j++) {
    console.log(`i: ${i}, j: ${j}`);
  }
}

上述代码展示了一个简单的循环嵌套，外部循环执行3次，内部循环执行2次，总共输出6次。

循环嵌套的深度可以根据问题的复杂性进行调整，但需要注意控制嵌套层次，以避免过于复杂的代码结构。

2.1 数组是什么

数组是一种用于存储多个值的数据结构。这些值可以是任意数据类型，包括数字、字符串、对象等。数组中的每个值被称为数组元素，而每个元素都有一个与之相关的索引或下标。

2.2 数组的基本使用

在JavaScript中，可以使用两种方式创建数组：

①使用数组字面量：

let a = [数据1, 数据2, ..., 数据n];

例如：

let numbers = [1, 2, 3, 4, 5];

②使用 new Array() 构造函数：

let a = new Array(数据1, 数据2, ..., 数据n);

例如：

let fruits = new Array("Apple", "Banana", "Orange");

通过下标取值

数组中的元素可以通过下标（索引）访问。数组的索引从0开始，因此第一个元素的索引是0，第二个元素的索引是1，以此类推。

let firstElement = a[0]; // 获取数组中的第一个元素
let secondElement = a[1]; // 获取数组中的第二个元素

元素、下标和长度

• 元素: 数组中保存的每个数据都叫数组元素。
• 下标: 数组中数据的编号，通过下标可以访问数组中的元素。
• 长度: 数组中数据的个数，可以通过数组的 length 属性获得。

let fruits = ["Apple", "Banana", "Orange"];
let firstFruit = fruits[0]; // "Apple"
let arrayLength = fruits.length; // 3

遍历数组

可以使用 for 循环来遍历数组中的元素：

for (let i = 0; i < array.length; i++) {
  // 对数组中的每个元素执行操作
  console.log(array[i]);
}

示例：打印5*5星星

// 打印5*5星星
for (let i = 0; i < 5; i++) {
  for (let j = 0; j < 5; j++) {
    document.write("*");
  }
  document.write("</br>");
}

上述代码使用嵌套的 for 循环，外部循环控制行数，内部循环控制每行的星星数量，实现了打印5*5的星星图案。

2.3 操作数组

数组是一种数据集合，常见的数组操作包括增加（添加新元素）、删除（移除元素）、修改（修改元素值）、查找（访问元素）等。以下是一些基本的数组操作：

2.3.1 查找元素

数组中的元素可以通过索引（下标）进行访问。

let array = [1, 2, 3, 4, 5];
let element = array[2]; // 访问索引为2的元素，值为3

2.3.2 增加元素

①使用 push 方法向数组末尾添加元素：

let array = [1, 2, 3];
array.push(4); // [1, 2, 3, 4]

②使用 unshift 方法向数组开头添加元素：

let array = [2, 3, 4];
array.unshift(1); // [1, 2, 3, 4]

2.3.3 删除元素

①使用 pop 方法删除数组末尾的元素：

let array = [1, 2, 3, 4];
array.pop(); // [1, 2, 3]

②使用 shift 方法删除数组开头的元素：

let array = [1, 2, 3, 4];
array.shift(); // [2, 3, 4]

③使用 splice 方法删除指定元素

JavaScript 中的 splice 方法可以用于在数组中删除指定位置的元素，可以根据具体需求调整开始下标和删除个数来删除数组中的指定元素。该方法的语法如下：

arr.splice(开始下标, 删除个数);

• 开始下标: 要删除元素的起始位置。
• 删除个数: 要删除的元素数量。

示例：

let array = [1, 2, 3, 4, 5];
array.splice(2, 1); // 从索引2开始删除1个元素
console.log(array); // [1, 2, 4, 5]

上述代码中，splice 方法从索引2开始删除1个元素，结果数组变为 [1, 2, 4, 5]。

2.3.4 修改元素值

通过数组的索引可以修改数组中特定位置的元素值。

let array = [1, 2, 3, 4];
array[2] = 99; // [1, 2, 99, 4]

示例：筛选大于等于 10 的元素

let arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
let newarr = [];

for (let i = 0; i < arr.length; i++) {
  if (arr[i] >= 10) {
    newarr.push(arr[i]);
  }
}

document.write(newarr);

上述代码遍历数组 arr，将大于等于 10 的元素筛选出来，放入新数组 newarr 中。最后，使用 document.write 打印新数组的内容。

这是一个简单的数组操作例子，展示了如何使用循环遍历数组，根据条件筛选元素，并将结果存储在新数组中。

3. 数组排序

在 JavaScript 中，可以使用数组的 sort 方法对数组进行排序。sort 方法默认按照字符串 Unicode 顺序进行排序，但也可以通过传递一个比较函数来实现自定义排序。

示例：

let arr = [4, 2, 5, 1, 3];

// 1. 升序排列写法
arr.sort(function (a, b) {
  return a - b;
});

console.log(arr); // [1, 2, 3, 4, 5]

// 2. 降序排列写法
arr.sort(function (a, b) {
  return b - a;
});

console.log(arr); // [5, 4, 3, 2, 1]

在上述示例中，我们首先使用 sort 方法按升序排列数组，然后再按降序排列。通过传递比较函数，我们可以灵活地定义排序规则。

排序原理

• 如果 compareFunction(a, b) 返回小于 0的值，则 a 会被排列到 b 之前。
• 如果 compareFunction(a, b) 返回大于 0的值，则 b 会被排列到 a 之前。
• 如果 compareFunction(a, b) 返回 0，则 a 和 b 的相对位置不变。

注意事项

• 默认情况下，sort 方法会将数组元素转换为字符串进行比较，因此可能导致不符合预期的排序结果。为了避免这个问题，需要提供比较函数。
• 比较函数应该是稳定的，即对于相等的元素，它们在排序后的相对位置保持不变。