js-运算符 ||

基本语法和作用

// 基本格式
const func = () => expression || defaultValue;

// 含义：如果 expression 是假值，就返回 defaultValue

工作原理

逻辑或的短路特性

// || 的运算规则：
// 1. 从左到右计算
// 2. 返回第一个为"真"的值
// 3. 如果都是"假"，返回最后一个值

const a = false || "默认值";  // "默认值"
const b = "有值" || "默认值"; // "有值"
const c = 0 || 100;          // 100（0 是假值）
const d = null || "默认";    // "默认"
const e = undefined || "默认"; // "默认"
const f = "" || "非空";      // "非空"

在隐式返回中的实际应用

1. 环境变量默认值

// 你例子中的用法
export const bundleType = () => process.env.BUNDLE || 'dev';

// 相当于
export const bundleType = () => {
  if (process.env.BUNDLE) {
    return process.env.BUNDLE;
  } else {
    return 'dev';
  }
};

2. 函数参数默认值

// 旧版（ES5）的参数默认值写法
const greet = (name) => name || '访客';

console.log(greet('张三'));  // "张三"
console.log(greet(''));      // "访客"
console.log(greet(null));    // "访客"
console.log(greet());        // "访客"

// ES6+ 更推荐用默认参数
const greet = (name = '访客') => name;

3. 对象属性安全访问

const getUserName = (user) => user?.name || '匿名用户';

// 使用
console.log(getUserName({ name: '张三' }));  // "张三"
console.log(getUserName({}));               // "匿名用户"
console.log(getUserName(null));             // "匿名用户"

4. API 响应数据处理

// 处理可能不存在的数组
const getFirstItem = (data) => data?.[0] || {};

// 处理嵌套对象
const getConfigValue = (config) => 
  config?.settings?.theme?.color || 'default-blue';

// 处理函数返回值
const getCachedData = (key) => 
  localStorage.getItem(key) || fetchData(key);

与 ??（空值合并运算符）的区别

特性	`		`	??
假值处理​	所有假值都触发默认值	仅 null和 undefined触发
0 的处理​	0 → 默认值	0 → 0
空字符串​	"" → 默认值	"" → ""
false​	false → 默认值	false → false
示例​	value || "默认"	value ?? "默认"

// 对比示例
const value1 = 0;
console.log(value1 || 100);   // 100（0 是假值）
console.log(value1 ?? 100);   // 0（0 不是 null/undefined）

const value2 = '';
console.log(value2 || '默认'); // "默认"
console.log(value2 ?? '默认'); // ""

const value3 = false;
console.log(value3 || true);  // true
console.log(value3 ?? true);  // false

// 应该使用 ?? 的场景
const config = {
  timeout: 0,      // 0 是有效配置
  retry: false,    // false 是有效配置
  label: ''        // 空字符串是有效配置
};

// ❌ 错误：会覆盖有效配置
const timeout = config.timeout || 5000;  // 得到 5000，而不是 0
const retry = config.retry || true;     // 得到 true，而不是 false

// ✅ 正确：使用 ??
const timeout = config.timeout ?? 5000;  // 得到 0
const retry = config.retry ?? true;     // 得到 false

注意事项

1. 小心数字 0

// 问题：0 是有效的价格，但会被当作假值
const getPrice = () => process.env.PRICE || 100;
// 如果 PRICE=0，会返回 100 而不是 0

// 解决方案1：使用 ??
const getPrice = () => process.env.PRICE ?? 100;

// 解决方案2：显式检查
const getPrice = () => 
  process.env.PRICE !== undefined ? process.env.PRICE : 100;

2. 避免过度嵌套

// ❌ 难以阅读
const result = a || b || c || d || e || 'default';

// ✅ 更好
const getResult = () => {
  if (a) return a;
  if (b) return b;
  if (c) return c;
  if (d) return d;
  if (e) return e;
  return 'default';
};

3. 在箭头函数中的限制

// ❌ 错误：多行逻辑不能用隐式返回
const complexLogic = (x) => 
  if (x > 0) {
    return '正数';
  } else {
    return '非正数';
  }

// ✅ 正确：用三元运算符
const complexLogic = (x) => 
  x > 0 ? '正数' : '非正数';

// ✅ 或者用花括号显式返回
const complexLogic = (x) => {
  if (x > 0) {
    return '正数';
  } else {
    return '非正数';
  }
};

总结

||在隐式返回中的核心用途：提供默认值

// 核心模式
() => value || defaultValue

// 等价于
() => {
  if (value) {
    return value;
  } else {
    return defaultValue;
  }
}

何时使用：

1. 当值不存在（null、undefined、''、0、false都可接受为"不存在"时）

2. 简单逻辑，需要简洁写法

3. 环境变量、配置项、用户输入等需要默认值的场景

注意事项：

• 注意 0、false、''等有效值被覆盖的问题

• 对于数字，考虑使用 ??

• 复杂逻辑还是用显式 if-else更清晰