IT课程 JavaScript基础 040_运算符

JavaScript 运算符用于对数学运算、比较、逻辑运算等操作并返回结果。

算术运算符

+：加法
-：减法
*：乘法
/：除法
%：取余数
**：求幂

示例：

1
let a = 5;
2
let b = 2;
3

4
console.log(a + b);  // 输出 7
5
console.log(a - b);  // 输出 3
6
console.log(a * b);  // 输出 10
7
console.log(a / b);  // 输出 2.5
8
console.log(a % b);  // 输出 1
9
console.log(a**b);  // 输出 25

赋值运算符

=：赋值
+=：加法赋值
-=：减法赋值
*=：乘法赋值
/=：除法赋值
%=：取余赋值
**=：求幂赋值
??=：空赋值，当变量值为null或undefined时才会进行赋值

示例：

1
let x = 5;
2
x += 2;  // x = x + 2; 输出 7
3
x -= 2;  // x = x - 2; 输出 3
4
x *= 2;  // x = x * 2; 输出 10
5
x /= 2;  // x = x / 2; 输出 2.5
6
x %= 2;  // x = x % 2; 输出 1
7
x **= 2;  // x = x ** 2; 输出 25
8
x ??= 2;  // 输出 5，当x为null或undefined时赋值为2
9
console.log(x);

比较运算符

==：相等（值的类型会自动转换）
===：全等（值和类型都相等）
!=：不相等
!==：不全等
>：大于
<：小于
>=：大于等于
<=：小于等于

遇到非数值时，会先转换为数值后再比较，当遇到字符串时，会逐位地比较字符的 Unicode 编码。

示例：

1
let a = 5;
2
let b = '5';
3
let c = 10;
4

5
console.log(a == b);   // 输出 true，值相等
6
console.log(a === b);  // 输出 false，类型不相等
7
console.log(a != b);   // 输出 false，值相等
8
console.log(a !== b);  // 输出 true，类型不相等
9
console.log(a > c);  // 输出 false，5 < 10
10
console.log(a < c);  // 输出 true，5 < 10
11
console.log(a >= c);  // 输出 false，5 <= 10
12
console.log(a <= c);  // 输出 true，5 <= 10

逻辑运算符

逻辑运算符在处理操作数时，会将其转化为布尔值，并返回这个操作数的初始值。

`&&`：逻辑与

用于判断条件是否同时为 true。如果所有条件都为 true，那么整个表达式的结果为 true；否则，结果为 false。与运算从左到右依次寻找第一个 false ，如果找到 false 就停止计算，并返回这个操作数的初始值（短路求值）。如果最终没有 false 则返回最后一个 true。

`||`：逻辑或

用于判断条件中至少有一个为 true 的情况。如果至少有一个条件为 true，那么整个表达式的结果为 true；如果所有条件都为 false，结果为 false。或运算从左到右依次寻找第一个 true ，如果找到 true 就停止计算，并返回这个操作数的初始值（短路求值）。如果最终没有 true 则返回最后一个 false。

`!`：逻辑非

用于对一个布尔值进行取反操作。如果一个值为 true，使用逻辑非运算符将其取反为 false；如果一个值为 false，将其取反为 true。逻辑非还可以用于将非布尔值转换为布尔值。它会将任何非 null、undefined、0、NaN、""（空字符串）的值转换为 true，而上述值本身都被转换为 false。

示例：

1
let a = true;
2
let b = false;
3
let c = "hello";
4
let d = null;
5

6
console.log(a && b);  // 输出 false
7
console.log(c && d);  // 输出 null
8
console.log(a || b);  // 输出 true
9
console.log(c || d);  // 输出 hello
10
console.log(!a);      // 输出 false
11
console.log(!d);      // 输出 true

三元运算符

condition ? expr1 : expr2：如果条件为真，则返回 expr1，否则返回 expr2。

示例：

1
let age = 18;
2
let status = (age >= 18) ? '成年人' : '未成年人';
3
console.log(status);  // 输出 '成年人'

