一、数字运算符¶

定义：用于执行数学计算的运算符，操作数通常为数值类型，但JavaScript会根据需要自动进行类型转换。

1.1 基础算术运算符¶

运算符	名称	功能描	示例	结果
`+`	加法	数值相加或字符串拼接	`5 + 3`	`8`
`-`	减法	数值相减	`10 - 4`	`6`
`*`	乘法	数值相乘	`2.5 * 4`	`10`
`/`	除法	数值相除（返回浮点数）	`10 / 3`	`3.333...`
`%`	取模	返回除法余数（符号与被除数一致）	`10 % 3` `-10 % 3`	`1` `-1`
`**`	幂运算	计算基数的指数次幂（ES6新增）	`2 ** 3`	`8`

示例代码：

// 加法
console.log(7 + 2);       // 9
console.log("5" + 3);     // "53"（字符串拼接）

// 减法（自动类型转换）
console.log("10" - 4);    // 6

// 除法（浮点数结果）
console.log(8 / 3);       // 2.6666666666666665

// 取模（符号处理）
console.log(10 % -3);     // 1（商为-3，余数=10 - (-3)*(-3) = 1）

// 幂运算
console.log(3 ** 4);      // 81

综合使用案例：

1、创建一个名为css-study的文件夹并使用VSCode打开，再创建一个名为5-1.JavaScript运算符-基础算术运算符.html

<!DOCTYPE html>
<html>
    <script>
        // 加法运算,输出结果为9
        console.log(7 + 2)
        // 加法运算-拼接,输出结果为53
        console.log("5" + 3)

        // 减法运算,输出结果为6
        console.log("10" - 4)

        // 除法运算（浮点数结果）,输出结果为2.666666666
        console.log(8 / 3)

        // 取模运算,输出结果为1
        console.log(10 % -3)

        // 幂运算,输出结果为81
        console.log(3 ** 4)
    </script>
</html>

2、双击【5-1.JavaScript运算符-基础算术运算符.html】后按F12，点击【控制台】可以展示相关运算结果

1.2 一元运算符¶

运算符	名称	功能描述	示例	结果
`++`	自增	变量值加1（前后置行为不同）	`let a=5; a++`	`a=6`
`--`	自减	变量值减1（前后置行为不同）	`let b=3; --b`	`b=2`
`+`	正号	转换操作数为数字	`+"12"`	`12`
`-`	负号	转换操作数为数字并取反	`-"8"`	`-8`

示例代码：

let x = 5;
console.log(x++);  // 输出5，x变为6（后置）
console.log(++x);  // 输出7，x变为7（前置）

let str = "123";
console.log(+str); // 123（数字类型）
console.log(-str); // -123

综合使用案例：

1、创建一个名为css-study的文件夹并使用VSCode打开，再创建一个名为5-2.JavaScript运算符-一元运算符.html

<!DOCTYPE html>
<html>
    <script>
        let x = 5
        // 输出5，x变为6（后置）
        console.log(x++)
        // 输出7，x变为7（前置）
        console.log(++x)
        // 输出6
        console.log(--x)

        let a = 1
        // a -= 1等同于a = a - 1,最后输出结果为0
        a -= 1
        console.log(a)

        let b = 1
        // b += 1等同于b = b + 1,最后输出结果为2
        b += 1
        console.log(b)

        let str = "123"
        // 123（数字类型）
        console.log(+str)
        // -123
        console.log(-str)
    </script>
</html>

2、双击【5-2.JavaScript运算符-一元运算符.html】后按F12，点击【控制台】可以展示相关运算结果

二、比较运算符¶

定义：用于比较两个值的关系，返回布尔值（true/false）。JavaScript存在两种比较模式：宽松比较（允许类型转换）和严格比较（类型和值均需匹配）。

console.log(5 == "5");   // true (值相等)
console.log(5 === "5");  // false (严格相等)
console.log(5 > 3);      // true
console.log(5 != 3);     // true

2.1 基础比较运算符¶

