JavaScript双问号操作符(??)的惊人用法总结大全

const value1 = null ?? 'default';        // 'default'
const value2 = undefined ?? 'default';    // 'default'
const value3 = false ?? 'default';        // false
const value4 = 0 ?? 'default';            // 0
const value5 = '' ?? 'default';           // ''

// 使用||
const count = userCount || 10;  // 当userCount为0时，count将为10

// 使用??
const count = userCount ?? 10;  // 当userCount为0时，count将为0

function processForm(data) {
  // 只有当值真正缺失时才使用默认值
  const username = data.username ?? 'guest';
  const items = data.items ?? [];
  const quantity = data.quantity ?? 1;  // 允许quantity为0
  
  // 处理表单逻辑...
}

const config = {
  server: {
    port: 0,  // 有效值，但为"假值"
    host: ''  // 有效值，但为"假值"
  }
};

const userConfig = {};

// 正确处理深层配置
const port = userConfig?.server?.port ?? config.server.port;  // 0
const host = userConfig?.server?.host ?? config.server.host;  // ''

const userName = user?.profile?.preferences?.displayName ?? 'Guest';

// 仅当handler存在时才执行，否则使用默认处理函数
(customHandler ?? defaultHandler)(event);

const { name, age, title = 'Developer', company = 'Unknown' } = employee ?? {};

class UserPreferences {
  constructor(settings) {
    this.theme = settings?.theme ?? 'light';
    this.fontSize = settings?.fontSize ?? 16;
    this.notifications = settings?.notifications ?? true;
    
    // 即使settings.volume为0也会被保留
    this.volume = settings?.volume ?? 0.5;
  }
}