素材网站的素材可以商用吗自动外链工具
目录
JavaScript运算符
一、运算符分类与优先级
1. 运算符优先级表
二、算术运算符
1. 基础算术运算
2. 自增/自减运算符
三、比较运算符
1. 基础比较
2. 相等性判断
四、逻辑运算符
1. 基础逻辑运算
2. 短路求值（Short-Circuiting）
3. 逻辑赋值运算符（ES2021+）
五、位运算符
1. 基础位运算
六、其他运算符
1. 三元条件运算符
2. 空值合并运算符（??）
3. 可选链运算符（?.）
4. 展开运算符（...）
七、常见陷阱与最佳实践
1. == 的隐式类型转换
2. 浮点数精度问题
3. 短路求值的灵活应用
JavaScript逻辑中断
一、逻辑与 && 的短路
1. 假值列表
2. 示例
二、逻辑或 || 的短路
三、空值合并 ?? 的精准短路
四、实际应用场景
1. 条件执行函数
2. 链式属性访问
3. 组合使用
五、注意事项
六、总结
JavaScript运算符
一、运算符分类与优先级
1. 运算符优先级表
优先级从高到低排序（部分常见运算符）：
| 优先级 | 运算符 | 说明 |
|---|---|---|
| 1 | () | 括号（强制优先级） |
| 2 | ++, --, !, ~, typeof | 自增、自减、逻辑非、按位非等 |
| 3 | ** | 指数（ES6+） |
| 4 | *, /, % | 乘、除、取模 |
| 5 | +, - | 加、减 |
| 6 | <<, >>, >>> | 位左移、右移、无符号右移 |
| 7 | <, <=, >, >= | 比较运算符 |
| 8 | ==, !=, ===, !== | 相等性判断 |
| 9 | & | 按位与 |
| 10 | ^ | 按位异或 |
| 11 | | | 按位或 |
| 12 | && | 逻辑与 |
| 13 | || | 逻辑或 |
| 14 | ?? | 空值合并（ES2020+） |
| 15 | ?: | 三元条件运算符 |
| 16 | =, +=, -=, **= 等 | 赋值运算符 |
| 17 | , | 逗号运算符（返回最后一个表达式） |
二、算术运算符
1. 基础算术运算
| 运算符 | 名称 | 示例 | 说明 |
|---|---|---|---|
+ | 加法 | 3 + 2 → 5 | 数值相加或字符串拼接 |
- | 减法 | 5 - 3 → 2 | |
* | 乘法 | 2 * 3 → 6 | |
/ | 除法 | 6 / 2 → 3 | 结果为浮点数（如 5 / 2 → 2.5） |
% | 取模 | 7 % 3 → 1 | 返回除法余数 |
** | 指数 | 2 ** 3 → 8 | ES6+ 新增，等价于 Math.pow() |
2. 自增/自减运算符
| 运算符 | 示例 | 说明 |
|---|---|---|
++ | let a = 1; a++ | 后置自增：先返回值，再自增 → a 变为 2 |
-- | let b = 2; --b | 前置自减：先自减，再返回值 → b 变为 1 |
let i = 1
console.log(i++ + ++i + i) //7注意：避免在复杂表达式中混用前置和后置形式，易引发歧义。
三、比较运算符
1. 基础比较
| 运算符 | 名称 | 示例 | 说明 |
|---|---|---|---|
> | 大于 | 5 > 3 → true | |
< | 小于 | 2 < 1 → false | |
>= | 大于等于 | 5 >= 5 → true | |
<= | 小于等于 | 3 <= 2 → false |
2. 相等性判断
| 运算符 | 名称 | 示例 | 说明 |
|---|---|---|---|
== | 宽松相等 | "5" == 5 → true | 类型不同时尝试转换再比较 |
=== | 严格相等 | "5" === 5 → false | 值和类型均相同才返回 true |
!= | 宽松不等 | "5" != 5 → false | 等效于 !(a == b) |
!== | 严格不等 | "5" !== 5 → true | 等效于 !(a === b) |
最佳实践：始终优先使用 === 和 !==，避免隐式类型转换导致的意外结果。
四、逻辑运算符
1. 基础逻辑运算
| 运算符 | 名称 | 示例 | 说明 |
|---|---|---|---|
&& | 逻辑与 | true && false → false | 两边为 true 才返回 true |
|| | 逻辑或 | true || false → true | 任一边为 true 即返回 true |
! | 逻辑非 | !true → false | 取反 |
2. 短路求值（Short-Circuiting）
-
&&短路：若左侧为假，直接返回左侧值，否则返回右侧值。console.log(0 && "Hello"); // 0（左侧为假，直接返回） console.log(2 && "Hello"); // "Hello" -
||短路：若左侧为真，直接返回左侧值，否则返回右侧值。console.log("" || "Default"); // "Default" console.log("Hello" || "Default"); // "Hello"
3. 逻辑赋值运算符（ES2021+）
| 运算符 | 示例 | 等效于 |
|---|---|---|
&&= | a &&= b | a = a && b |
||= | a ||= b | a = a || b |
??= | a ??= b | a = a ?? b（空值合并赋值） |
五、位运算符
1. 基础位运算
| 运算符 | 名称 | 示例 | 说明 |
|---|---|---|---|
& | 按位与 | 5 & 3 → 1 | 二进制位均为 1 时结果为 1 |
| | 按位或 | 5 | 3 → 7 | 二进制位任一为 1 则结果为 1 |
^ | 按位异或 | 5 ^ 3 → 6 | 二进制位不同则结果为 1 |
~ | 按位非 | ~5 → -6 | 取反码（二进制位取反） |
<< | 左移 | 5 << 1 → 10 | 左移指定位数，右侧补 0 |
>> | 右移（有符号） | -5 >> 1 → -3 | 保留符号位，右侧补 0 |
>>> | 右移（无符号） | -5 >>> 1 → 2147483645 | 忽略符号位，左侧补 0 |
六、其他运算符
1. 三元条件运算符
-
语法：
condition ? expr1 : expr2const status = age >= 18 ? "Adult" : "Minor";
2. 空值合并运算符（??）
-
作用：左侧为
null或undefined时返回右侧值，否则返回左侧值。const value = input ?? "default"; // 等效于 input !== null && input !== undefined ? input : "default"
3. 可选链运算符（?.）
-
作用：安全访问嵌套对象属性，避免因中间属性不存在而报错。
const city = user?.address?.city; // 若 user 或 address 为 null/undefined，返回 undefined
4. 展开运算符（...）
-
数组展开：
const arr1 = [1, 2]; const arr2 = [...arr1, 3]; // [1, 2, 3] -
对象展开（ES2018+）：
const obj1 = { x: 1 }; const obj2 = { ...obj1, y: 2 }; // { x: 1, y: 2 }
七、常见陷阱与最佳实践
1. == 的隐式类型转换
console.log([] == ![]);
// true（[] 转为 0，![] 转为 false → 0）解决方案：始终使用 === 和 !==。
2. 浮点数精度问题
console.log(0.1 + 0.2 === 0.3);
// false（实际结果为 0.30000000000000004）解决方案：使用 toFixed() 或第三方库（如 decimal.js）处理精度。
3. 短路求值的灵活应用
// 条件执行函数
function init() { console.log("Initialized"); }
let isInit = false;
isInit || init(); // 若未初始化，则调用 init()
JavaScript逻辑中断
一、逻辑与 && 的短路
规则：当左侧表达式为 假值（falsy） 时，直接返回左侧值，不再执行右侧。
1. 假值列表
-
false -
0、-0、0n（BigInt 零） -
""（空字符串） -
null -
undefined -
NaN
2. 示例
// 示例 1：短路发生
console.log(0 && alert("不会执行")); // 输出 0（左侧为假，直接返回 0）// 示例 2：未短路
console.log(1 && "Hello"); // 输出 "Hello"（左侧为真，返回右侧值）// 实际应用：条件渲染（React/Vue）
isLoggedIn && <Dashboard />;二、逻辑或 || 的短路
规则：当左侧表达式为 真值（truthy） 时，直接返回左侧值，不再执行右侧。
示例
// 示例 1：短路发生
console.log("Hello" || alert("不会执行")); // 输出 "Hello"// 示例 2：未短路
console.log(0 || "默认值"); // 输出 "默认值"// 实际应用：设置默认值（旧版写法）
const port = config.port || 3000; // 注意：0 会被覆盖！三、空值合并 ?? 的精准短路
规则：仅当左侧为 null 或 undefined 时，才返回右侧值。
示例
// 示例 1：不短路
console.log(0 ?? "默认值"); // 输出 0（保留 0）// 示例 2：短路发生
console.log(null ?? "备用值"); // 输出 "备用值"// 实际应用：精准默认值（现代推荐）
const port = config.port ?? 3000; // 允许 0 或 ""四、实际应用场景
1. 条件执行函数
// 仅当用户存在时调用函数
user.isAdmin && showAdminPanel();// 替代写法
if (user.isAdmin) showAdminPanel();2. 链式属性访问
// 安全访问嵌套属性（旧版）
const city = user && user.address && user.address.city;// 现代替代方案：可选链操作符 `?.`
const city = user?.address?.city;3. 组合使用
// 复杂条件判断
const result = (condition1 && value1) || (condition2 && value2) ?? fallback;五、注意事项
-
优先级问题
逻辑运算符优先级：&&>||>??，建议用()明确优先级：console.log(true || false && false); // 输出 true（等价于 true || (false && false)) -
副作用控制
短路特性可能导致右侧代码未执行：let x = 0; false && x++; // x 仍为 0 -
避免过度使用
虽然简洁，但过度使用会降低可读性：// ❌ 难以理解 isValid && (isAdmin || isModerator) && submitForm();// ✅ 更清晰 if (isValid && (isAdmin || isModerator)) {submitForm(); }
六、总结
-
&&：用于 必须满足前置条件 的场景（如权限检查）。 -
||：适合旧版默认值，但会覆盖假值（0、""）。 -
??：现代默认值方案，精准处理null/undefined。