运算符	名称	比较规则	示例	结果
`==`	等于	值相等（允许类型转换）	`5 == "5"`	`true`
`===`	严格等于	值和类型均相等	`5 === "5"`	`false`
`!=`	不等于	值不等（允许类型转换）	`5 != "6"`	`true`
`!==`	严格不等于	值或类型不同	`5 !== "5"`	`true`
`>`	大于	左值是否大于右值	`10 > "8"`	`true`
`<`	小于	左值是否小于右值	`"5" < 10`	`true`
`>=`	大于等于	左值是否大于或等于右值	`5 >= 5`	`true`
`<=`	小于等于	左值是否小于或等于右值	`"10" <= 10`	`true`

2.2 特殊比较场景¶

比较表达式	结果	说明
`null == undefined`	`true`	两者在宽松比较中相等
`null === undefined`	`false`	类型不同（null是对象，undefined是undefined）
`NaN == NaN`	`false`	NaN与任何值（包括自身）比较均为false
`"5" == 5`	`true`	字符串转换为数字后比较
`true == 1`	`true`	布尔值true转换为1
`false == 0`	`true`	布尔值false转换为0
`"0" == false`	`true`	字符串"0"和false均转换为0

2.3 比较运算符示例¶

// 类型转换比较
console.log(0 == false);         // true
console.log("" == false);        // true
console.log([] == false);        // true（空数组转换为0）

// 严格比较
console.log(0 === false);        // false（类型不同）
console.log(null === undefined); // false（类型不同）

// NaN处理
console.log(NaN === NaN);        // false
console.log(isNaN(NaN));         // true（正确检测方法）

// 对象比较（比较引用地址）
const obj1 = {a: 1};
const obj2 = {a: 1};
console.log(obj1 == obj2);       // false（不同内存地址）

综合使用案例

1、创建一个名为css-study的文件夹并使用VSCode打开，再创建一个名为5-3.JavaScript运算符-比较运算符.html

<!DOCTYPE html>
<html>
    <script>
        // 类型转换比较
        // 输出true
        console.log(0 == false)
        // 输出true
        console.log("" == false)
        // 输出true
        console.log([] == false)

        // 严格比较
        // 输出false
        console.log(0 === false)
        // 输出false
        console.log(null === undefined)

        // NaN处理
        // 输出false
        console.log(NaN === NaN)
        // 输出true
        console.log(isNaN(NaN))

        // 对象比较
        // 输出false
        const obj1 = {a: 1}
        const obj2 = {a: 1}
        console.log(obj1 == obj2)

    </script>
</html>

2、双击【5-3.JavaScript运算符-比较运算符.html】后按F12，点击【控制台】可以展示相关比较结果

三、逻辑运算符¶

3.1 逻辑与（&&）¶

定义：当且仅当所有操作数均为真值（Truthy）时返回最后一个真值，否则返回第一个假值（Falsy）

特点：

短路求值：遇到第一个假值即停止计算
返回结果不一定是布尔值
常用于条件执行和默认值链式判断

3.2 逻辑或（||）¶

定义：返回第一个真值操作数，若全为假值则返回最后一个操作数

特点：

常用于设置默认值
支持短路求值
在ES6之前广泛用于参数默认值处理

3.3 逻辑非（!）¶

定义：将操作数转换为布尔值后取反

特点：

结果始终为布尔类型
双重否定（!!）可用于显式类型转换
常用于条件反转和类型检查

3.4 综合使用案例¶

1、创建一个名为css-study的文件夹并使用VSCode打开，再创建一个名为5-4.JavaScript运算符-逻辑运算符.html

<!DOCTYPE html>
<html>
    <script>
        // 定义初始值
        let a =1
        let b =2
        let c = "xx"
        let d = "yy"
        let e = "1"
        let b1 = false

        // 逻辑非,输出true
        console.log(!b1)
        console.log(b1)

        // 逻辑与,；必须两个都成立才输出true
        console.log(a < b && c != d)

        // 逻辑或,只要有一个成立即可输出true
        console.log(a < b || c == d)
    </script>
</html>

2、双击【5-4.JavaScript运算符-逻辑运算符.html】后按F12，点击【控制台】可以展示相关比较结果

JavaScript 运算符实战：算术、比较与逻辑运算