2022年9月4日：面向初学者的 web 开发--JavaScript 数组和循环（没有完全搞懂）

了解如何在 JavaScript 中操作和存储数据。

简介

JavaScript 是万维网的核心技术之一。 开发人员使用它在自己的网站上创建交互式内容。

由于 JavaScript 是一种客户端脚本语言，因此用户使用它可以在设备上执行代码。

了解 JavaScript 中数组的结构格式和用途，以及循环如何帮助你完成涉及数组内数据的重复性任务。

操作数组

JavaScript 有一种方法可以将多个项存储在一个数组中。 使用数组有助于避免声明多个变量，并且还有其他好处。

关于数组

数组是一种包含多个元素的数据结构类型。 

访问项

数组的内容通常称为元素或项。 通常需要访问一个特定的元素来读取它的值、更新它，甚至是删除它。

更改值

若要更改数组中的值，需要选择项的索引，并使用等号赋值运算符 (=) 和运算符右边的一个值为它赋一个新值。

添加更多值

push() 方法采用一个项作为输入，并将该项添加到原始数组。

使用数组长度

length

删除值

若要从数组中删除值，可以使用 delete。

删除项

有时，删除值是不够的。 必须删除整个存储桶。使用数组方法 splice()。

使用循环对数组中的项进行循环访问

关于循环

循环允许重复的，或者说迭代的任务，它们可以为你节省大量时间和代码。 迭代在其变量、值和条件方面可能会有所不同。 JavaScript 中有不同类型的循环，每个循环有微小的差异。 但它们基本上都是执行相同的操作：循环访问数据。

For循环

for 循环需要三个部分来迭代：

• 计数器：一个通常使用数值进行初始化的变量，用于计算迭代次数。 

• 条件：一个表达式，它使用比较运算符在 true 时触发循环停止。

• 增量表达式：在每个迭代结束时运行的表达式，通常用于更改计数器值。

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

While循环

与 for 循环不同，while 循环需要一个条件，只有在 while 循环中的表达式的计算结果为 true 时才停止循环。

循环中的条件通常依赖于其他值（如计数器），并且必须在循环过程中对它们进行管理。

必须在循环外创建计数器的起始值，并且必须在循环内维护满足条件的任何表达式，包括更改计数器。

数组通常与循环一起使用，因为大多数条件都需要数组的长度来停止循环，并且索引也可以是计数器值。

//Counting up to 10
let i = 0;
while (i < 10) {
 console.log(i);
 i++;
}

循环和数组

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Neapolitan", "Mint Chip"];
 
for (let i = 0; i < iceCreamFlavors.length; i++) {
  console.log(iceCreamFlavors[i]);
} // Ends when all flavors are printed

forEach()循环

数组本身有另一个名为 forEach() 的循环。 forEach() 循环将循环访问各项，并提供一种简化的循环方法，因为如果你要执行的操作只是循环，就不需要计数器。

let numbers = [1, 2, 3, 4, 5];
numbers.forEach(number => console.log(number)); // 1 2 3 4 5

何时使用相应的循环构造

for 和 forEach() 循环都允许循环访问数组项，但它们之间的区别在于 for 循环允许在满足特定条件时退出。

let numbers = [1, 2, -1, 4, 5];
for(let i = 0; i< numbers.length; i++>) {
  if (numbers[i] < 0) {
    break;
  }
  console.log(numbers[i]);
}

添加 break 会使循环在出现负项时停止。 forEach() 循环无法做到这一点。

除了 for 和 while 外，还可以通过其他方式循环访问数组。 包括forEach、for-of 和map 循环。 尝试使用任一方法来重写数组循环。

使用操作查询数组

筛选

使用find()查找项

find() 操作运行为每个项提供的输入函数。 如果操作找到搜索的元素，则会返回该元素。 如果它找不到该元素，则返回 undefined。

使用filter()筛选具有通用属性的项

filter() 操作使用筛选表达式（一个函数）并返回与表达式匹配的任何项。

使用some()检查条件

some() 方法使用一个函数检查是否至少有一个元素满足一个条件。

投影地图

投影是你尝试以某种方式更改数组。

聚合

reduce() 方法的思路是将长列表减少为单个项。

reduce(),需要为它提供一个函数，该函数采用两个参数：累计值和循环中的当前值。

在此函数中，应使用当前值重新计算累计值。 reduce() 的第二个参数是起始值。

建立业务

接待客户

分析业务