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