|
|
# JavaScript 基础：数组和循环
|
|
|
|
|
|
|
|
|
> 涂鸦笔记作者：[Tomomi Imura](https://twitter.com/girlie_mac)
|
|
|
|
|
|
## 课前小测
|
|
|
[课前小测](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/13?loc=zh_cn)
|
|
|
|
|
|
这节课将会介绍 JavaScript 的基础知识，正是它为网页提供了可交互性。这节课中，你将学习数组和循环，它们会被用于操控数据。
|
|
|
|
|
|
[](https://youtube.com/watch?v=1U4qTyq02Xw "数组")
|
|
|
[](https://www.youtube.com/watch?v=Eeh7pxtTZ3k "循环")
|
|
|
|
|
|
> 点击上方图片来观看一个有关数组和循环的视频。
|
|
|
|
|
|
## 数组（Arrays）
|
|
|
|
|
|
对于任何编程语言来说，使用数据都是很常见的工作，将数组组织在一个结构性的格式（比如数组）中则可以让这个工作更简单。通过使用数组，数据会被存放在一个类似列表的结构中。数组的一个主要优点是你可以将不同类型的数据存入同一个数组中。
|
|
|
|
|
|
✅ 数组在我们的生活中随处可见！你能想到一个现实生活中的数组的例子吗，比如一个太阳能板阵列？
|
|
|
|
|
|
数组的语法需要一对方括号。
|
|
|
|
|
|
`let myArray = [];`
|
|
|
|
|
|
这是一个空数组，但数组其实可以在声明时就存入一些数据。数组中的多项数据用逗号分隔。
|
|
|
|
|
|
`let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];`
|
|
|
|
|
|
数组中的值会被指定一个唯一的值，称为 **索引（index）**，它是一个整数，表示对应值在数组中的位置与数组开头的距离。在上方的例子中，字符串值 `"Chocolate"` 的索引就是 0，而 `"Rocky Road"` 的索引是 4。可以用索引加上方括号来获取、改变或者插入数组值。
|
|
|
|
|
|
✅ 数组索引从 0 开始计起是否让你感觉奇怪？在有的编程语言中，索引会从 1 开始。关于这事有一段有趣的历史，你可以[在维基百科了解它](https://zh.wikipedia.org/zh-cn/%E5%BE%9E%E9%9B%B6%E9%96%8B%E5%A7%8B%E7%9A%84%E7%B7%A8%E8%99%9F)。
|
|
|
|
|
|
```javascript
|
|
|
let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
|
|
|
iceCreamFlavors[2]; // "Vanilla"
|
|
|
```
|
|
|
|
|
|
你可以通过索引来改变数组中的值，像这样：
|
|
|
|
|
|
```javascript
|
|
|
iceCreamFlavors[4] = "Butter Pecan"; // 把 "Rocky Road" 改成 "Butter Pecan"
|
|
|
```
|
|
|
|
|
|
你也可以用给定索引来插入新的值，像这样：
|
|
|
|
|
|
```javascript
|
|
|
iceCreamFlavors[5] = "Cookie Dough"; // 加了一项 "Cookie Dough"
|
|
|
```
|
|
|
|
|
|
✅ 向数组中添加新的值有更常用的方法：使用如 array.push() 这样的数组方法
|
|
|
|
|
|
为了获知数组中有多少元素，可以用 `length` 属性。
|
|
|
|
|
|
```javascript
|
|
|
let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
|
|
|
iceCreamFlavors.length; // 5
|
|
|
```
|
|
|
|
|
|
✅ 亲手试一试！在你的浏览器控制台里亲手创建和操作一个你自己的数组。
|
|
|
|
|
|
## 循环（Loops）
|
|
|
|
|
|
数组可以用来做重复性的或者 **迭代性的（iterative）** 的工作，会省下很多时间和代码量。每一次迭代中的变量、值或者条件可能会不同。JavaScript 中有几种不同类型的循环，它们有一些小差别，但本质上都是做同一件事：遍历数据。
|
|
|
|
|
|
### For 循环
|
|
|
|
|
|
`for` 循环需要三个部分来进行迭代：
|
|
|
- `计数器（counter）` 一个通常用数字来初始化的变量，用于记录迭代的次数
|
|
|
- `条件式（condition）` 一个使用了比较运算符的表达式，用于在其值为 `true` 时终止循环
|
|
|
- `迭代式（iteration-expression）` 在每一次迭代的模为执行，一般用于更新计数器的值
|
|
|
|
|
|
```javascript
|
|
|
// 从 0 数到 9
|
|
|
for (let i = 0; i < 10; i++) {
|
|
|
console.log(i);
|
|
|
}
|
|
|
```
|
|
|
|
|
|
✅ 在浏览器控制台中运行这段代码。试试调整计数器、条件式或迭代式时会发生什么。你能让它反过来运行，倒着计数吗？
|
|
|
|
|
|
### While 循环
|
|
|
|
|
|
和 `for` 循环不同，`while` 循环只需要一个条件式，用于在其值为 `true` 时终止循环。循环中的条件式往往需要依赖其他的值，比如计数器，计数器也必须得在循环内有所处理。计数器的起始值必须在循环外创建，任何为了达到终止条件的表达式（包括改变计数器的值）都需要在循环内维护。
|
|
|
|
|
|
```javascript
|
|
|
// 从 0 数到 9
|
|
|
let i = 0;
|
|
|
while (i < 10) {
|
|
|
console.log(i);
|
|
|
i++;
|
|
|
}
|
|
|
```
|
|
|
|
|
|
✅ 你在什么时候会选用 for 循环，什么时候会选用 while 循环？StackOverflow 上也有数万人有相同的问题，这里有一些[你可能感兴趣的观点](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript)。
|
|
|
|
|
|
## 循环和数组
|
|
|
|
|
|
循环和数组经常结合使用，因为很多情况下都会利用数组长度来作为条件式，而索引可以作为计数器值。
|
|
|
|
|
|
```javascript
|
|
|
let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
|
|
|
|
|
|
for (let i = 0; i < iceCreamFlavors.length; i++) {
|
|
|
console.log(iceCreamFlavors[i]);
|
|
|
} // 所有口味被打印后就会结束循环
|
|
|
```
|
|
|
|
|
|
✅ 在你的浏览器控制台里实验一下遍历一个你自己创建的数组。
|
|
|
|
|
|
---
|
|
|
|
|
|
## 🚀 挑战
|
|
|
|
|
|
除了 for 和 while 循环，还有一些用于遍历数组的办法。比如 [forEach](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)、[for-of](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for...of) 和 [map](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map)。用这些办法重写一下你的数组遍历代码。
|
|
|
|
|
|
## 课后小测
|
|
|
[Post-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/14?loc=zh_cn)
|
|
|
|
|
|
## 复习 & 自学
|
|
|
|
|
|
JavaScript 中的数组有许多绑定在上面的方法，对于操作数据来说非常有用。[读一下这些方法](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array)并且在你创建的数组上试用一下它们（比如 push、pop、slice 和 splice）。
|
|
|
|
|
|
## 作业
|
|
|
|
|
|
[循环和数组](assignment.zh-cn.md)
|
