---
title: "IT课程 JavaScript基础 040_运算符"
date: 2024-10-30T11:00:00.000Z
tags: ["IT课程", "HTML课程", "CSS课程", "JavaScript课程", "Java课程", "计算机系统与网络", "JavaScript运算符"]
categories: ["学习", "JavaScript基础"]
canonical: https://www.zhaojian.net/it-course-javascript-040/
author: 赵健
---

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

### 算术运算符

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

示例：

```js
let a = 5;
let b = 2;

console.log(a + b);  // 输出 7
console.log(a - b);  // 输出 3
console.log(a * b);  // 输出 10
console.log(a / b);  // 输出 2.5
console.log(a % b);  // 输出 1
console.log(a**b);  // 输出 25
```

***

### 赋值运算符

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

示例：

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

***

### 比较运算符

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

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

示例：

```js
let a = 5;
let b = '5';
let c = 10;

console.log(a == b);   // 输出 true，值相等
console.log(a === b);  // 输出 false，类型不相等
console.log(a != b);   // 输出 false，值相等
console.log(a !== b);  // 输出 true，类型不相等
console.log(a > c);  // 输出 false，5 < 10
console.log(a < c);  // 输出 true，5 < 10
console.log(a >= c);  // 输出 false，5 <= 10
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`。

示例：

```js
let a = true;
let b = false;
let c = "hello";
let d = null;

console.log(a && b);  // 输出 false
console.log(c && d);  // 输出 null
console.log(a || b);  // 输出 true
console.log(c || d);  // 输出 hello
console.log(!a);      // 输出 false
console.log(!d);      // 输出 true
```

***

### 三元运算符

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

示例：

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

***

### 空值合并运算符

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

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

示例：

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

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

***

### 位运算符

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

示例：

```js
let a = 5;  // 二进制：0101
let b = 3;  // 二进制：0011

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

***

### 其他运算符

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

示例：

```js
let str = 'Hello';
console.log(typeof str);  // 输出 'string'

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

***

### `+`（加号）

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

示例：

```js
let a = 5;
let b = 3;
let result = a + b;
console.log(result);  // 输出 8
```

如果都是数字，`+` 被用于执行数学加法。
##### 字符串拼接

示例：

```js
let str1 = 'Hello';
let str2 = ' World';
let result = str1 + str2;
console.log(result);  // 输出 'Hello World'
```

如果其中一个操作数是字符串，`+` 将执行字符串拼接。
##### 一元加法运算符

示例：

```js
let str = '42';
let num = +str;
console.log(num);  // 输出 42
```

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

示例：

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

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

示例：

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

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

示例：

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

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

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

***

### `-`（减号）

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

示例：

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

如果都是数字，`-` 被用于执行数学减法。
##### 一元减法运算符

示例：

```js
let num = 42;
let result = -num;
console.log(result);  // 输出 -42
```

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

示例：

```js
let num1 = 42;
let str = '10';
let result = num1 - str;
console.log(result);  // 输出 32
```

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

示例：

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

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

***

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

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

##### 赋值运算符

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

示例：

```js
let x = 5;
let y = 'Hello';
console.log(x);  // 输出 5
console.log(y);  // 输出 'Hello'
```

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

##### 比较运算符

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

示例：

```js
let a = 5;
let b = '5';

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

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

***

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

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

##### 自增运算符 (++)

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

前置自增示例：

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

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

后置自增示例：

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

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

##### 自减运算符 (--)

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

前置自减示例：

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

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

后置自减示例：

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

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

### 运算符优先级：
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_precedence