for语句
基本语法
for循环是大家非常熟悉的也经常用的一种写法，一个for语句的基本语法为
// 括号中的三个条件都可省略
for ([initialExpression]; [condition]; [incrementExpression])
statement
当condition为true时，执行顺序：
initialExpression->condition->statement->incrementExpression
initialExpression
初始化表达式，可以是一个任意复杂度的表达式，也可以声明变量。
// 常见用法1
for(let i = 0; i < 3; i++) { ... }
// 常见用法2
for(let i = 0, j = 3; i < j; i++) { ... }
condition
执行for循环的条件表达式，如果值为true，循环中的语句会被执行，如果值为false，for循环终止。如果condition语句被省略，默认为true。
// condition默认为true，所以下面语句会进入死循环
for(;;) { ... }
statement
for循环的执行体。
incrementExpression
更新表达式，一般用于更新循环变量，使得若干次循环后不满足条件而退出循环。
实例
for(let i = 0, j = 3; i < j; i++) {
console.log(i);
}
while语句
基本语法
while (condition)
statement
当condition为true时，则执行statement，然后继续检查condition，如果为false，则跳出循环执行后面的语句，所以如果当condition一直为true时，则会进入死循环。
// 下面语句会进入死循环
while (true) {
console.log('loop');
}
实例
let i = 0
while (i < 10) {
i++;
console.log(i)
}
do ... while语句
基本语法
do
statement
while (condition);
与while语句不同的是，不管条件如何，会首先执行一遍statement，然后再进行condition条件判断，如果为true则继续执行statement，如果为false则跳出循环执行后面的语句。
实例
let i = 0
do {
i++;
console.log(i)
} while (i < 10)
for ... in语句
基本语法
for ... in语句以任意顺序遍历一个对象的除Symbol以外的可枚举属性
for (variable in object) {
statements
}
请注意：循环将遍历对象本身的所有可枚举属性，以及对象从其构造函数原型中继承的属性。
实例
function parent(){
this.x = 1;
this.y = 2
}
parent.prototype = {
a: 'a',
b: 'b'
}
const child = new parent()
for(let key in child) {
console.log(key)
}
// 输出
// x
// y
// a
// b
可以看到原型上的a，b属性也被遍历出来了，如果不想遍历继承的属性，则可以添加hasOwnProperty()判断
for(let key in child) {
if (child.hasOwnProperty(key)) {
console.log(key)
}
}
// 输出
// x
// y
for ... of语句
基本语法
用于遍历可迭代对象，比如(Array，Map，Set，String)，可迭代对象简而言之就是原型对象都有一个 @@iterator方法，具体概念自行谷歌。
for (variable of iterable) {
statements
}
Object不是可迭代对象，所以用for ... of遍历对象时则会报错。
const obj = {x: 1}
for(const v of obj){ console.log(v) }
// Uncaught TypeError: obj is not iterable
实例
const array = [1, 2, 3]
for( const value of array) {
console.log(value)
}
循环map对象时，可以定义key值
const map = new Map([['x', 1], ['y', 2]])
for(const [k, v] of map) {
console.log(k, v)
}
// 输出
// x 1
// y 2
中断循环
以上总共介绍了五种循环的方式，但每种方式该如何中断循环呢？下面来介绍中断循环的几种常见方式：break，continue，return。
label语句
首先介绍下label语句，这个语句不是用来中断循环的，而是一个语句标识符，为什么先介绍这个语句呢？因为后面介绍的break，continue语句后面都可以跟label这个参数，所以我们先看看label的用法。
基本语法
label :
statement
label的值可以是任何的非保留字的 JavaScript 标识符， statement 可以是任意你想要标识的语句（块）。具体有什么用呢？我们看下面的例子
实例
break label
// 标记第一个循环语句
labelLoop:
for (let i = 0; i < 3; i++) {
// 标记第二个循环语句
labelLoop2:
for(let j = 0; j < 3; j++) {
if(i === 1 && j === 0) {
break labelLoop;
// 直接跳出第一个循环，然后执行循环后面的语句
}
console.log(i, j);
}
}
console.log('end loop')
// 输出
// 0 0
// 0 1
// 0 2
// end loop
可以看出有label标记后，可以直接跳出到标记循环外，执行循环后面的语句，如果没有label则默认跳出当前循环。
continue label
labelLoop:
for (let i = 0; i < 5; i++) {
// 标记第二个循环语句
labelLoop2:
for(let j = 0; j < 5; j++) {
if(i === 1 && j === 0) {
continue labelLoop;
// 直接跳到第一个循环，然后执行第一个循环的下一次循环
}
console.log(i, j);
}
}
console.log('end loop')
// 0 0
// 0 1
// 0 2
// 2 0
// 2 1
// 2 2
// end loop
可以看出有label标记后，可以直接跳出标记循环外，执行标记循环的下一次循环，如果没有label则默认跳出当前循环，并执行当前循环的下一循环。
break语句
终止循环或者switch语句
基本语法
break [label]
如果省略label则中断当前循环或者switch，如果有label，则终止指定的label语句
实例
-
for语句中断循环
for (let i = 0; i < 5; i++) {
if(i > 2) { break; }
console.log(i);
}
// 输出
// 0
// 1
// 2
-
while语句中断循环
let i = 0
while (i < 5) {
if(i > 2) { break; }
console.log(i);
i++
}
// 输出
// 0
// 1
// 2
-
do ... while语句中断循环
let i = 0
do {
if(i > 2) { break; }
console.log(i);
i++
} while (i < 5)
// 输出
// 0
// 1
// 2
-
for ... in语句中断循环
let obj = {x: 1, y: 2, z: 3}
for(let k in obj) {
if(k === 'z') { break;}
console.log(k)
}
// 输出
// x
// y
-
for ... of语句中断循环
const arr = [1, 2, 3, 4, 5]
for(let v of arr) {
if(v > 2) { break; }
console.log(v)
}
// 输出
// 1
// 2
break跟label的实例请参考上方 break label 实例。
continue语句
continue语句用来跳过代码块的剩余部分并进入下一循环。
基本语法
continue [label]
如果省略label则中断当前循环并进入下一次循环，如果有label则进入被label标识的下一次循环语句。
实例
for (let i = 0; i < 3; i++) {
if(i === 1) {
continue;
}
console.log(i);
}
// 输出
// 0
// 2
continue跟label的实例请参考上方 continue label实例。其他几种循环的continue效果一致，就不在重复了。
return语句
return语句用于指定函数返回的值且return语句只能出现在函数体内。
function loop() {
let i = 0
while(i < 5) {
if(i > 2) return
console.log(i)
i++
}
console.log('end')
}
loop()
// 输出
// 1
// 2
forEach语句
forEach()方法对数组的每个元素执行一次提供的函数。forEach是数组原型上的一个遍历方法，这里拿出来讲主要是因为这也是一个非常常见的循环方法，而且经常会跟上面的循环搞混。
主要区别在于：没有办法中止或者跳出 forEach() 循环，除了抛出一个异常。如果你需要跳出循环请考虑使用for ... of语句，或其他数组方法，比如：Array.prototype.every()，Array.prototype.some()等。
function test() {
var a = [1, 2, 3, 4, 5]
a.forEach(v => {
if(v===2) return
console.log(v)
})
console.log('end')
}
test()
// 输出
// 1
// 3
// 4
// 5
// end
可以看出return无法中断forEach循环。
总结
-
for ... in循环会遍历自身和原型上的可枚举属性。 -
break表示跳出循环。 -
continue表示跳出当前循环，然后进入下次循环。 -
return用在函数体内，终止函数的执行，并返回一个指定的值给函数调用者。 -
break，continue，return都可用在for，for ... in，for ... of，while，do ... while语句内。 -
forEach语句除了抛出异常否则无法跳出循环，如果需要中断循环，则应考虑其他循环方式。
