JS判空设默认值的几种写法

概述

实践中需要给某个变量赋值时，若数据来源不可控，通常会给它设置一个默认值（就像空对象模式一样）。JavaScript中有很多语法支持设置这样的默认值，比如函数参数默认值，解构赋值默认值等。但本文主要讨论手动赋值时的3默认值设置方式：

1. 使用条件判断设置默认值，如：let result = input || {}
2. 使用空判断运算符，如：let result = input ?? {}
3. 配合typeof判断类型设置默认值，如：let result = typeof(input) !== 'undefined' ? input : {}

以上3中判断方式各有适用范围，??空值合并运算符是在ES2020引入，用于在左侧运算数为null|undefined场景下为对象设置默认值时，取代||运算符。

||运算符

这种形式主要利用了Boolean()类型转换以及||运算符的短路特性，其也可改写成三目运算符（?:）或If-else语句形式；受布尔类型转换限制，所有的假值都会被认为未赋值。

// 当 input 为：undefined、null、''、0、NaN、false 时会被忽略
let input;
// 即 result 值不会为：undefined、null、''、0、NaN、false
let result;


result = input || {};



// 变体（1）：三目运算符形式
result = input ? input : {};
// 变体（2）：If-else 语句
if(input) {
    result = input;
} else {
    result = {};
}


// 若只涉及一个变量，还可简写
obj ||= {};

??运算符

由于||会忽略所有假值，TC39在ES2020的提案里提出??运算符，仅当左侧运算数为null或undefined时，才会计算右侧表达式。多配合?.可选链式运算符一起使用。

// 当 input 为：undefined、null 时会被忽略
let input;
// 即 result 值不会为：undefined、null；可以是：''、0、NaN、false
let result;


result = input ?? {}; 


// 若只涉及一个变量，还可简写
obj ??= {};

typeof运算符

还有场景，只有在输入为undefined时才认为是无效输入，即null被认为是有效输入。此时可使用typeof运算符判断输入类型是否为undefined来区分；若已明确输入变量已经声明，则可将变量和undefined比较，通过其是否相等来判断。

// 当 input 为：undefined 时会被忽略
let input;
// 即 result 值不会为：undefined；可以是：null、''、0、NaN、false
let result;


result = (typeof(input) !== 'undefined') ? input : {};


// 变体：直接和 undefined 判断，需注意若input未声明会报错
result = (input !== undefined) ? input : {};

在面向对象编程过程中，大多场景变量是引用对象的，这些情况下??配合?.会更符合现代编程语言的写法，也是官方推荐使用的。

const EMPTY_WALLET = {
    money: 0
}

function consume(user = null, goods = null) {
    if (null === (goods?.price ?? null)) {
        return false;
    }
    let wallet = user?.info?.wallet ?? EMPTY_WALLET;
    if (wallet.money < goods.price) {
        return false;
    }
    wallet.money -= goods.price;
    return true;
}