JavaScript空值处理的最佳实践指南

const result = 左侧值 ?? 右侧默认值;

// 业务需求：仅当用户未输入数量（null/undefined）时，默认显示 1
const userInput = 0; // 用户明确输入0件商品

// 错误写法：|| 把 0 判定为假值，返回默认值 1
const countBad = userInput || 1; 
console.log(countBad); // 输出 1（不符合预期）

// 正确写法：?? 仅判断 null/undefined，保留 0
const countGood = userInput ?? 1;
console.log(countGood); // 输出 0（符合预期）

const userName = ''; // 用户主动设置空昵称
const nameBad = userName || '未知用户'; // 输出 '未知用户'（错误）
const nameGood = userName ?? '未知用户'; // 输出 ''（正确）

// 需求：获取用户年龄，无则默认 18
const user = { info: { age: 0 } }; // 用户年龄为 0（合法值）

// 安全写法：?. 避免层级不存在报错，?? 仅兜底 null/undefined
const age = user?.info?.age ?? 18;
console.log(age); // 输出 0（保留合法值）

// 如果 user 无 info 属性：
const user2 = {};
const age2 = user2?.info?.age ?? 18;
console.log(age2); // 输出 18（兜底生效）

// 需求：门店功能项优先取状态2，无则取1，再无则返回默认值
const getTarget = (store) => {
  return store.storeFun?.find(vo => vo.storeStatus === 2)
    ?? store.storeFun?.find(vo => vo.storeStatus === 1)
    ?? { storeCode: '默认门店' };
};

// 测试：有2则返回2
const store1 = { storeFun: [{ storeStatus: 2, storeCode: 'code2' }] };
console.log(getTarget(store1).storeCode); // 输出 code20

// 测试：无2有1则返回1
const store2 = { storeFun: [{ storeStatus: 1, storeCode: 'code1' }] };
console.log(getTarget(store2).storeCode); // 输出 code1

// 测试：无2无1则返回默认
const store3 = { storeFun: [] };
console.log(getTarget(store3).storeCode); // 输出 默认门店

// 需求：函数参数为 null/undefined 时用默认值，0/'' 保留
function calculate(price = 100) {
  // 传统参数默认值：仅 undefined 生效，null 会被保留
  console.log(price);
}
calculate(null); // 输出 null（不符合预期）

// 优化：用 ?? 兜底 null/undefined
function calculateBetter(price) {
  const finalPrice = price ?? 100;
  console.log(finalPrice);
}
calculateBetter(null); // 输出 100（符合预期）
calculateBetter(0); // 输出 0（保留合法值）

// 错误写法
const result = a && b ?? c;
// 正确写法
const result = (a && b) ?? c;