0x08 JS运算符汇总
var x = 10,
y = 4;
console.log("x + y =", x + y); // 输出：x + y = 14
console.log("x - y =", x - y); // 输出：x - y = 6
console.log("x * y =", x * y); // 输出：x * y = 40
console.log("x / y =", x / y); // 输出：x / y = 2.5
console.log("x % y =", x % y); // 输出：x % y = 2
基础运算符代码实现
赋值运算符
赋值运算符用来为变量赋值，下表中列举了 JavaScript 中支持的赋值运算符：
| 运算符 | 描述 | 示例 |
|---|---|---|
| = | 最简单的赋值运算符，将运算符右侧的值赋值给运算符左侧的变量 | x = 10 表示将变量 x 赋值为 10 |
| += | 先进行加法运算，再将结果赋值给运算符左侧的变量 | x += y 等同于 x = x + y |
| -= | 先进行减法运算，再将结果赋值给运算符左侧的变量 | x -= y 等同于 x = x – y |
| *= | 先进行乘法运算，再将结果赋值给运算符左侧的变量 | x *= y 等同于 x = x * y |
| /= | 先进行除法运算，再将结果赋值给运算符左侧的变量 | x /= y 等同于 x = x / y |
| %= | 先进行取模运算，再将结果赋值给运算符左侧的变量 | x %= y 等同于 x = x % y |
示例代码如下：
var x = 10;
x += 20;
console.log(x); // 输出：30
var x = 12,
y = 7;
x -= y;
console.log(x); // 输出：5
x = 5;
x *= 25;
console.log(x); // 输出：125
x = 50;
x /= 10;
console.log(x); // 输出：5
x = 100;
x %= 15;
console.log(x); // 输出：10
字符串运算符
JavaScript 中的+和+=运算符除了可以进行数学运算外，还可以用来拼接字符串，其中：
-
+运算符表示将运算符左右两侧的字符串拼接到一起； -
+=运算符表示先将字符串进行拼接，然后再将结果赋值给运算符左侧的变量。
示例代码如下：
var x = "Hello ";
var y = "World!";
var z = x + y;
console.log(z); // 输出：Hello World!
x += y;
console.log(x); // 输出：Hello World!
自增、自减运算符
自增、自减运算符用来对变量的值进行自增（+1）、自减（-1）操作，下表中列举了 JavaScript 中支持的自增、自减运算符：
| 运算符 | 名称 | 影响 |
|---|---|---|
| ++x | 自增运算符 | 将 x 加 1，然后返回 x 的值 |
| x++ | 自增运算符 | 返回 x 的值，然后再将 x 加 1 |
| –x | 自减运算符 | 将 x 减 1，然后返回 x 的值 |
| x– | 自减运算符 | 返回 x 的值，然后将 x 减 1 |
示例代码如下：
var x;
x = 10;
console.log(++x); // 输出：11
console.log(x); // 输出：11
x = 10;
console.log(x++); // 输出：10
console.log(x); // 输出：11
x = 10;
console.log(--x); // 输出：9
console.log(x); // 输出：9
x = 10;
console.log(x--); // 输出：10
console.log(x); // 输出：9
比较运算符
比较运算符用来比较运算符左右两侧的表达式，比较运算符的运算结果是一个布尔值，结果只有两种，不是 true 就是 false。下表中列举了 JavaScript 中支持的比较运算符：
| 运算符 | 名称 | 示例 |
|---|---|---|
| == | 等于 | x == y 表示如果 x 等于 y，则为真 |
| === | 全等 | x === y 表示如果 x 等于 y，并且 x 和 y 的类型也相同，则为真 |
| != | 不相等 | x != y 表示如果 x 不等于 y，则为真 |
| !== | 不全等 | x !== y 表示如果 x 不等于 y，或者 x 和 y 的类型不同，则为真 |
| < | 小于 | x < y 表示如果 x 小于 y，则为真 |
| > | 大于 | x > y 表示如果 x 大于 y，则为真 |
| >= | 大于或等于 | x >= y 表示如果 x 大于或等于 y，则为真 |
| <= | 小于或等于 | x <= y 表示如果 x 小于或等于 y，则为真 |
示例代码如下：
var x = 25;
var y = 35;
var z = "25";
console.log(x == z); // 输出：true
console.log(x === z); // 输出：false
console.log(x != y); // 输出：true
console.log(x !== z); // 输出：true
console.log(x < y); // 输出：true
console.log(x > y); // 输出：false
console.log(x <= y); // 输出：true
console.log(x >= y); // 输出：false
逻辑运算符
逻辑运算符通常用来组合多个表达式，逻辑运算符的运算结果是一个布尔值，只能有两种结果，不是 true 就是 false。下表中列举了 JavaScript 中支持的逻辑运算符：
| 运算符 | 名称 | 示例 |
|---|---|---|
| && | 逻辑与 | x && y 表示如果 x 和 y 都为真，则为真 |
| || | 逻辑或 | x || y 表示如果 x 或 y 有一个为真，则为真 |
| ! | 逻辑非 | !x 表示如果 x 不为真，则为真 |
示例代码如下：
var year = 2021;
// 闰年可以被 400 整除，也可以被 4 整除，但不能被 100 整除
if((year % 400 == 0) || ((year % 100 != 0) && (year % 4 == 0))){
console.log(year + " 年是闰年。");
} else{
console.log(year + " 年是平年。");
}
三元运算符
三元运算符（也被称为条件运算符），由一个问号和一个冒号组成，语法格式如下：
条件表达式 ? 表达式1 : 表达式2 ;
如果“条件表达式”的结果为真（true），则执行“表达式1”中的代码，否则就执行“表达式2”中的代码。
示例代码如下：
var x = 11,
y = 20;
x > y ? console.log("x 大于 y") : console.log("x 小于 y"); // 输出：x 小于 y
位运算符
位运算符用来对二进制位进行操作，JavaScript 中支持的位运算符如下表所示：
| 运算符 | 描述 | 示例 |
|---|---|---|
| & | 按位与：如果对应的二进制位都为 1，则该二进制位为 1 | 5 & 1 等同于 0101 & 0001 结果为 0001，十进制结果为 1 |
| | | 按位或：如果对应的二进制位有一个为 1，则该二进制位为 1 | 5 | 1 等同于 0101 | 0001 结果为 0101，十进制结果为 5 |
| ^ | 按位异或：如果对应的二进制位只有一个为 1，则该二进制位为 1 | 5 ^ 1 等同于 0101 ^ 0001 结果为 0100，十进制结果为 4 |
| ~ | 按位非：反转所有二进制位，即 1 转换为 0，0 转换为 1 | ~5 等同于 ~0101 结果为 1010，十进制结果为 -6 |
| << | 按位左移：将所有二进制位统一向左移动指定的位数，并在最右侧补 0 | 5 << 1 等同于 0101 << 1 结果为 1010，十进制结果为 10 |
| >> | 按位右移（有符号右移）：将所有二进制位统一向右移动指定的位数，并拷贝最左侧的位来填充左侧 | 5 >> 1 等同于 0101 >> 1 结果为 0010，十进制结果为 2 |
| >>> | 按位右移零（无符号右移）：将所有二进制位统一向右移动指定的位数，并在最左侧补 0 | 5 >>> 1 等同于 0101 >>> 1 结果为 0010，十进制结果为 2 |
示例代码如下：
var a = 5 & 1,
b = 5 | 1,
c = 5 ^ 1,
d = ~ 5,
e = 5 << 1,
f = 5 >> 1,
g = 5 >>> 1;
console.log(a); // 输出：1
console.log(b); // 输出：5
console.log(c); // 输出：4
console.log(d); // 输出：-6
console.log(e); // 输出：10
console.log(f); // 输出：2
console.log(g); // 输出：2xxxxxxxxxx var a = 5 & 1, b = 5 | 1, c = 5 ^ 1, d = ~ 5, e = 5 << 1, f = 5 >> 1, g = 5 >>> 1;console.log(a); // 输出：1console.log(b); // 输出：5console.log(c); // 输出：4console.log(d); // 输出：-6console.log(e); // 输出：10console.log(f); // 输出：2console.log(g); // 输出：2var a = 5 & 1, b = 5 | 1, c = 5 ^ 1, d = ~ 5, e = 5 << 1, f = 5 >> 1, g = 5 >>> 1;console.log(a); // 输出：1console.log(b); // 输出：5console.log(c); // 输出：4console.log(d); // 输出：-6console.log(e); // 输出：10console.log(f); // 输出：2console.log(g); // 输出：2
0x09 JS输出语句汇总（5种）
某些情况下，我们可能需要将程序的运行结果输出到浏览器中，JavaScript 中为我们提供了多种不同的输出语句来向浏览器中输出内容：
-
使用 alert() 函数来弹出提示框；
-
使用 confirm() 函数来弹出一个对话框；
-
使用 document.write() 方法将内容写入到 HTML 文档中；
-
使用 innerHTML 将内容写入到 HTML 标签中；
-
使用 console.log() 在浏览器的控制台输出内容。
1. alert() 函数
使用 JS alert() 函数可以在浏览器中弹出一个提示框，在提示框中我们可以定义要输出的内容，语法格式如下：
alert(message);
其中 message 为要在提示框中输出的内容，需要注意的是，alert() 中只能输出文本内容。
alert() 函数是 window 对象下的一个函数，所以有时为了代码更严谨，我们也可以使用 window.alert() 的形式来调用 alert() 函数。
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<script type="text/javascript">
var a = 11,
b = 5;
window.alert("a * b = " + a * b);
</script>
</body>
</html>
输出a*b=55
2. confirm() 函数
JS confirm() 函数与 alert() 函数相似，它们都是 window 对象下的函数，同样可以在浏览器窗口弹出一个提示框，不同的是，使用 confirm() 函数创建的提示框中，除了包含一个“确定”按钮外，还有一个“取消”按钮。如果点击“确定”按钮，那么 confirm() 函数会返回一个布尔值 true，如果点击“取消”按钮，那么 confirm() 函数会返回一个布尔值 false。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<script type="text/javascript">
var res = window.confirm("这里是要显示的内容");
if(res == true){
alert("你点击了“确定”按钮");
}else{
alert("你点击了“取消”按钮");
}
</script>
</body>
</html>
输出：这里是要显示的内容
3. console.log()
使用 JS console.log() 可以在浏览器的控制台输出信息，我们通常使用 console.log() 来调试程序，其语法格式如下：
console.log(message);
其中 message 为要输出的内容，可以是字符串或者对象类型。与 window.alert() 和 window.confirm() 可以分别简写成 alert() 和 confirm() 不同，console.log() 不能简写。
要看到 console.log() 的输出内容需要先打开浏览器的控制台。以 Chrome 浏览器为例，要打开控制台您只需要在浏览器窗口按 F12 快捷键，或者点击鼠标右键，并在弹出的菜单中选择“检查”选项即可。最后，在打开的控制台中选择“Console”选项，如下图所示：
图：打开控制台
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<script type="text/javascript">
var myArr = ["Chrome","Firefox","Edge","Safari","Opera"];
console.log(myArr);
</script>
</body>
</html>
运行结果如下图所示：
4. document.write()
使用 JS document.write() 可以向 HTML 文档中写入 HTML 或者 JavaScript 代码，语法格式如下：
document.write(exp1, exp2, exp3, …);
其中 exp1、exp2、exp3 为要向文档中写入的内容，document.write() 可以接收多个参数，即我们可以一次向文档中写入多个内容，内容之间使用逗号进行分隔。
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<script type="text/javascript">
document.write("<p>现在的时间是：</p>");
document.write(Date());
</script>
</body>
</html>
运行结果如下图所示：
图：document.write() 演示
5. innerHTML
与前面介绍的几个函数不同，innerHTML 是一个属性而不是一个函数，通过它可以设置或者获取指定 HTML 标签中的内容，示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<div id="demo">JavaScript 输出</div>
<script type="text/javascript">
var demo = document.getElementById("demo");
console.log(demo.innerHTML);
demo.innerHTML = "<h2>innerHTML</h2>"
</script>
</body>
</html>
运行结果如下图所示：
0x10 JS if else语句：条件判断语句
if 语句
if 语句是 JavaScript 中最简单的条件判断语句，语法格式如下：
if(条件表达式){ // 要执行的代码;}
当条件表达式成立，即结果为布尔值 true 时，就会执行{ }中的代码。
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<script type="text/javascript">
var age = 20;
if(age >= 18){ // 如果 age >= 18 的结果为 true，则执行下面 { } 中的代码
alert("adult");
}
</script>
</body>
</html>
运行结果如下图所示：
图：if 语句
if else 语句
if else 语句是 if 语句的升级版，它不仅可以指定当表达式成立时要执行的代码，还可以指定当表达式不成立时要执行的代码，语法格式如下：
if(条件表达式){ // 当表达式成立时要执行的代码}else{ // 当表达式不成立时要执行的代码}
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<script type="text/javascript">
var now = new Date(); // 获取当前的完整日期
var dayOfWeek = now.getDay(); // 获取一个 0-6 之间的数字，用来表示当前是星期几，0 表示星期日、1 表示星期一、以此类推
if (dayOfWeek > 0 && dayOfWeek < 6) { // 判断：如果当前是星期一到星期五中的一天，则输出“Have a nice day!”，若不是则输出“Have a nice weekend!”
alert("Have a nice day!");
} else {
alert("Have a nice weekend!");
}
</script>
</body>
</html>
运行结果如下图所示：
if else if else 语句
if 和 if else 语句都只有一个条件表达式，而 if else if else 语句是它们更高级的形式，在 if else if else 语句中允许您定义多个条件表达式，并根据表达式的结果执行相应的代码，语法格式如下：
if (条件表达式 1) {
// 条件表达式 1 为真时执行的代码
} else if (条件表达式 2) {
// 条件表达式 2 为真时执行的代码
}
...
else if (条件表达式N) {
// 条件表达式 N 为真时执行的代码
} else {
// 所有条件表达式都为假时要执行的代码
}
提示：if else if else 语句在执行过程中，当遇到成立的条件表达式时，会立即执行其后{ }中的代码，然后退出整个 if else if else 语句，若后续代码中还有成立的条件表达式，则不会执行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<script type="text/javascript">
var now = new Date(); // 获取当前的完整日期
var dayOfWeek = now.getDay(); // 获取一个 0-6 之间的数字，用来表示当前是星期几，0 表示星期日、1 表示星期一、以此类推
if(dayOfWeek == 0) { // 判断当前是星期几
alert("星期日")
} else if(dayOfWeek == 1) {
alert("星期一")
} else if(dayOfWeek == 2) {
alert("星期二")
} else if(dayOfWeek == 3) {
alert("星期三")
} else if(dayOfWeek == 4) {
alert("星期四")
} else if(dayOfWeek == 5) {
alert("星期五")
} else {
alert("星期六")
}
</script>
</body>
</html>
输出：星期一
注意事项
使用嵌套 if else 时，如果只有一行语句，也应该使用大括号包裹起来，避免条件歧义。
例如，下面嵌套 if else 就容易引发误解：
if(0)
if(1)
console.log(1);
else
console.log(0);
针对上面代码，JavaScript 解释器将根据就近原则，按如下逻辑层次进行解释：
if(0)
if(1)
console.log(1);
else
console.log(0);
因此使用大括号可以避免很多问题：
if(0){
if(1) console.log(1);
}else{
console.log(0);
}
0x11 JS switch case语句详解
JavaScript switch case 语句的语法格式如下：
switch (表达式){
case value1:
statements1 // 当表达式的结果等于 value1 时，则执行该代码
break;
case value2:
statements2 // 当表达式的结果等于 value2 时，则执行该代码
break;
......
case valueN:
statementsN // 当表达式的结果等于 valueN 时，则执行该代码
break;
default :
statements // 如果没有与表达式相同的值，则执行该代码
}
switch 语句根据表达式的值，依次与 case 子句中的值进行比较：
-
如果两者相等，则执行其后的语句段，当遇到 break 关键字时则跳出整个 switch 语句。
-
如果不相等，则继续匹配下一个 case。
-
switch 语句包含一个可选的 default 关键字，如果在前面的 case 中没有找到相等的条件，则执行 default 后面的语句段。
注意：switch 语句中，表达式是使用全等（===）来与各个 cese 子句中的值进行匹配的。由于使用的是全等运算符，因此不会自动转换每个值的类型。
switch 语句的执行流程（工作原理）如下图所示：
图：switch case 语句执行流程
break 关键字
switch 语句是逐行执行的，当 switch 语句找到一个与之匹配的 case 子句时，不仅会执行该子句对应的代码，还会继续向后执行，直至 switch 语句结束。为了防止这种情况产生，需要在每个 case 子句的末尾使用 break 来跳出 switch 语句。
break 除了可以用来跳出 switch 语句外，还可以用来跳出循环语句（for、for in、while、do while 等），后面我们会详细介绍。
【示例1】下面示例使用 switch case 语句设计网站登录会员管理模块。
var id = 1;
switch (id) {
case 1 :
console.log("普通会员");
break; //停止执行，跳出switch
case 2 :
console.log("VIP会员");
break; //停止执行，跳出switch
case 3 :
console.log("管理员");
break; //停止执行，跳出switch
default : //上述条件都不满足时，默认执行的代码
console.log("游客");
}
case 子句
case 子句可以省略语句，这样当匹配时，不管下一个 case 条件是否满足，都会继续执行下一个 case 子句的语句。
【示例2】下面示例演示了把普通会员和 VIP 会员合并在一起进行检测。
var id = 1;
switch (id) {
case 1 :
case 2 :
console.log("VIP会员");
break;
case 3 :
console.log("管理员");
break;
default :
console.log("游客");
在 switch 语句中，case 子句只是指明了执行起点，但是没有指明执行的终点，如果在 case 子句中没有 break 语句，就会发生连续执行的情况，从而忽略后面 case 子句的条件限制，这样就容易破坏 switch 结构的逻辑。
如果在函数中使用 switch 语句，可以使用 return 语句终止 switch 语句，防止代码继续执行。
default语句
default 是 switch 子句，可以位于 switch 内任意位置，不会影响其它 case 子句的正常执行。下面结合示例介绍使用 default 语句应该注意 3 个问题。
【示例3】如果 default 下面还有 case 子句，应该在 default 后面添加 break 语句，终止 switch 结构，防止程序突破 case 条件的限制继续执行下面 case 子句。
var id = 1;
switch (id) {
default :
console.log("游客");
break;
case 1 :
console.log("普通会员");
break;
case 2 :
console.log("VIP会员");
break；
case 3 :
console.log("管理员");
break;
}
【示例4】在下面代码中，JavaScript 先检测 case 表达式的值，由于 case 表达式的值都不匹配，则跳转到 default 子句执行，然后继续执行 case 1 和 case 2 子句。但是，最后不会返回 default 子句再重复执行。
var id = 3;
switch (id) {
default :
console.log("游客");
case 1 :
console.log("普通会员");
case 2 :
console.log("VIP会员");
}
【示例5】下面示例使用 switch 语句设计一个四则运算函数。在 switch 结构内，先使用 case 枚举 4 种可预知的算术运算，当然还可以继续扩展 case 子句，枚举所有可能的操作，但是无法枚举所有不测，因此最后使用 default 处理意外情况。
function oper (a,b,opr) {
switch (opr) {
case "+" : //正常枚举
return a + b;
case "-" : //正常枚举
return a - b;
case "*" : //正常枚举
return a * b;
case "/" : //正常枚举
return a / b;
default : //异常处理
return "非预期的 opr 值";
}
}
console.log(oper (2,5,"*")); //返回10
default 语句与 case 语句简单比较如下：
-
语义不同：default 为默认项，case 为判例。
-
功能扩展：default 选项是唯一的，不可以扩展。而 case 选项是可扩展的，没有限制。
-
异常处理：default 与 case 扮演的角色不同，case 用于枚举，default 用于异常处理。
0x12 JS while循环语句的用法
JS while 循环语法
JS while 循环的语法格式如下：
while (条件表达式) { // 要执行的代码}
while 循环在每次循环之前，会先对条件表达式进行求值，如果条件表达式的结果为 true，则执行{ }中的代码，如果条件表达式的结果为 false，则退出 while 循环，执行 while 循环之后的代码。
while 循环的执行流程如下图所示：
图1：JS while 循环的执行流程
示例代码如下：
var i = 1;
while( i <= 5) {
document.write(i+", ");
i++;
}
运行结果：1, 2, 3, 4, 5,
注意事项
在编写循环语句时，一定要确保条件表达式的结果能够为假（即布尔值 false），因为只要表达式的结果为 true，循环会一直持续下去，不会自动停止，对于这种无法自动停止的循环，我们通常将其称为“无限循环”或“死循环”。
如果不小心造成无限循环，可能会导致浏览器或者计算机卡死。
JS while 循环示例
【示例1】使用 while 循环计算 1~100 之间所有整数的和：
var i=1;
var sum=0;
while (i <= 100){
sum += i;
i++;
}
document.write("1 + 2 + 3 + ... + 98 + 99 + 100 = " + sum)
运行结果：1 + 2 + 3 + … + 98 + 99 + 100 = 5050
【示例2】找出 1900 年到 2020 年之间所有的闰年，并以每行 6 个进行输出：
var i = 1900;
var count = 0; //计数闰年的个数
while (i <= 2020) {
//判断是否是闰年
if (i % 4 == 0 && i % 100 != 0 || i % 400 == 0) {
document.write(i + " ");
count++;
if (count % 6 == 0) {
document.write("<br/>");
}
}
i++;
}
运行结果：
1904 1908 1912 1916 1920 1924
1928 1932 1936 1940 1944 1948
1952 1956 1960 1964 1968 1972
1976 1980 1984 1988 1992 1996
2000 2004 2008 2012 2016 2020
0x13 JS do while循环语句的用法
JS do while 循环语法
JS do while 循环的语法格式如下：
do { // 需要执行的代码} while (条件表达式);
提示：do while 循环与 while 循环还有一点不同，那就是 do while 循环的末尾需要使用分号;进行结尾，而 while 循环则不需要。
do while 循环的执行流程如下图所示：
图1：do while 循环执行流程
示例代码如下：
var i = 1;
do{
document.write(i + " ");
i++;
}while (i > 5);
运行结果：1
JS do while 循环示例
使用 do while 循环计算 1~100 之间所有整数的和：
var i=1;
var sum=0;
do {
sum += i;
i++;
} while (i <= 100);
document.write("1 + 2 + 3 + ... + 98 + 99 + 100 = " + sum)
运行结果：1 + 2 + 3 + … + 98 + 99 + 100 = 5050
0x14 JS for循环语句的用法
JS for 循环语法
JS for 循环适合在已知循环次数时使用，语法格式如下：
for(initialization; condition; increment) {
// 要执行的代码
}
for 循环中包含三个可选的表达式 initialization、condition 和 increment，其中：
-
initialization：为一个表达式或者变量声明，我们通常将该步骤称为“初始化计数器变量”，在循环过程中只会执行一次；
-
condition：为一个条件表达式，与 while 循环中的条件表达式功能相同，通常用来与计数器的值进行比较，以确定是否进行循环，通过该表达式可以设置循环的次数；
-
increment：为一个表达式，用来在每次循环结束后更新（递增或递减）计数器的值。
示例代码如下：
for (var i = 1; i <= 10; i++) {
document.write(i + " ");
}
运行结果：1 2 3 4 5 6 7 8 9 10
循环开始之前会先执行var i = 1;，并将变量 i 作为计数器；然后判断i <= 10是否成立，如果成立则执行{ }中的代码，如果失败则退出 for 循环；在每次循环执行完成后，执行i++操作，即更新计数器的值。
JS for 循环中的三个表达式
JS for 循环中括号中的三个表达式是可以省略的，但是用于分隔三个表达式的分号不能省略，如下例所示：
// 省略第一个表达式
var i = 0;
for (; i < 5; i++) {
// 要执行的代码
}
// 省略第二个表达式
for (var y = 0; ; y++) {
if(y > 5){
break;
}
// 要执行的代码
}
// 省略第一个和第三个表达式
var j = 0;
for (; j < 5;) {
// 要执行的代码
j++;
}
// 省略所有表达式
var z = 0;
for (;;) {
if(z > 5){
break;
}
// 要执行的代码
z++;
}
JS for 循环嵌套
无论是哪种循环，都可以嵌套使用（即在一个循环中再定义一个或多个循环），下面就以 for 循环为例，来演示一下循环的嵌套使用：
for (var i = 1; i <= 9; i++) {
for (var j = 1; j <= i; j++) {
document.write(j + " x " + i + " = " + (i * j) + " ");
}
document.write("<br>");
}
输出九九乘法表
0x15 JS for in循环语句的用法
JS for in 循环是一种特殊类型的循环，也是普通 for 循环的变体，主要用来遍历对象，使用它可以将对象中的属性依次循环出来，其语法格式如下：
for (variable in object) { // 要执行的代码}
其中，variable 为一个变量，每次循环时这个变量都会被赋予不同的值，我们可以在{ }中使用这个变量来进行一系列操作；object 为要遍历的对象，在每次循环中，会将 object 对象中的一个属性的键赋值给变量 variable，直到对象中的所有属性都遍历完。
JS for in 循环示例代码：
// 定义一个对象
var person = {"name": "Clark", "surname": "Kent", "age": "36"};
// 遍历对象中的所有属性
for(var prop in person) {
document.write("<p>" + prop + " = " + person[prop] + "</p>");
}
输出：
name = Clarksurname = Kentage = 36
0x16 JS for of循环语句的用法
JS for of 循环是 ECMAScript6 中新添加的一个循环方式，与 for in 循环类似，也是普通 for 循环的一种变体。使用 for of 循环可以轻松的遍历数组或者其它可遍历的对象，例如字符串、对象等。
JS for of 循环的语法格式如下：
for (variable of iterable) { // 要执行的代码}
其中，variable 为一个变量，每次循环时这个变量都会被赋予不同的值，我们可以在后面的{ }中使用这个变量来进行一系列操作；iterable 为要遍历的内容，在每次循环中，会将 iterable 中的一个值赋值给变量 variable，直到 iterable 中的所有值都遍历完。
示例代码如下：
// 定义一个数组
var arr = ['a', 'b', 'c', 'd', 'e', 'f'];
// 使用 for of 循环遍历数组中的每个元素
for (var value of arr) {
document.write(value + ", ");
}
document.write("<br>");
// 定义一个字符串
var str = "Hello World!";
// 使用 for of 循环遍历字符串中的每个字符
for (var value of str) {
document.write(value + ", ");
}
document.write("<br>");
// 定义一个对象
var obj = {"name": "Clark", "surname": "Kent", "age": "36"};
// 使用 for of 循环遍历对象中的所有属性
for(var value in obj) {
document.write(value + ", ");
}
运行结果：
a, b, c, d, e, f,H, e, l, l, o, , W, o, r, l, d, !,name, surname, age,
0x17 JS break和continue语句：跳出循环
JS break 语句
在学习《JS switch case语句》时我们已经简单了解过了 break 语句，使用 break 语句可以跳出 switch 语句。其实使用 break 语句还可以用来跳出循环，让程序继续执行循环之后的代码（如果有的话）。
【示例】使用 break 语句跳出 for 循环：
for (var i = 0; i < 10; i++) {
if(i == 5) {
break;
}
document.write("i = " + i + "<br>");
}
document.write("循环之外的代码");
运行结果：
i = 0i = 1i = 2i = 3i = 4循环之外的代码
JS continue 语句
continue 语句用来跳过本次循环，执行下次循环。当遇到 continue 语句时，程序会立即重新检测条件表达式，如果表达式结果为真则开始下次循环，如果表达式结果为假则退出循环。
break 语句用来跳出整个循环，执行循环后面的代码；continue 语句用来跳过当次循环，继续执行下次循环。
【示例】使用 continue 语句跳出 for 循环：
for (var i = 0; i < 10; i++) {
if(i % 2 == 0) {
continue;
}
document.write(i + " ");
}
运行结果：1 3 5 7 9
JavaScript 标签
从 JavaScript 1.2 开始，可以将标签与 break 和 continue 结合使用，来更精确的控制程序的执行。
JavaScript 中的标签与 HTML 中的标签不同，JavaScript 中的标签就是一个标识符（类似变量名），后面跟随一个冒号:。JavaScript 标签可以声明在任何语句或者代码块之前，并与 break 或 continue 配合来跳出特定的循环，例如当多个循环嵌套使用时，单纯使用 break 只能跳出当前的循环，无法跳出外层循环，如果将 break 与标签配合使用，则可以一次跳出多层循环。
示例代码如下：
document.write("开始循环!<br /> ");
outerloop: // 定义一个标签
for (var i = 0; i < 5; i++) {
document.write("外层循环: " + i + "<br />");
innerloop: // 定义一个标签
for (var j = 0; j < 5; j++) {
if (j > 3 ) break ; // 跳出内层循环
if (i == 2) break innerloop; // 跳出内层讯息
if (i == 4) break outerloop; // 跳出外层循环
document.write("内层循环: " + j + " <br />");
}
}
document.write("循环结束!<br /> ");
小结
在学习JavaScript过程中记录的一些小笔记，不足之处还望指正。在之后的日子里大家一起进步吧！
web渗透师徒班：昕之所嚮学习分享！
原文始发于微信公众号（衡阳信安）：JavaScript学习笔记分享 （2）
