javascript里的循环语句

时间:2023-09-13 11:19:38
前序:我一直对于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。