6.5 KiB

Raw Permalink Blame History Unescape Escape

JavaScript 基础：数组和循环

由 Tomomi Imura 绘制的手绘笔记

课前测验

本课程介绍了 JavaScript 的基础知识，这是一种为网页提供交互功能的语言。在本课程中，您将学习数组和循环，它们用于操作数据。

🎥 点击上方图片观看关于数组和循环的视频。

您可以在 Microsoft Learn 上学习本课程！

数组

处理数据是任何编程语言中的常见任务，当数据以结构化的格式（如数组）组织时，这项任务会变得更加简单。通过数组，数据以类似列表的结构存储。数组的一个主要优点是可以在一个数组中存储不同类型的数据。

✅ 数组无处不在！您能想到一个现实生活中的数组例子吗，比如太阳能电池板阵列？

数组的语法是一对方括号。

let myArray = [];

这是一个空数组，但数组也可以在声明时就已填充数据。数组中的多个值用逗号分隔。

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];

数组中的值被分配了一个称为索引的唯一值，这是一个基于其与数组开头的距离分配的整数。在上面的例子中，字符串值 "Chocolate" 的索引是 0，而 "Rocky Road" 的索引是 4。使用方括号和索引可以检索、更改或插入数组值。

✅ 您是否感到惊讶，数组的索引是从 0 开始的？在某些编程语言中，索引是从 1 开始的。关于这一点有一个有趣的历史，您可以在维基百科上阅读相关内容。

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
iceCreamFlavors[2]; //"Vanilla"

您可以利用索引来更改值，如下所示：

iceCreamFlavors[4] = "Butter Pecan"; //Changed "Rocky Road" to "Butter Pecan"

您还可以在给定索引处插入新值，如下所示：

iceCreamFlavors[5] = "Cookie Dough"; //Added "Cookie Dough"

✅ 更常见的向数组添加值的方法是使用数组操作符，例如 array.push()

要了解数组中有多少项，可以使用 length 属性。

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
iceCreamFlavors.length; //5

✅ 试试自己动手！使用浏览器的控制台创建并操作一个您自己设计的数组。

循环

循环允许我们执行重复或迭代的任务，可以节省大量时间和代码。每次迭代的变量、值和条件都可能不同。JavaScript 中有不同类型的循环，它们之间有一些细微的差别，但本质上都做同样的事情：遍历数据。

For 循环

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

counter 一个变量，通常初始化为一个数字，用于计数迭代次数
condition 一个使用比较运算符的表达式，当为 false 时循环停止
iteration-expression 在每次迭代结束时运行，通常用于更改计数器的值

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

✅ 在浏览器控制台中运行此代码。当您对计数器、条件或迭代表达式进行小的更改时会发生什么？您能让它倒着运行，创建一个倒计时吗？

While 循环

与 for 循环的语法不同，while 循环只需要一个条件，当条件变为 false 时循环停止。循环中的条件通常依赖于其他值（如计数器），并且必须在循环中进行管理。计数器的初始值必须在循环外创建，满足条件的任何表达式（包括更改计数器）必须在循环内维护。

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

✅ 为什么您会选择使用 for 循环而不是 while 循环？17K 名用户在 StackOverflow 上有同样的问题，其中一些观点可能会引起您的兴趣。

循环与数组

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

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];

for (let i = 0; i < iceCreamFlavors.length; i++) {
  console.log(iceCreamFlavors[i]);
} //Ends when all flavors are printed

✅ 在浏览器的控制台中尝试对您自己创建的数组进行循环。

🚀 挑战

除了 for 和 while 循环，还有其他方法可以遍历数组。例如 forEach、for-of 和 map。尝试使用这些技术之一重写您的数组循环。

课后测验

复习与自学

JavaScript 中的数组有许多附加的方法，这些方法在数据操作中非常有用。阅读这些方法并尝试在您创建的数组上使用一些方法（例如 push、pop、slice 和 splice）。

作业

循环一个数组

免责声明：
本文档使用AI翻译服务 Co-op Translator 进行翻译。尽管我们努力确保翻译的准确性，但请注意，自动翻译可能包含错误或不准确之处。应以原文档的原始语言版本为权威来源。对于关键信息，建议使用专业人工翻译。我们对因使用本翻译而引起的任何误解或误读不承担责任。

6.5 KiB Raw Permalink Blame History Unescape Escape