js 运算符（手把手讲解）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言

在 JavaScript 开发中，运算符（Operators）如同编程世界的“瑞士军刀”，是构建逻辑、处理数据的核心工具。无论是简单的数值计算、条件判断，还是复杂的对象操作，运算符都扮演着不可或缺的角色。对于编程初学者而言，掌握运算符的使用逻辑和特性，能显著提升代码的简洁性和可读性；而中级开发者则可以通过深入理解运算符的底层原理，进一步优化代码性能或解决复杂场景问题。本文将从基础到进阶，系统性地解析 JavaScript 中各类运算符的用法，并通过实际案例帮助读者建立直观认知。

基础运算符：数值与逻辑的“基础工具箱”

算术运算符：数值计算的“核心武器”

JavaScript 的算术运算符包括加法（+）、减法（-）、乘法（*）、除法（/）、取余（%）等，它们是数学运算的基础。例如：

let a = 10 + 5; // 加法  
let b = 20 % 3; // 取余，结果为 2  

进阶技巧：

• ** 运算符可实现幂运算（如 2 ** 3 等同于 8），这在数学公式中非常实用。
• 隐式类型转换需谨慎：若用 + 连接字符串与数字（如 "10" + 20），结果会是字符串 "1020"，而非数值 30。

赋值运算符：变量的“快捷通道”

赋值运算符简化了变量更新的流程。例如：

let x = 5;  
x += 3; // 等同于 x = x + 3，结果为 8  
x *= 2; // 结果为 16  

扩展应用：
复合赋值运算符（如 +=、-=）能直接修改变量值，避免重复引用变量名，尤其在循环或事件处理中能减少代码冗余。

比较运算符：条件判断的“裁判官”

比较运算符用于判断两个值或表达式的关系，返回布尔值（true 或 false）。

相等性比较：严格与宽松的“较量”

• 严格相等（===）：要求类型和值完全一致。

  3 === "3"; // false，类型不同（number vs string）  
  

• 宽松相等（==）：会尝试类型转换后再比较，可能引发意外结果：

  0 == ""; // true，因空字符串转为 0  
  

比喻说明：
若将 == 比作“宽容的裁判”，它会主动调整双方条件让比赛继续；而 === 则是“严格的裁判”，只允许相同类别的选手对决。

关系运算符：大小与顺序的“裁判”

>、<、>=、<= 用于数值或可排序类型的比较：

let age = 18;  
age >= 18; // true，符合成年条件  

注意：
字符串比较基于 Unicode 码点顺序（如 "apple" < "banana" 为 true），而非字面长度或含义。

逻辑运算符：条件组合的“电路开关”

逻辑运算符（&&、||、!）用于构建复杂条件逻辑，类似电路中的“与门”“或门”和“非门”。

短路求值特性：高效代码的“捷径”

JavaScript 的逻辑运算符具有短路特性：

• && 若左值为“假”（falsy），直接返回左值，否则返回右值。
• || 若左值为“真”（truthy），直接返回左值，否则返回右值。
  案例：

// 用 || 提供默认值  
let name = inputName || "Guest"; // 若 inputName 为 null/空字符串，使用 "Guest"  

三元运算符：条件表达式的“速写工具”

condition ? expr1 : expr2 是逻辑运算符的扩展，能替代简单的 if-else：

let result = (score >= 60) ? "Pass" : "Fail";  

位运算符：底层操作的“二进制魔术师”

位运算符对 32 位二进制数进行操作，常用于底层优化或位掩码场景。

常用位运算符示例

实际应用：
位运算常用于状态管理（如用位掩码表示权限层级）或优化性能（如 x << 1 比 x * 2 更快）。

特殊运算符：语言特性的“隐藏彩蛋”

new 运算符：对象创建的“工厂”

通过 new 关键字调用构造函数生成新对象：

function Person(name) {  
  this.name = name;  
}  
let alice = new Person("Alice"); // 创建实例  

delete 运算符：属性删除的“橡皮擦”

用于删除对象属性：

let obj = { key: "value" };  
delete obj.key; // 删除后 obj 变为空对象  

注意：
delete 对于不可配置的属性（如内置对象属性）无效，且不建议频繁使用，可能影响性能。

运算符优先级：规则背后的“隐形秩序”

运算符优先级决定了表达式中运算的执行顺序。例如：

5 + 3 * 2 // 结果为 11（先执行乘法）  

记忆技巧：
可通过“括号优先”原则显式控制顺序，避免因优先级混乱导致的逻辑错误。

实战案例：运算符的“多面手”应用

案例 1：用位运算优化性能

// 传统方法计算 2 的 10 次方  
let pow = 2 ** 10; // 1024  
// 位运算替代方案（左移 10 位相当于乘以 2^10）  
let powBit = 1 << 10; // 同样得到 1024，效率更高  

案例 2：逻辑运算符的“链式条件”

// 检查用户是否为 VIP 且余额充足  
if (user.isVIP && user.balance >= 100) {  
  // 提供优惠服务  
}  

结论

JavaScript 运算符是开发者构建功能、优化逻辑的基石。从基础的算术运算到进阶的位操作，每类运算符都有其独特的使用场景和性能特性。对于初学者，建议从核心运算符（如 ===、&&、+）开始练习，并逐步探索短路求值、位运算等进阶用法；中级开发者则可结合实际项目，通过运算符组合实现简洁高效的代码逻辑。记住，理解运算符的本质是“工具”，而非“规则”，灵活运用才能真正释放它们的潜力。

掌握这些运算符后，不妨尝试重构现有代码，用更少的代码行实现更复杂的功能——这正是 JavaScript 运算符赋予开发者的核心竞争力。