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

前言

实际开发中，后端返回的数据，前端在渲染的时候，要进行判空处理后再展示。因此，判空就会在实际开发中经常使用。 使用条件判断设置默认值

||运算符

使用条件判断设置默认值 let result = input || {} 条件判断的逻辑和三目运算符，if-else语句判断的逻辑是一样的，只是写法不一样

条件判断可以忽略所有的假值

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

result = value || {};

// 三目运算符形式
result = value ? value : {};
// if-else 语句
if(input) {
    result = value;
} else {
    result = {};
}

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

??运算符

相比||运算符，??运算符只会忽略undefined和null两种假值

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

result = value ?? {}; 

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

?.运算符

允许读取位于连接对象深处的属性，而不必验证链中的每一个引用是否有效。?.运算符的功能类似于.运算符，不同之处在于，在引用为空的时候(null或者undefined)不会引起报错，短路的返回值为undefined(可选链运算符)

//存在嵌套结构的对象，不使用可选链的话，查找子属性之前，需要验证之前的引用
let nestedProp = obj.first && obj.first.second;

//使用后的代码
let nestedProp = obj.first?.second;

相比之下，后者看起来还是比较简洁的