在JavaScript中，双竖线 被称为逻辑或运算符，它主要用于执行布尔逻辑判断或提供默认值回退机制，其核心行为是“短路求值”，即只要第一个操作数为真，就返回该值，不再计算第二个操作数。
JS中双竖线符号的基础逻辑与运行机制
布尔逻辑中的真值判断
在JavaScript的底层逻辑里， 不仅仅是一个简单的“或者”符号，它是一个具有智能判断能力的运算符，与其他强类型语言不同，JavaScript在处理非布尔值时，会先将操作数转换为布尔值进行判断，但返回的却是原始的操作数值，这种特性使得 在实际开发中变得极具灵活性。
业内专家指出，理解这一机制的关键在于掌握JavaScript的“真值”与“假值”概念，以下数据展示了常见的假值（Falsy）列表，当 左侧遇到这些值时,它会继续向右寻找：
false0- (空字符串)
nullundefinedNaN
只要左侧的值不属于上述假值范畴， 就会立即停止计算，并直接返回左侧的值，这种行为被称为“短路求值”（Short-circuit Evaluation）。
短路求值的实际表现
为了更直观地理解，我们可以看几个具体的代码场景，假设我们执行 console.log(5 || 10)，浏览器控制台会输出 5，因为 5 在布尔上下文中被视为真，所以右边的 10 根本不会被执行，反之，如果执行 console.log(0 || 10)，结果则是 10，因为 0 是假值,运算符被迫去检查右边的值。
这种机制不仅限于数字，在对象和函数中同样适用。console.log({} || []) 会返回 ，因为空对象在JavaScript中也是真值,这一特性是许多高级用法的基础。
默认参数赋值与空值处理场景
替代传统三元运算符的优雅写法
在日常开发中， 最常见的用途之一就是为变量提供默认值，在没有引入ES6默认参数之前，开发者经常需要编写冗长的三元表达式或条件判断语句,过去我们可能这样写：
var name = user.name ? user.name : "Guest";
利用 的短路特性,代码可以简化为：
var name = user.name || "Guest";
这段代码的逻辑非常清晰：user.name 存在且不为假值，就使用它；否则，使用 “Guest”，这种写法在配置项合并、用户数据初始化等场景中极为普遍，据统计，在各类前端开源库中,相当一部分配置合并逻辑都依赖于此种简写方式。
与空值合并运算符 ?? 的对比辨析
随着ECMAScript 2020标准的普及，一个新的运算符 （空值合并运算符）进入了开发者的视野，这导致许多初学者产生困惑，js中双竖线和双问号区别在哪里？这是目前社区中热度较高的疑问之一。
虽然两者都能用于提供默认值,但它们的判断逻辑截然不同：
| 特性 | 逻辑或 | 空值合并 |
| :— | :— | :— |
| 判断依据 | 检查左侧是否为“假值” | 仅检查左侧是否为 null 或 undefined |
| 0 的处理 | 返回右侧默认值 | 返回 0 |
| 空字符串的处理 | 返回右侧默认值 | 返回 |
| 适用场景 | 需要忽略所有假值时 | 需要保留 0 或空字符串时 |
当设置用户音量时，0 是一个有效的音量值（静音），如果使用 volume = userVolume || 10，当用户设置为静音（0）时，音量会被错误地重置为10，而使用 volume = userVolume ?? 10，则能正确保留用户的静音设置，行业共识认为，在涉及数值型默认值时，应优先使用 以避免逻辑漏洞。
函数参数校验与防御性编程实践
快速拦截无效输入
在编写可复用的工具函数时，参数校验是必不可少的一环。 运算符可以极大地简化校验代码，在一个计算面积的函数中,我们需要确保长和宽都是有效数字：
function calculateArea(length, width) {
length = length || 1;
width = width || 1;
return length width;
}
这种写法虽然简洁，但也存在隐患，如果调用者故意传入 0 或 false，函数可能会产生非预期的行为，在现代前端工程化实践中，多数情况下建议结合 TypeScript 的类型系统或使用更严谨的校验库，但在轻量级脚本或快速原型开发中,这种简写依然因其高效性而被广泛使用。
对象属性链式访问的安全兜底
在处理深层嵌套的对象数据时， 常用于防止 Cannot read property of undefined 这类常见错误。
var city = user.address && user.address.city || "Unknown";
这里结合了逻辑与 && 和逻辑或 。&& 确保 user.address 存在后才访问 city，city 不存在或为假值， 则提供 “Unknown” 作为兜底，这种组合拳在解析API返回的不稳定数据结构时非常有效,能够显著提升代码的健壮性。
常见误区与性能考量
避免在复杂表达式中过度嵌套
虽然 功能强大,但过度使用会导致代码可读性下降。
var result = a || b || c || d || "default";
这种链式写法在逻辑上是成立的，但在调试时难以追踪具体是哪个变量生效了，业内专家指出，当默认值来源超过三个时，建议重构为对象映射或明确的条件分支,以提升代码的可维护性。
性能差异微乎其微
js中逻辑或运算性能如何 的讨论在早期浏览器时代较为常见，在现代V8引擎等高性能JavaScript引擎中， 的短路机制经过高度优化，其执行效率极高，除非在极高频的循环中进行数百万次调用，否则性能差异可以忽略不计，开发者应更关注代码的逻辑正确性和可读性,而非过度纠结于这种底层运算的微小开销。
总结与最佳实践建议
JavaScript中的 运算符是一个兼具逻辑判断与数据回退功能的强大工具，它通过短路求值机制，让开发者能够用极简的代码处理复杂的默认值逻辑，必须警惕其对 0 和空字符串的误判，在需要精确区分“无值”与“零值”的场景下，务必选用 运算符。
掌握 的正确用法，不仅能提升编码效率，更能写出更具防御性的健壮代码，建议在新项目中，根据数据类型严格区分 和 的使用场景,保持代码风格的一致性与逻辑的严密性。
JS中双竖线符号常见问题解答
Q: js中||和&&的区别是什么？
A: （逻辑或）只要有一个操作数为真，结果即为真，且返回第一个真值；&&（逻辑与）所有操作数必须都为真，结果才为真，且返回第一个假值或最后一个真值,两者都遵循短路求值原则。
Q: 为什么有时用||得到的默认值不对？
A: 通常是因为传入的有效值为 JavaScript 中的假值（如 0、、false）。 会将这些值视为“无”，从而触发右侧的默认值，若需保留这些有效值，应改用 或显式判断 !== undefined && !== null。
Q: 双竖线运算符在浏览器兼容性方面表现如何？
A: 是 ECMAScript 3 标准的一部分，在所有现代浏览器及 Node.js 环境中均得到完美支持，兼容性极佳，无需考虑 polyfill 问题。
首发原创文章，作者：王坚，如若转载，请注明出处：https://test.idctop.com/article/400989.html
