手记

JavaScript循环语句

循环语句:for, while, do while,重点在for,while点过,do while提一下作用。

循环语句首坑,调试容易死循环卡死,一定要注意,保重。

警告:本车过弯有点急,请拉好扶手。


for循环

有多少人知道for取名来自于formula car,方程式赛车。一圈一圈一圈一圈。。。

常规

for (语句 1; 语句 2; 语句 3) {
    todo...
}

语句1在代码块运行前执行,语句2是运行条件,语句3是每运行一次后执行一次

三个语句都可以省略,后果请研究上面说的情况,注意语句2,容易死循环。

下面看循环打印一百遍。

for(let i = 0; i < 100; i++) {
    console.log(i)
} // 0 1 2 3 4...99

运行前定义i = 0,满足i < 100,所以运行打印i,然后i++使得i = 1,依然满足...直到i++使i = 100,此时不再满足,所以当i为100的时候那次不运行打印,因此第一次打印0,最后一次是99,合计100次。

有种骚包的写法(我喜欢的写法):

for(let i = -1; ++i < 100;) {
    console.log(i)
}

看不懂的话,自己好好思考下,实在不行就放弃,然后使用常规写法。

for相关的几个关键词

  1. break

    跳出所在的整个循环体,注意是所在,不是所有。第三点有比较说明。

    for(let i = 0; i < 100; i++){
        console.log(i)
        if(i > 9) break // 只想打印0到9,共10次,后面不再打印与执行,就可以这样跳出去。
    }
  2. continue

    不执行当前循环下面语句直接进入下一次循环。

    for(let i = 0; i < 10; i++){
        if(i === 3) continue // 当i === 3的时候,不执行下面语句直接进入下个循环,就是不打印3,所以打印结果没有3
        console.log(i) // 0 1 2 4 5 6 7 8 9
    }
  3. 多层嵌套循环跳出指定循环

    这个场景偶现,你可能某个业务嵌套了多层数组,每层每层找下去,在某个底层数组里面找到符合条件的情况便要终止循环,这时想要直接跳出外面的大循环是比较麻烦的,常见方法是函数或者一个变量跟踪,还有一种方法就是这里要说的关于 : 的使用。

    // 跳出标记所在的循环体
    out: // 这个out随便写啥,就是个标记位,这里标记的是第一层for
        for(let i = 0; i < 10; i ++) {
            for(let j = 0; j < 10; j++) {
                if(i === 1 && j === 5) break out // 这里打印到1, 4就不再继续打印了,因为完全跳出了。
                console.log(i, j)
            }
        }
    
    // 进入标签循环的下一轮
    out:
        for(let i = 0; i < 10; i ++) {
            for(let j = 0; j < 10; j++) {
                if(i === 1 && j === 5) continue out // 这里打印到1, 4,然后下一个就是2, 0,然后继续打印到9, 9,因为这里是继续第一层for的下一轮循环
                console.log(i, j)
            }
        }

    算是非常偏门的使用方式了,如果真有遇到这玩意,能用则用,不能用就用函数代替吧。

for of

for of用来遍历已有数组,具体如下:

let arr = [1, 2, 3, 4...100] // 伪代码,意思是有1到100数字的一个数组

for(let i of arr) {
    console.log(i)
} // 1 2 3 4 ... 100

与forEach有点像,for of省事点,但是在Vue里面就比forEach好用多了。

for in

for in用来遍历已有对象,具体如下:

let obj = {
    a: 1,
    b: 2
}

for(let i of obj) {
    console.log(i) // i是遍历出来的key
    console.log(obj[i]) // obj[i]就是遍历出来的value了
}

break与continue是适用于for of与for in的,不再赘述。

问题来了,倒着用会怎样?首先,for of去遍历对象,抱歉,报错,for of只能遍历可迭代对象(数组、Set等),纯对象本身不可迭代;其次:for in去遍历数组又如何,告诉你个好消息,不报错,它会把数组的索引按照key方式给你整出来,你还能用索引来获取值……因为数组是特殊的对象。具体见下面:

// for of遍历对象
let obj = {
    a: 1,
    b: 2
}

for(let key of obj) {
    console.log(key)
    console.log(obj[key])
} // Uncaught TypeError: obj is not iterable,obj不可迭代。

// for in遍历数组
let arr = [1, 2,3]

for(let i in arr) {
    console.log(i) // 0 1 2
    console.log(arr[i]) // 1 2 3
}

while

while相对于for简单许多,语法如下:

while(条件) {
    语句
}

比如还用for那个打印100次的例子:

let i = 0
while(i < 100) {
    console.log(i)
    i++
}

相信强迫症患者一定很不舒服,是的,for那么简单,干嘛要用while。

尤其,尤其,while很容易把自增(类似控制条件)条件忘掉,然后浏览器崩掉。

但是两面性,如果while用的熟练,可以让代码看着非常优雅,另外while也有其特长的地方,此处不做过多。


do while

do while与while差别不大,语法如下:

do {
    语句
} while(条件)

区别在于,无论条件是否满足,都最少会执行那么一次。

什么场景使用呢,举个通俗的例子吧,不管对错,先打一顿再说。其实先写语句,再用for是一样一样的。但是用do while,恩,技巧性更强。

实际上do while内部语句可以做一些控制,比如之前for里面的i++会在判断前执行一次,但是do while就可以做到一定的控制,但是,这实在是太难遇到的场景了,请忽略。。。


恩,关于循环语句的知识点就说到这里了,喜欢我的文章请记得关注一波啊,我会定期更新技术文章。

0人推荐
随时随地看视频
慕课网APP