09-运算符大全

运算符大全：算术、比较、逻辑与位运算

运算符是 JavaScript 的"动词"，它们让数据动起来。掌握各种运算符的用法和优先级，能让你写出更简洁、更高效的代码。

学习目标

读完本文，你将学会：

• 算术运算符、赋值运算符、比较运算符的使用
• 逻辑运算符（&&、||、!）的短路求值
• 三元运算符、空值合并运算符和可选链运算符
• 运算符优先级和结合性

一、算术运算符

1.1 基本算术运算

// 注意：JavaScript 的除法总是返回浮点数5/2;// 2.5（不是 2）// 取余运算7%3;// 1（7 除以 3 余 1）10%2;// 0（10 能被 2 整除）// 幂运算（ES2016）2**3;// 8（2 的 3 次方）Math.pow(2,3);// 8（等效写法）

1.2 自增和自减

leta=5;// 后置自增：先使用值，再自增letb=a++;// b = 5, 然后 a 变成 6console.log(b);// 5console.log(a);// 6letc=5;// 前置自增：先自增，再使用值letd=++c;// c 先变成 6，然后 d = 6console.log(d);// 6console.log(c);// 6

建议：在独立语句中使用自增/自减，不要嵌在复杂表达式中，容易出错。

// ✅ 好的写法letcount=0;count++;// ❌ 容易混淆的写法letresult=array[i++]+array[++i]*array[i++];// 不要这样写！

1.3 一元运算符

// 正号可以快速转数字conststr="42";+str;// 42// 负号constnum=10;-num;// -10

二、赋值运算符

2.1 基本赋值

letx=10;// 把 10 赋值给 x

2.2 复合赋值运算符

letscore=100;score+=10;// score = 110score-=5;// score = 105score*=2;// score = 210score/=3;// score = 70

2.3 解构赋值（ES6）

// 数组解构const[a,b]=[1,2];console.log(a);// 1console.log(b);// 2// 对象解构const{name,age}={name:"小明",age:18};console.log(name);// "小明"console.log(age);// 18// 带默认值const[x,y=10]=[5];console.log(y);// 10（默认值）// 交换变量letm=1,n=2;[m,n]=[n,m];// m = 2, n = 1

三、比较运算符

3.1 基本比较

再次强调：始终使用===和!==，不要用==和!=。

3.2 字符串比较

字符串按字典顺序（Unicode 编码）比较：

"apple"<"banana";// true（a 在 b 前面）"10"<"2";// true（"1" 的 Unicode 码小于 "2"）"Z">"A";// true

3.3 特殊值的比较

NaN===NaN;// falsenull===undefined;// false+0===-0;// true

四、逻辑运算符

4.1 基本逻辑运算

// &&（与）true&&true;// truetrue&&false;// falsefalse&&true;// false（左边为 false，右边不会执行）// ||（或）true||false;// truetrue||true;// truefalse||true;// truefalse||false;// false// !（非）!true;// false!false;// true!!true;// true（双非转布尔值）

4.2 短路求值（重要！）

逻辑运算符不会总是计算两边，而是"短路"：

&& 的短路：左边为假，直接返回左边，右边不执行。

false&&console.log("不会执行");// 返回 false，console.log 不会执行// 实用场景：条件执行isReady&&startApp();// isReady 为 true 时才执行 startApp()// 等价于if(isReady){startApp();}

|| 的短路：左边为真，直接返回左边，右边不执行。

true||console.log("不会执行");// 返回 true，console.log 不会执行// 实用场景：设置默认值constuserName=inputName||"匿名用户";// inputName 为假值时，使用 "匿名用户"// 等价于constuserName=inputName?inputName:"匿名用户";

4.3 逻辑运算符返回原始值

JavaScript 的逻辑运算符返回的是原始值，不是布尔值：

// && 返回第一个假值，或最后一个真值"hello"&&"world";// "world"（两边都是真值，返回最后一个）"hello"&&0;// 0（0 是假值，返回 0）null&&"world";// null（null 是假值，返回 null）// || 返回第一个真值，或最后一个假值"hello"||"world";// "hello"（"hello" 是真值，直接返回）0||"world";// "world"（0 是假值，返回 "world"）null||undefined;// undefined（都是假值，返回最后一个）

实用技巧：

// 获取第一个真值constport=envPort||configPort||3000;// 条件赋值constdisplayName=user.nickname||user.name||"匿名";// 确保值存在后才执行user&&user.profile&&console.log(user.profile.bio);

五、三元运算符

5.1 基本语法

条件?条件为真时的值:条件为假时的值

constage=20;conststatus=age>=18?"成年":"未成年";console.log(status);// "成年"

5.2 嵌套三元运算符

可以嵌套，但嵌套太多会降低可读性：

constscore=85;constgrade=score>=90?"A":score>=80?"B":score>=60?"C":"D";// 上面的代码等价于：letgrade;if(score>=90){grade="A";}elseif(score>=80){grade="B";}elseif(score>=60){grade="C";}else{grade="D";}

建议：嵌套不要超过 2 层，否则用 if-else 更清晰。

六、ES6+ 新增运算符

6.1 空值合并运算符 ??（ES2020）

??只在左边是null或undefined时才返回右边，其他假值（0、""、false）不会触发。

// || 的问题：0 和 "" 会被当作假值constcount=0;constresult1=count||10;// 10（0 被当作假值，不符合预期）// ?? 只判断 null 和 undefinedconstresult2=count??10;// 0（0 不是 null/undefined，所以返回 0）// 更多示例null??"default";// "default"undefined??"default";// "default"0??"default";// 0""??"default";// ""false??"default";// false

