2.运算符、分支、循环

Pupper大约 4 分钟学习笔记前端基础JavaScript

一、运算符

运算符优先级：

优先级	运算符	顺序
1	小括号	（）
2	一元运算符	++ 、 --
3	数运算符	先 * / 后 + -
4	关系运算符	> 、>=、<、<=
5	相等运算符	、!=、 === 、 !
6	逻辑运算符	先 && 后 \|\|
7	赋值运算符	=
8	逗号运算符	，

1. 算术运算符

运算符	描述	实例
+	加	10 + 20 = 30
-	减	10 - 20 = -10
*	乘	10 * 20 = 200
/	除	10 / 20 = 0.5
%	取余数	9 % 2 = 1

注意

不要使用 浮点数 做判断，因精度问题，可能导致两个数 不相等

2. 递增、递减运算符

递增（++）、递减（--）
前置递增（递减）：将（++/--) 放在变量的前面，先递增或递减，在输出
后置递增（递减）：将（++/--) 放在变量的后面，先输出，再递增或递减

var age1 = 10;
var age2 = 10;

// 前置
console.log(++age1); // 11

// 后置
console.log(age2++); // 10

3. 比较运算符

运算符	说明	案例	结果
<	大于	1 < 2	true
>	小于	1 > 2	false
>=	大于等于	2 >= 2	true
<=	小于等于	3 <= 2	false
==	判等号（会转型）	37 == 37	true
!=	不等号	37 != 37	false
=== !==	全等于	37 === '37'	false

console.log(18 == 18); // true

// 数据类型转换
console.log(18 == "18"); // true
console.log(18 === "18"); // false

4. 逻辑运算符

运算符	说明	案例
&&	与（and）	true && false = false
\|\|	或（or）	true \|\| false = false
!	非（not）	! true = false

5. 逻辑中断与、或

逻辑与

注

语法：表达式 1 && 表达式 2

如果第一个表达式的值为真，则返回表达式 2
如果第一个表达式的值为假，则返回表达式 1

console.log(123 && 456); // 456
console.log(0 && 456); // 0

逻辑或

注

语法：表达式 1 || 表达式 2

如果第一个表达式的值为真，则返回表达式 1
如果第一个表达式为假，则返回表达式 2

console.log(123 || 456); // 123
console.log(0 || 456); // 456

6. 赋值运算符

运算符	说明	案例
=	直接赋值	var usrName = '我是值'
+= 、 -=	加减一个数后再赋值	var age = 10; age += 5; // 15
*= 、 /= 、 %=	乘、除、取余后再赋值	var age = 2; age *= 5; // 10

var age = 2;
age *= 5; // 10

二、分支（if else，switch）

如果有固定值，则使用 switch ，如果是一个固定范围，则使用 if else

1. if else 语句

语法：

// 单 分支 语句
if (条件表达式) {
	// 条件成立后执行的语句
} else {
	// 条件不成立 执行语句
}

// 多分支 if 语句
if (条件表达式1) {
	// 条件成立后执行的语句
} else if (条件表达式2) {
	// 条件成立后执行的语句
} else if (条件表达式3) {
	// 条件成立后执行的语句
} else {
	// 条件不成立 执行语句
}

var age = prompt("请输入你的年龄？");
if (age >= 18) {
	alert("你已经成年了。");
} else {
	alert("你还是未成年小弟弟。");
}

2. 三元表达式

有三元运算符 : 和？ 的表达式
三元表达式是有返回值的，所以需要变量来接收

语法：

条件表达式 ？ 表达式1 ： 表达式2

如果条件表达式结果为真，则返回表达式 1 的值

如果条件表达式结果为假，则返回表达式 2 的值

var num = 10;
var result = num > 10 ? "是的" : "不是的";
console.log(result); // 是的

var num = prompt("请输入数字");
var result = num >= 10 ? num : "0" + num;
alert(result);

3. switch 语句

语法：

switch(表达式) {
	case value1:
		执行语句1;
		break;
	case value2:
		执行语句2;
		break;
	...
    default:
    	执行最后的语句;
}

注意

switch 后的表达式的值必须 全等于 case 后的值，才会执行
如果 case 中没有 break，会执行下一个 case 中的语句，直到遇到 break

 var num = prompt("请输入水果名称。");
switch (num) {
    case "苹果":
        alert(num + "：5元/斤");
        break;
    case "香蕉":
        alert(num + "：10元/斤");
        break;
    case "梨":
        alert(num + "：5元/斤");
        break;
    case "西瓜":
        alert(num + "：3元/斤");
        break;
    case "桃子":
        alert(num + "：7元/斤");
        break;
    default:
        alert("没有这种水果。");
        break;

三、循环（for、while）

1. for 循环

语法：

for (初始化变量; 条件表达式; 操作表达式;) {
	// 循环体
}

说明：

初始化变量：用于作为计数器的普通变量；
条件表达式：循环终止条件，用于判断每次循环是否执行；
操作表达式：用于更新计数器变量，递增或递减

for (var i = 0; i < 100; i++) {
	console.log("这个人今年" + i + "岁了。");
}

var num = 0;
for (var i = 1; i < 101; i++) {
	num += i;
}
console.log(num); // 5050

// 99乘法表
var num = 0;
var res = "";
for (var i = 1; i < 10; i++) {
	for (var j = 1; j <= i; j++) {
		res += j + "*" + i + "=" + i * j + " ";
	}
	res += "\n";
}
console.log(res);

2. while 循环

语法：

while (条件表达式) {
	// 循环体
	// 计数器;
}

var i = 1;
while (i <= 100) {
	console.log("他" + i + "岁了。");
	i++;
}

3. do while 循环

语法：

do {
	// 循环体；
	// 计数器；
} while (条件表达式);

先执行一次循环体，再判断条件，如果条件表达式结果为真，则继续执行循环体，否则退出。

var i = 1;
do {
	console.log("他" + i + "岁了。");
	i++;
} while (i <= 100);

4. continue 、break

continue : 退出本次循环，执行下一次循环
break ：退出循环