实际开发中 | 与 || 的使用方法及组件封装方案解析

// 权限控制示例
const READ = 1;    // 二进制: 0001
const WRITE = 2;   // 二进制: 0010
const DELETE = 4;  // 二进制: 0100

// 组合权限
let userPermission = READ | WRITE; // 0011 = 3

// 检查权限
if (userPermission & READ) {
  console.log("用户拥有读取权限");
}

// 短路求值示例
function validateInput(value) {
  if (!value || value.length === 0) {
    return "输入不能为空";
  }
  return "验证通过";
}

// 默认值设置
const config = {
  timeout: options.timeout || 3000,
  retries: options.retries || 3
};

class BitwiseUtils {
  constructor() {}

  // 合并多个标志位
  static combineFlags(...flags) {
    return flags.reduce((result, flag) => result | flag, 0);
  }

  // 检查是否包含某个标志位
  static hasFlag(value, flag) {
    return (value & flag) === flag;
  }

  // 移除某个标志位
  static removeFlag(value, flag) {
    return value & ~flag;
  }
}

// 使用示例
const permissions = BitwiseUtils.combineFlags(READ, WRITE);
BitwiseUtils.hasFlag(permissions, DELETE); // false

function ConditionalComponent({ condition, left, right }) {
  return condition ? left : right;
}

// 使用示例
<ConditionalComponent 
  condition={user.isAdmin || user.hasPermission("edit")}
  left={<AdminPanel />}
  right={<UserPanel />}
/>

// 避免不必要的函数调用
function expensiveOperation() {
  console.log("执行耗时操作");
  return true;
}

// 当isEnabled为false时，不会执行expensiveOperation
if (isEnabled || expensiveOperation()) {
  // 处理逻辑
}

class StateMachine {
  constructor() {
    this.state = 0;
  }

  // 设置状态
  setState(state) {
    this.state |= state;
  }

  // 清除状态
  clearState(state) {
    this.state &= ~state;
  }

  // 检查状态
  isActive(state) {
    return (this.state & state) !== 0;
  }
}

// 使用示例
const machine = new StateMachine();
machine.setState(LOADING);
machine.isActive(LOADING); // true

// 错误示例：可能导致逻辑错误
if (a || b & c) { ... }

// 正确示例：使用括号明确优先级
if (a || (b & c)) { ... }

// 非布尔值在逻辑运算中的转换
0 || 5; // 返回5（真值）
'' || 'default'; // 返回'default'