JavaScript逻辑运算符&&、||和!的基础用法与真值表

// 验证基础假值
Boolean(0);           // 示例输出: false
Boolean("");          // 示例输出: false
Boolean(null);        // 示例输出: false
Boolean(undefined);   // 示例输出: false

// 容易混淆的真值陷阱
Boolean("0");         // 示例输出: true (非空字符串)
Boolean([]);          // 示例输出: true (引用类型对象，即便是空数组)
Boolean({});         // 示例输出: true (引用类型对象，即便是空对象)
Boolean(-42);         // 示例输出: true (负数也是非零数字)

// 1. 纯布尔运算场景
const r1 = true && true;    // 示例输出: true
const r2 = true && false;   // 示例输出: false

// 2. 非布尔值与短路求值场景
const r3 = "前端工程" && "React";  // 示例输出: "React"（左侧为真，返回右侧原始值）
const r4 = 0 && "TypeScript";       // 示例输出: 0（左侧为假，立即短路返回 0）
const r5 = null && "Node.js";        // 示例输出: null（左侧为假，立即短路返回 null）

function printUserName(user) {
  // 只有当 user 存在且有效时，才访问其内部方法或属性
  user && console.log(user.name);
}

printUserName(null);        // 安全运行，不会抛出 TypeError: Cannot read property 'name' of null
printUserName({ name: "张三" }); // 示例输出: "张三"

// 1. 遇到真值即终止
const role = "Admin" || "Guest";      // 示例输出: "Admin"（左侧非空字符串为真值，直接返回）

// 2. 遇到假值则向右降级
const nickname = "" || "匿名访客";      // 示例输出: "匿名访客"（空字符串为假值，返回右侧）
const count = undefined || 10;          // 示例输出: 10

在 ES2020 之前，开发者广泛使用 const pageSize = options.size || 20; 来配置缺省值。但这种做法存在一个严重隐患：如果业务中合法允许输入 0 或空字符串 ""，|| 会将其误判为假值而强制替换为后备值。

例如：如果用户输入页码 pageIndex = 0，使用 pageIndex || 1 会导致结果变成 1，从而丢失了合法的第 0 页。
解决依据：若仅希望在变量为 null 或 undefined 时提供默认值，而将 0、false 和 "" 视为有效数据，应改用现代空值合并操作符 ??（Nullish Coalescing Operator）。

console.log(!false);       // 示例输出: true
console.log(!0);           // 示例输出: true (0 是假值，取反为 true)
console.log(!"");          // 示例输出: true (空字符串是假值，取反为 true)
console.log(!"hello");     // 示例输出: false (非空字符串是真值，取反为 false)
console.log(!{});         // 示例输出: false (对象是真值，取反为 false)

const userToken = "eyJhbGciOi...";
const hasAuth = !!userToken;  // 示例输出: true (直接获得纯布尔类型，消除长字符串类型)

const emptyList = [];
const hasItems = !!emptyList.length; // 示例输出: false (length 为 0，转为纯 false)

// 表达式计算次序推导：
const result = true || false && false;
// 因为 && 优先级高于 ||，相当于: true || (false && false)
// 首先计算 false && false 得到 false
// 随后计算 true || false 得到 true
console.log(result); // 示例输出: true

// 若意图优先计算前面的或运算，必须显式加上圆括号 ()
const explicitResult = (true || false) && false;
console.log(explicitResult); // 示例输出: false

在生产代码中，依赖 && 优于 || 的隐式规则不仅降低团队代码可读性，还极易在后续重构中引入隐藏 Bug。只要表达式中同时出现与、或运算，一律显式使用圆括号 () 分组，明确传达业务逻辑意图。

let logCount = 0;
function recordEvent() {
  logCount++;
  return true;
}

const isMuted = true;
isMuted || recordEvent(); // 触发短路！recordEvent 完全未被调用
console.log(logCount);    // 示例输出: 0（副作用丢失）

// ❌ 存在隐患写法：当 length === 0 时界面渲染出 "0"
{messages.length && <Badge />}

//  推荐修正方案 1：双感叹号强制转布尔（React 会自动忽略布尔值渲染）
{!!messages.length && <Badge />}

//  推荐修正方案 2：显式比较产生纯布尔值
{messages.length > 0 && <Badge />}

//  推荐修正方案 3：三元表达式明确空值
{messages.length > 0 ? <Badge /> : null}

// 传统冗长的多层保护守卫
const street = user && user.address && user.address.street;

// 现代 ES2020+ 可选链操作符标准语法
const modernStreet = user?.address?.street;

// 结合空值合并 ?? 优雅提供默认值
const safeStreet = user?.address?.street ?? "未登记地址";

📌 全文知识核心备忘表

掌握 JavaScript 逻辑运算符的关键在于脱离单纯的“布尔值运算”思维，深入理解操作数实值流转机制：

• 真假底座：牢记仅有的 8 个假值（false、0、-0、0n、""、null、undefined、NaN），其余所有类型（包括空对象 {} 与空数组 []）皆为真值。
• 逻辑与 &&：遇假则止返回首个假值实值；全真则走到终点返回末尾实值。
• 逻辑或 ||：遇真则止返回首个真值实值；全假则走到终点返回末尾实值。
• 逻辑非 ! 与 !!：! 负责类型转换并取反；!! 负责将任意数据无损规范化为基础布尔值。
• 实战抉择：默认值处理时，若需兼容 0 或 "" 为合法值，务必优先选择空值合并 ??。