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

::: warning

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

:::

2. 递增、递减运算符

递增（++）、递减（—）

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

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

1
2
3
4
5
6
7
8
var age1 = 10;
var age2 = 10;

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

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

3. 比较运算符

运算符说明案例结果
<大于1 < 2true
>小于1 > 2false
>=大于等于2 >= 2true
<=小于等于3 <= 2false
==判等号（会转型）37 == 37true
!=不等号37 != 37false
=== !==全等于37 === ‘37’false
1
2
3
4
5
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. 逻辑中断 与 、或

逻辑与

::: note

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

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

:::

1
2
console.log(123 && 456)		// 456
console.log(0 && 456)		// 0

逻辑 或

::: note

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

  • 如果第一个表达式的值为真，则返回 表达式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
1
2
var age = 2;
age *= 5;    // 10

二、分支（if else，switch）

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

1. if else 语句

语法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 单 分支 语句
if (条件表达式) {
	// 条件成立后执行的语句
} else {
    // 条件不成立 执行语句
}

// 多分支 if 语句
if (条件表达式1) {
	// 条件成立后执行的语句
} else if (条件表达式2) {
    // 条件成立后执行的语句
} else if (条件表达式3) {
    // 条件成立后执行的语句
} else {
    // 条件不成立 执行语句
}
1
2
3
4
5
6
var age = prompt("请输入你的年龄？")
if (age >= 18) { 
    alert("你已经成年了。")
} else {
    alert("你还是未成年小弟弟。")
}

2. 三元表达式

有三元 运算符 : 和 ？ 的表达式

三元表达式 是有返回值的，所以需要 变量 来接收

语法：

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

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

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

1
2
3
var num = 10;
var result = num > 10 ? '是的' : '不是的';
console.log(result);		// 是的
1
2
3
var num = prompt("请输入数字");
var result = num >= 10 ? num : "0" + num;
alert(result);

3. switch 语句

语法：

1
2
3
4
5
6
7
8
9
10
11
switch(表达式) {
	case value1:
		执行语句1;
		break;
	case value2:
		执行语句2;
		break;
	...
    default:
    	执行最后的语句;
}

::: warning

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

:::

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 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 循环

语法：

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

说明：

  • 初始化变量：用于作为计数器的普通变量；
  • 条件表达式：循环终止条件，用于判断每次循环是否执行；
  • 操作表达式：用于更新计数器变量，递增或递减
1
2
3
for (var i = 0; i < 100; i++) {
    console.log('这个人今年' + i + '岁了。');
}
1
2
3
4
5
var num = 0;
for (var i = 1; i < 101; i++) {
    num += i;
}
console.log(num);		// 5050
1
2
3
4
5
6
7
8
9
10
// 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 循环

语法：

1
2
3
4
while (条件表达式) {
	// 循环体
    // 计数器;
}
1
2
3
4
5
var i = 1;
while (i <= 100) {
    console.log('他' + i + '岁了。');
    i++;
}

3. do while 循环

语法：

1
2
3
4
do {
	// 循环体；
    // 计数器；
} while (条件表达式)

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

1
2
3
4
5
var i = 1;
do {
    console.log('他' + i + '岁了。');
    i++;
} while (i <= 100)

4. continue 、break

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

break ： 退出循环