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就可以做到一定的控制，但是，这实在是太难遇到的场景了，请忽略。。。

---

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