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

 前端面试题库 （面试必备）            推荐：★★★★★

地址：前端面试题库

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

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

 

||运算符

  这种形式主要利用了 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;
}

前端面试题库 （面试必备）            推荐：★★★★★

地址：前端面试题库