空值合并运算符

空值合并运算符（Nullish Coalescing Operator）是用于处理默认值的运算符，通常用于确保一个变量具有非空（非 null 和非 undefined）的值。该运算符的语法是 ??。

当使用空值合并运算符时，它会返回第一个定义（非 null 和非 undefined）的操作数，如果第一个操作数为 null 或 undefined，则返回第二个操作数。

示例：

1
let num1 = 0;
2
let num2 = 1;
3
let result = num1 ?? num2;
4
console.log(result);  // 输出 0，因为 num 不为 null 或 undefined
5

6
let user;
7
console.log(user ?? "匿名"); // 输出 匿名，因为 user 未定义

位运算符

&：按位与
|：按位或
^：按位异或
~：按位取反
<<：左移
>>：右移
>>>：无符号右移

示例：

1
let a = 5;  // 二进制：0101
2
let b = 3;  // 二进制：0011
3

4
console.log(a & b);   // 输出 1（按位与）
5
console.log(a | b);   // 输出 7（按位或）
6
console.log(a ^ b);   // 输出 6（按位异或）
7
console.log(~a);      // 输出 -6（按位取反）
8
console.log(a << 1);  // 输出 10（左移）
9
console.log(a >> 1);  // 输出 2（右移）

其他运算符

typeof：返回一个字符串，表示未经计算的操作数的类型。
instanceof：用于测试对象是否是指定类型的实例。

示例：

1
let str = 'Hello';
2
console.log(typeof str);  // 输出 'string'
3

4
let arr = [1, 2, 3];
5
console.log(arr instanceof Array);  // 输出 true

`+`（加号）

在 JavaScript 中，加号 + 有多重用途，包括数学运算、字符串拼接和一元操作。

数学运算

示例：

1
let a = 5;
2
let b = 3;
3
let result = a + b;
4
console.log(result);  // 输出 8

如果都是数字，+ 被用于执行数学加法。

字符串拼接

示例：

1
let str1 = 'Hello';
2
let str2 = ' World';
3
let result = str1 + str2;
4
console.log(result);  // 输出 'Hello World'

如果其中一个操作数是字符串，+ 将执行字符串拼接。

一元加法运算符

示例：

1
let str = '42';
2
let num = +str;
3
console.log(num);  // 输出 42

在单个操作数前使用 +，它可以将操作数转换为数字，这是一元加法运算符的功能。

类型转换

示例：

1
let num = 42;
2
let str = '10';
3
let result = num + str;  // 隐式类型转换（类型强制转换）
4
console.log(result);  // 输出 '4210'

如果其中一个操作数是字符串，+ 会进行类型转换，将其他操作数转换为字符串，然后执行字符串拼接。

连接数组

示例：

1
let arr1 = [1, 2, 3];
2
let arr2 = [4, 5, 6];
3
let result = arr1 + arr2;
4
console.log(result);  // 输出 '1,2,34,5,6'

当一个操作数是数组时，+ 会将数组转换为字符串，然后进行字符串拼接。

特殊情况

示例：

1
let specialResult1 = '1' + 2 + 3;
2
console.log(specialResult1);  // 输出 '123'
3

4
let specialResult2 =  2 + 3 + '1';
5
console.log(specialResult2);  // 输出 '51'

specialResult1，因为字符串出现在 + 的最左边，后续的数字会被当作字符串进行拼接。 specialResult2，因为字符串出现在 + 的最右边，之前的数字会先进行数学运算后再进行拼接。

`-`（减号）

在 JavaScript 中，减号 - 是一个用于执行数学减法的运算符。

数学减法

示例：

1
let a = 5;
2
let b = 3;
3
let result = a - b;
4
console.log(result);  // 输出 2

如果都是数字，- 被用于执行数学减法。

一元减法运算符

示例：

1
let num = 42;
2
let result = -num;
3
console.log(result);  // 输出 -42

在单个操作数前使用 -，它可以执行一元减法运算，将操作数变为其相反数。

类型转换

