JavaScript中操作符 ?. 和 ?? 的使用让你少写80%的 if 判断

日常我们前端开发项目的时候，都在与各种数据打交道。比如判空、取值、赋默认值等这些看似简单的操作，却经常让我们的代码需要很多冗长的 if…else 判断，特别是很长的逻辑判断，阅读起来体验很不好。。

可选链操作符 ?.

传统写法的痛点

还记得那些让人头疼的深层对象访问吗？

// 传统写法：层层判断
if (user && user.profile && user.profile.address && user.profile.address.city) {
 console.log(user.profile.address.city);
}

// 或者使用 try-catch
try {
 const city = user.profile.address.city;
 console.log(city);
} catch (error) {
 console.log('数据不存在');
}

可选链的优雅解决方案

// 使用可选链：一行搞定！
console.log(user?.profile?.address?.city);

// 如果任何一层为 null 或 undefined，直接返回 undefined
// 不会抛出错误！

空值合并操作符 ??

与 || 操作符的区别

这是很多开发者容易混淆的地方：

const config = {
    theme: '',
    timeout: 0,
    enableCache: false
};

// 使用 || 的问题
const theme = config.theme || 'dark'; // 'dark'(空字符串被认为是 false)
const timeout = config.timeout ||3000; // 3000(0 被认为是 false)
const cache =config.enableCache || true; // true(false 被认为是 false)

// 使用 ?? 的正确行为
const theme = config.theme ?? 'dark'; // ''(保留空字符串)
const timeout = config.timeout ?? 3000; // 0(保留 0)
const cache = config.enableCache ?? true;// false(保留 false)

写法对比

让我们看看使用这些操作符前后的代码对比：

传统写法：

// 15 行代码，多重嵌套
function getOrderTotal(order) {
    let total = 0;
    if (order) {
        if (order.items) {
            if (Array.isArray(order.items)) {
                for (let item of order.items) {
                    if (item && item.price && item.quantity) {
                        total += item.price * item.quantity;
                    }
                }
            }
        }
    }
    return total || 0;
}

现代写法：

// 3 行代码，清晰易懂
function getOrderTotal(order) {
    return order?.items?.reduce((sum, item) =>
        sum + (item?.price ?? 0) * (item?.quantity ?? 1), 0) ?? 0;
}

最佳实践

1. 适度使用，避免过度链式调用

// 推荐的写法
const userName = user?.profile?.name;
const userCity = user?.address?.city;
// 避免过长的链式调用
const value = a?.b?.c?.d?.e?.f?.g?.h?.i?.j;

2. 结合解构赋值

const { 
  name = '默认名称', 
  age = 0, 
  email 
} = user?.profile ?? {};

// 相当于
const name = user?.profile?.name ?? '默认名称';
const age = user?.profile?.age ?? 0;
const email = user?.profile?.email;

JavaScript 中引入的这两个操作符，让 JavaScript 代码变得更加简洁和安全：可选链操作符 ?.  解决了深层对象访问的问题，空值合并操作符 ?? 提供了更精确的默认值设置。

以上关于JavaScript中操作符 ?. 和 ?? 的使用让你少写80%的 if 判断的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。