6.2 可选链运算符 ?.（ES2020）

安全地访问深层嵌套对象的属性，避免 “Cannot read property of undefined” 错误。

constuser={profile:{name:"小明"}};// 传统写法（繁琐）constcity=user&&user.address&&user.address.city;// 可选链写法（简洁）constcity=user?.address?.city;// undefined（不会报错）// 更多示例constname=user?.profile?.name;// "小明"constzip=user?.address?.zipcode;// undefined（不会报错）constphone=user?.contacts?.[0]?.phone;// undefined

6.3 逻辑赋值运算符（ES2021）

// ||=：只在 x 为假值时赋值letconfig=null;config||={theme:"dark"};// config = { theme: "dark" }letcount=0;count||=10;// count 仍然是 0（因为 0 是假值，但 ||= 会把 0 覆盖）// ??=：只在 x 为 null/undefined 时赋值（更安全）letnum=0;num??=10;// num 仍然是 0（0 不是 null/undefined）

七、位运算符（了解即可）

位运算符直接操作二进制位，日常开发中使用较少。

实用技巧：用位运算取整

// 位运算取整（向下取整）~~3.14;// 33.14|0;// 33.14<<0;// 3// 判断奇偶num&1;// 0 表示偶数，1 表示奇数

八、运算符优先级

当多个运算符同时出现时，优先级高的先计算。

8.1 优先级速查表（从高到低）

8.2 优先级示例

// 不加括号2+3*4;// 14（先算 3*4=12，再算 2+12）// 加括号改变优先级(2+3)*4;// 20（先算 2+3=5，再算 5*4）// 复杂的优先级constresult=a+b>c*d&&e===f;// 实际执行顺序：// 1. c * d// 2. a + b// 3. (a + b) > (c * d)// 4. e === f// 5. (步骤3) && (步骤4)

建议：不确定优先级时，加括号。可读性比省两个字符更重要。

九、常见误区与注意点

十、动手练习

练习 1：逻辑运算符输出

以下表达式返回什么？

"hello"&&"world";"hello"&&"";0||"default";null??"default";0??"default";""||"anonymous";""??"anonymous";

"hello"&&"world";// "world"（两边都真，返回最后一个）"hello"&&"";// ""（空字符串是假值，返回它）0||"default";// "default"（0 是假值，返回右边）null??"default";// "default"（null 触发 ??）0??"default";// 0（0 不是 null/undefined，不触发 ??）""||"anonymous";// "anonymous"（空字符串是假值，触发 ||）""??"anonymous";// ""（空字符串不是 null/undefined，不触发 ??）

练习 2：用三元运算符简化代码

将以下 if-else 改写成三元运算符：

letresult;if(score>=60){result="及格";}else{result="不及格";}

constresult=score>=60?"及格":"不及格";

练习 3：用可选链安全访问

安全地获取user.profile.address.city，避免报错：

constuser={profile:{// address 可能不存在}};

// 传统写法constcity=user&&user.profile&&user.profile.address&&user.profile.address.city;// 可选链写法constcity=user?.profile?.address?.city;// 配合 ?? 设置默认值constcity=user?.profile?.address?.city??"未知城市";

十一、AI 辅助学习

11.1 本节知识点的 AI 提问模板

【背景】我是 JavaScript 初学者，正在学习第 09 篇"运算符大全"。 我已经了解算术、比较、逻辑运算符的基本用法。 【问题】我理解短路求值的概念，但我不理解： 为什么 JavaScript 设计者要让 && 和 || 返回原始值而不是布尔值？ 这不会导致类型混乱吗？ 【期望】请解释 && 和 || 返回原始值的设计动机， 列举 3 个因为这种设计而变得简洁的代码场景， 最后说明在使用时如何避免类型相关的 bug。

11.2 用 AI 验证你的理解

• 问 AI：“a ?? b || c这个表达式，运算符优先级是怎样的？先算哪个？”
• 让 AI 出 3 道关于运算符优先级的题目，测试是否需要加括号
• 问 AI：“?.和??可以组合使用吗？给一个实际开发中的例子。”

11.3 警惕 AI 的常见错误

• AI 有时会混淆??和||的行为差异，注意验证
• AI 可能会给出优先级错误的表达式，不确定时自己加括号
• AI 可能会推荐已废弃的写法（如用==做比较），坚持使用===

十二、配套代码

本文示例代码位于：CODE/09-运算符/

十三、本章小结

• 算术运算符：+ - * / % **，注意+的字符串拼接特性
• 自增自减：++--，前置和后置在赋值时有区别
• 比较运算符：始终用===和!==
• 逻辑运算符：&&||!，支持短路求值，返回原始值
• 三元运算符：条件 ? 值1 : 值2，嵌套不要超过 2 层
• ??：只在null/undefined时取默认值，比||更精确
• ?.：安全访问深层属性，避免 undefined 报错
• 优先级：不确定就加括号，可读性第一

十四、下篇预告

下一篇是《流程控制：if、switch、循环结构》，你将学到：

• if/else if/else 的条件判断
• switch case 的多分支选择
• for、while、do…while 循环
• break 和 continue 的使用
• 嵌套循环和循环优化

如果本文对你有帮助，欢迎点赞、收藏、关注专栏。有任何问题可以在评论区交流！