# 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 "循环")
> 点击上方图片来观看一个有关数组和循环的视频。
## 数组（ ）
对于任何编程语言来说，使用数据都是很常见的工作，将数组组织在一个结构性的格式（比如数组）中则可以让这个工作更简单。通过使用数组，数据会被存放在一个类似列表的结构中。数组的一个主要优点是你可以将不同类型的数据存入同一个数组中。
✅ 数组在我们的生活中随处可见！你能想到一个现实生活中的数组的例子吗，比如一个太阳能板阵列？
数组的语法需要一对方括号。
`let myArray = [];`
这是一个空数组，但数组其实可以在声明时就存入一些数据。数组中的多项数据用逗号分隔。
`let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];`
数组中的值会被指定一个唯一的值，称为 ** 索引（ ） `"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
```
✅ 亲手试一试！在你的浏览器控制台里亲手创建和操作一个你自己的数组。
## 循环（ ）
数组可以用来做重复性的或者**迭代性的**（ ） ，
### For 循环
`for` 循环需要三个部分来进行迭代：
- `计数器（ ） 一个通常用数字来初始化的变量，用于记录迭代的次数
- `条件式（ ） 一个使用了比较运算符的表达式，用于在其值为 `true` 时终止循环
- `迭代式（ ） 在每一次迭代的模为执行，一般用于更新计数器的值
```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 循环？
## 循环和数组
循环和数组经常结合使用，因为很多情况下都会利用数组长度来作为条件式，而索引可以作为计数器值。
```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 )
