ES 空值合并运算符??与可选链?.的使用小结

const count = 0;
const total = count || 10;
console.log(total); // 输出 10，而不是预期的 0

const count = 0;
const total = count ?? 10;
console.log(total); // 输出 0，正确！

const name = null;
const displayName = name ?? 'Anonymous';
console.log(displayName); // 输出 'Anonymous'

const age = undefined;
const userAge = age ?? 18;
console.log(userAge); // 输出 18

const a = null;
const b = undefined;
const c = 0;
const d = '';

const result1 = a ?? b ?? c ?? 'default';
console.log(result1); // 输出 0

const result2 = a ?? b ?? d ?? 'default';
console.log(result2); // 输出 ''

// 错误写法 - 会抛出 SyntaxError
const invalid = null || undefined ?? 'default';

// 正确写法 - 使用括号明确优先级
const valid1 = (null || undefined) ?? 'default';
const valid2 = null || (undefined ?? 'default');

const user = {
  name: 'Alice',
  address: {
    city: 'Beijing'
  }
};

// 传统写法 - 需要先判断每一层
const city1 = user && user.address && user.address.city;

// 使用可选链 - 简洁安全
const city2 = user?.address?.city;
console.log(city2); // 输出 'Beijing'

// 访问不存在的属性
const country = user?.address?.country;
console.log(country); // 输出 undefined，不会报错

// 方法调用
const result = obj?.method?.();

// 数组索引
const firstItem = arr?.[0];

// 动态属性名
const value = obj?.[key];

// 1. 处理表单数据
const formData = {
  user: {
    profile: {
      name: 'Bob'
    }
  }
};

// 安全获取用户名，即使中间某层不存在
const userName = formData?.user?.profile?.name ?? 'Guest';

// 2. 处理 API 响应
async function fetchUser() {
  const response = await fetch('/api/user');
  const data = await response.json();
  
  // 安全访问嵌套数据
  const email = data?.user?.contact?.email ?? 'no-email';
  const avatar = data?.user?.profile?.avatar ?? '/default-avatar.png';
  
  return { email, avatar };
}

// 3. 处理可选的回调函数
function handleClick(event) {
  // 某些情况下 onClick 可能未定义
  event?.preventDefault?.();
  callback?.(event);
}

const obj = null;
let count = 0;

// 不会执行，因为 obj 为 null
const result = obj?.method(() => count++);

console.log(count); // 输出 0，callback 没有被执行

const config = {
  database: {
    host: null,
    port: 5432
  }
};

// 安全获取数据库配置，主机为空时使用默认值
const dbHost = config?.database?.host ?? 'localhost';
const dbPort = config?.database?.port ?? 3306;

console.log(dbHost); // 输出 'localhost'
console.log(dbPort); // 输出 5432

// 处理深层嵌套的配置对象
const settings = {
  ui: {
    theme: {
      colors: null
    }
  }
};

const primaryColor = settings?.ui?.theme?.colors?.primary ?? '#1890ff';
console.log(primaryColor); // 输出 '#1890ff'

interface User {
  name: string;
  address?: {
    city: string;
    zipCode?: string;
  };
}

const user: User = {
  name: 'Alice'
};

// 可选链返回 undefined 或 string，类型为 string | undefined
const city = user.address?.city;

// 空值合并确保最终类型为 string
const zipCode = user.address?.zipCode ?? '000000';

// .babelrc 或 babel.config.js
{
  "plugins": [
    "@babel/plugin-proposal-optional-chaining",
    "@babel/plugin-proposal-nullish-coalescing-operator"
  ]
}