示例：

1
let num1 = 42;
2
let str = '10';
3
let result = num1 - str;
4
console.log(result);  // 输出 32

如果其中一个操作数是字符串，- 会进行类型转换，将其他操作数转换为数字，然后执行数学减法。

特殊情况

示例：

1
let specialResult = '10' - 2;
2
console.log(specialResult);  // 输出 8

在这个特殊的情况下，因为字符串中的内容可以被成功转换为数字，- 会执行数学减法。

`=、==、===`（赋值、宽松相等、严格相等）

在 JavaScript 中，等号 = 是赋值运算符，而 == 和 === 是比较运算符。宽松相等会将两个操作数转换为相同类型，然后再进行比较。在条件判断中，通常使用 === 进行严格相等性比较，因为它不会进行类型转换。

赋值运算符

= 用于将右侧的值赋给左侧的变量。

示例：

1
let x = 5;
2
let y = 'Hello';
3
console.log(x);  // 输出 5
4
console.log(y);  // 输出 'Hello'

在这个例子中，= 将右侧的值赋给左侧的变量 x 和 y。

比较运算符

== 和 === 用于比较两个值的相等性。

示例：

1
let a = 5;
2
let b = '5';
3

4
console.log(a == b);   // 输出 true
5
console.log(a === b);  // 输出 false

== 进行相等性比较时，会进行类型转换，null == undefined 输出 true。 === 进行相等性比较时，要求值和类型都相等，null === undefined 输出 false。 NaN 不等于任何值，包括 NaN 本身。

`++`、`--`（自增、自减）

在 JavaScript 中，自增（++）和自减（--）是用于增加或减少变量值的操作符。

自增运算符 (++)

使用后会使得原来的变量立刻增加 1。前置自增，返回自增后的值（新值）；后置自增，返回自增前的值（旧值）；

前置自增示例：

1
let a = 5;
2
// 前置自增，先增加 1，然后再使用新的值
3
let b = ++a;
4
console.log(b);  // 输出 6
5
console.log(a);  // 输出 6

在这个例子中，a 先增加了 1，然后 b 获取了新的 a 值（6）。

后置自增示例：

1
let x = 5;
2
// 后置自增，先使用当前值，然后再增加 1
3
let y = x++;
4
console.log(y);  // 输出 5
5
console.log(x);  // 输出 6

在这个例子中，y 先获得了 x 的当前值（5），然后 x 的值增加了 1。

自减运算符 (—)

使用后会使得原来的变量立刻减少 1。前置自减，返回自减后的值（新值）；后置自减，返回自减前的值（旧值）；

前置自减示例：

1
let p = 10;
2
// 前置自减，先减少 1，然后再使用新的值
3
let q = --p;
4
console.log(q);  // 输出 9
5
console.log(p);  // 输出 9

在这个例子中，p 先减少了 1，然后 q 获取了新的 p 值（9）。

后置自减示例：

1
let m = 8;
2
// 后置自减，先使用当前值，然后再减少 1
3
let n = m--;
4
console.log(n);  // 输出 8
5
console.log(m);  // 输出 7

在这个例子中，n 先获得了 m 的当前值（8），然后 m 的值减少了 1。

运算符优先级：

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_precedence

算术运算符

赋值运算符

比较运算符

逻辑运算符

&&：逻辑与

||：逻辑或

!：逻辑非

三元运算符

空值合并运算符

位运算符

其他运算符

+（加号）

数学运算

字符串拼接

一元加法运算符

类型转换

连接数组

特殊情况

-（减号）

数学减法

一元减法运算符

类型转换

特殊情况

=、==、===（赋值、宽松相等、严格相等）

赋值运算符

比较运算符

++、--（自增、自减）

自增运算符 (++)

自减运算符 (—)

运算符优先级：

评论

`&&`：逻辑与

`||`：逻辑或

`!`：逻辑非

`+`（加号）

`-`（减号）

`=、==、===`（赋值、宽松相等、严格相等）

`++`、`--`（自增、自减）