顶棒 技术支持 东莞网站建设临夏做网站
引言
在JavaScript编程中，理解运算符、条件语句和循环是构建程序逻辑的基础。这些核心概念让代码能够做决策、重复执行任务并处理各种情况。本文将深入浅出地介绍这些关键概念，并通过实际示例帮助您掌握它们的使用方法。
运算符是执行特定操作的符号，用于操作值（操作数）并返回结果。
JavaScript中常⽤的运算符有：
1、算数运算符
| 运算符 | 描述 | 例子 |
| + | 加法 | 2+1=3 |
| - | 减法 | 5-3=2 |
| * | 乘法 | 6*2=12 |
| / | 除法 | 6/2=3 |
| % | 取模 | 7%2=1 |
| ** | 指数幂 | 2**2=4 |
示例代码：
let a = 10, b = 3;console.log(a + b); // 13，加法
console.log(a - b); // 7，减法
console.log(a * b); // 30，乘法
console.log(a / b); // 3.333...，除法
console.log(a % b); // 1，取模（余数）
console.log(a ** b); // 1000，指数运算
运行结果：
2、递增和递减运算符
如果需要反复给数字变量添加或减去1，可以使⽤递增（++）和递减（ -- ）运算符来完成。
这两个运算符可以放在变量的前面（前缀） 或 后面（后缀），其行为有所不同：
| 写法 | 名称 | 行为 |
| ++variable | 前缀递增 | 先自增，再返回值 |
| variable++ | 后缀递增 | 先返回原值，再自增 |
| --variable | 前缀递减 | 先自减，再返回值 |
| variable-- | 后缀递减 | 先返回原值，再自减 |
示例代码：
// 后置自增
let x = 5;
let y = x++; // 先赋值 5 给 y，然后 x 变成 6
console.log(x); // 6
console.log(y); // 5// 前置自增
let x1 = 5;
let y1 = ++x1; // 先 x 自增为 6，再赋值给 y
console.log(x1); // 6
console.log(y1); // 6// 后置自减
let x2 = 5;
let y2 = x2--; // 先赋值 5 给 y，然后 x 变成 4
console.log(x2); // 4
console.log(y2); // 5// 前置自减
let x3 = 5;
let y3 = --x3; // 先 x 自减为 4，再赋值给 y
console.log(x3); // 4
console.log(y3); // 4运行结果：
●⽐较运算符
在 JavaScript 中，比较运算符（Comparison Operators） 用于比较两个值之间的关系，并返回一个布尔值（true 或 false）。它们常用于条件判断、循环控制等逻辑中。
3、常见比较运算符:
| 运算符 | 描述说明 | 实际案例 | 结果 |
| == | 比较值是否相等（允许类型转换） | 5 == "5" | true |
| === | 比较值和类型是否都相等 | 5 === "5" | false |
| != | 比较值是否不等（允许类型转换） | 10 != "10" | false |
| !== | 比较值或类型是否不同 | 10 !== "10" | true |
| > | 判断 a 是否大于 b | 7 > 5 | true |
| < | 判断 a 是否小于 b | "apple" < "banana" | true |
| >= | 判断 a 是否大于等于 b | 8 >= 8 | true |
| <= | 判断 a 是否小于等于 b | 3 <= 5 | true |
特殊比较示例:
实例代码:
// 比较 NaN 与 NaN
console.log("NaN == NaN:", NaN == NaN); // false
// null 与 undefined 在宽松相等下的比较
console.log("null == undefined:", null == undefined); // true
// null 与 undefined 在严格相等下的比较
console.log("null === undefined:", null === undefined); // false
// 对象之间的比较（引用不同）
console.log("{} == {}:", {} == {}); // false
// 数组之间的比较（引用不同）
console.log("[1] == [1]:", [1] == [1]); // false
// 布尔值与数字的宽松比较
console.log("true == 1:", true == 1); // true
// 空字符串与数字 0 的比较
console.log('"" == 0:', "" == 0); // true
// NaN和任何值都你不相等包括自己，使用Number.isNaN（）来判断
let nan = NaN
console.log(Number.isNaN(nan)运行结果:
4、逻辑运算符
| 运算符 | 描述 | 例子 |
|---|---|---|
| && | and | (x < 10 && y > 1) 为 true |
| || | or | (x==5 || y==5) 为 false |
| ! | not | !(x==y) 为 true |
逻辑运算符与“短路判断”详解
在 JavaScript 中，逻辑运算符 && 和 || 具有“短路”特性，即：如果根据第一个操作数就能确定结果，则不会继续计算第二个操作数。
① &&（逻辑与）—— 短路规则
如果第一个操作数是 假值（falsy），则直接返回第一个操作数，不执行后续。
假值包括：false, 0, "", null, undefined, NaN。
console.log(false && "Hello"); // false
console.log(0 && 100); // 0
console.log("Hi" && "Hello"); // "Hello"
② ||（逻辑或）—— 短路规则
如果第一个操作数是 真值（truthy），则直接返回第一个操作数，不执行后续。
真值包括：非空字符串、非零数字、对象、数组等。
console.log(true || "World"); // true
console.log("Hello" || "World"); // "Hello"
console.log(null || "Default"); // "Default"
5、赋值运算符
| 运算符 | 示例 | 描述 |
| = | a = 5 | 将右侧的值赋给左侧变量 |
| += | a += 5 | 加法后赋值 |
| -= | a -= 5 | 减法后赋值 |
| *= | a *= 5 | 乘法后赋值 |
| /= | a /= 5 | 除法后赋值 |
| %= | a %= 5 | 取模后赋值 |
| **= | a **= 5 | 幂运算后赋值 |
let a = 10;a += 5; // a = 15
a -= 3; // a = 12
a *= 2; // a = 24
a /= 4; // a = 6
a %= 5; // a = 1
a **= 3; // a = 1
6、运算符的优先级
| 优先级 | 运算符 | 顺序 |
| 1 | 小括号 | () |
| 2 | 一元运算符 | ++ -- ! |
| 3 | 算数运算符 | 先*/%后+- |
| 4 | 关系运算符 | > >= < <= |
| 5 | 相等运算符 | == != === !== |
| 6 | 逻辑运算符 | 先&&后|| |
| 7 | 赋值运算符 | = |
| 8 | 逗号运算符 | , |
总结：其实运算符的优先级绝大多数都能够和我们平常的使用习惯相似，不需要特别的去死记硬背，如果我们需要提升摸一个运算的优先级，直接加上小括号就就好了。