前序:我一直对于for跟for..in存在一种误解，我觉得for都能把事情都做了，为啥还要for...in...这玩意了，有啥用，所以今天就说说JavaScript里的循环语句。

循环

要计算1+2+3，我们可以直接写表达式：

但是当需要计算1+2+3+4+5......+10000，

如果通过表达式来写，估计我们会奔溃，

所以我们现在就可以使用循环（for）来搞定，

其实也很简单，javaScript的循环有两种，一种是for循环，通过初始条件、结束条件和递增条件来循环执行语句块：

这一种估计大家都很熟悉很熟悉。没啥疑问在工作中也会经常用到。那就简单点，代码如下

var x = 0;

var i;

for (i=1; i<=10000; i++) {

    x = x + i;

}

x; //

因为这个大家比较熟悉就不说那么多了

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

• i=1 这是初始条件，将变量i置为1；
• i<=10000 这是判断条件，满足时就继续循环，不满足就退出循环；
• i++ 这是每次循环后的递增条件，由于每次循环后变量i都会加1，因此它终将在若干次循环后不满足判断条件i<=10000而退出循环。

那么接下来要好好说下的是for...in...，不知道大家是不是跟我一样，都很容易弄混这个。也许大家会嘲笑说，这么简单谁不懂啊。

for循环的一个变体是for ... in循环，它可以把一个对象的所有属性依次循环出来：

不多说，先看代码

var o = {

    name: 'Jack',

    age: 20,

    city: 'Beijing'

};

for (var k in o) {

    console.log(k); // 'name', 'age', 'city'

}

很简单吧，也很容易理解吧，k无非就是o对象里面的属性，那也就是我们刚刚在上面加粗的一个，把对象所有属性遍历出来。然后要对对象进行操作就很简单了。

那可能有人好奇，for...in...用来遍历数组应该也可以吧，

嗯，没错。是的没的问题。废话不多说

var a = ['A', 'B', 'C'];

for (var i in a) {

    console.log(i); // '0', '1', '2'

    console.log(a[i]); // 'A', 'B', 'C'

}

没错，就是这么简单，有人会说咋不一样了，你刚刚明明说是遍历对象的属性啊，咋现在又不一样了。

一切皆对象，没错，数组也是个对象，由于Array也是对象，它的每个元素的索引被视为对象的属性，因此，for ... in循环可以直接循环出Array的索引：

大家不要误解，不要出去就说，一切皆对象，见到漂亮的女生就说你是我对象，这就尴尬了嘛。

毕竟撸码的都知道此对象非彼对象。

while

for循环在已知循环的初始和结束条件时非常有用。而条件的for循环容易让人看不清循环的逻辑，此时用while循环更佳。

while循环只有一个判断条件，条件满足，就不断循环，条件不满足时则退出循环。比如我们要计算100以内所有奇数之和，可以用while循环实现：

var x = 0;

var n = 99;

while (n > 0) {

    x = x + n;

    n = n - 2;

}

x; //

在循环内部变量n不断自减，直到变为-1时，不再满足while条件，循环退出。

别人会问为啥n=99，这个嘛，看清题，是所有奇数的和，不是偶数哈。

do ... while

大家可能没怎么使用个这个，不过这玩意也是挺有用的

do { ... } while()循环，它和while循环的唯一区别在于，不是在每次循环开始的时候判断条件，而是在每次循环完成的时候判断条件：

var n = 0;

do {

    n = n + 1;

} while (n < 100);

n; //

可能大家对es6更感兴趣，反而觉得这循环有啥说的，嗯，怎么说基础都很重要，有些知识点不能忽视。es6大家想了解的话，也可以跟我讨论，或者相了解更多前端知识啊，比如vuejs，nodejs等等，可以一起学习，一起进步，毕竟知识日新月异的，几乎每天都有新知识出来。工作中有啥有趣的都可以跟我分享，可能接下来会弄一个微信公众号。

公司最近可能要弄小程序，大家如果已经做过这方面项目可以指导下，毕竟很久没关注小程序这块了。现在需要重新去看看小程序api。