JavaScript控制语句之循环

引入

上期我们介绍了三种程序控制语句之一：分支语句。分支和顺序结构的代码在逻辑上以及可以写出几乎所有程序了——

但显然，这与人来做事比较起来没有多大的提升。计算机最喜欢也最擅长的事其实就是：简单而重复的事。

今天我们就来了解一下如何用循环控制语句来让计算机去做人类难以完成的事——

1. for循环（迭代循环）

这是一种通过设置初始条件、结束条件和递增条件来执行语句块的循环。

而又有人喜欢把for循环称为迭代循环

如何理解这个呢？其实就是在for循环中我们会设置一个变量（一般是i），这个变量去按递增条件走过初始条件和结束条件。其中i的值在被不断更替，新的代替旧的，这种不断更新的过程就是i在不断迭代的过程。

举个例子：

var x = 0;
var i;
for (i=1; i<=10000; i++) {
    x = x + i;
}
x; // 输出的值应该是50005000
复制代码

让我们来分析一下for循环的控制条件：

第一句 i=1 是初始条件，将变量i设置为1；

第二句 i<=10000 这是判断条件（反向理解就是结束条件），当i满足这个条件的时候就继续循环，不满足时就退出循环；

i++ 这是每次循环后的递增条件，表示i在每次循环之后会+1

这个时候i的迭代就是在1开始不断地加一。1的时候运行一遍代码，然后加1，变成2再运行一次……

但如果i的迭代只能用来计数，不断加一的话，那其实这个迭代完全没有意义。真正的意义在于用迭代循环来遍历一个可迭代对象

比如数组——

var arr = ['juejin', 'cnds', 'aliyun'];
var i, x;
for (i=0; i<arr.length; i++) {
    x = arr[i];
    console.log(x);
}
复制代码

这个时候我们本质上虽然还是用从0开始的i不断加1来给循环计数，但此时我们可以用这个不断加1的i来进行数组的索引，取出每个位置上的元素来赋值给x，来遍历一个数组

这里和python的遍历不一样，python非常简洁，当你用i遍历一个可迭代对象的时候，i本身就是作为遍历的值（等同于这里的x）。所以其实上面里面迭代数组的变量其实是x。

那么js能不能像python那么简洁呢？如果我就想要迭代一个对象里的元素呢？

for循环的变体就是for...in，这个和python非常像

var o = {
    name: '掘金酱',
    age: 18,
    company: 'bytedance'
};
for (var key in o) {
    console.log(key); // 'name', 'age', 'company'
}

此时for in直接循环出的是对象的键。要输出值也很简单了，用a.i或者a[i]都可以

var a = ['A', 'B', 'C'];
for (var i in a) {
    console.log(i); // '0', '1', '2'
    console.log(a[i]); // 'A', 'B', 'C'
}

数组array也是对象，所以我们输出的也是索引。

2. while循环

while循环只有一个判断条件，只要条件满足，就不断循环，知道条件不满足（其实这个时候也很容易出现死循环的情况）。比如我们要计算100以内所有奇数之和，可以用while循环实现：

var x = 0;
var n = 99;
while (n > 0) {
    x = x + n;
    n = n - 2;
}
x; // 2500

while循环的条件是要我们在语句中自行构造的。

此外while循环还有个do while的亲家

do while语句的循环判断时机不是在开始，而是在结束的时候。

var n = 0;
do {
    n = n + 1;
} while (n < 100);
n; // 100