浅析JavaScript中如何正确判断null和undefined

// 场景1：用户没填姓名
const userName = undefined;
console.log(userName.length); // 报错！Cannot read properties of undefined

// 场景2：接口返回空数据
const apiResponse = null;
console.log(apiResponse.data); // 报错！Cannot read properties of null

let name;
console.log(name); // undefined

let user = null; // 表示“用户不存在”

if (variable === null || variable === undefined) {
  console.log('变量为空');
}

function getUserProfile(user) {
  if (user === null || user === undefined) {
    return '用户不存在';
  }
  return `欢迎，${user.name}`;
}

if (variable == null) {
  console.log('变量为空');
}

if (!variable) {
  console.log('变量为falsy值');
}

// 这些值都会被判断为"空"
!false      // true
!0         // true  
!""        // true
!NaN       // true

// 实际开发中的坑
const count = 0;
if (!count) {
  console.log('计数为0'); // 这里会执行，但可能不是我们想要的
}

if (typeof variable === 'undefined' || variable === null) {
  console.log('变量是空的！');
}

// 如果变量根本没声明，前两种方法会报错
if (notDeclaredVariable == null) { // 报错！ReferenceError
}

if (typeof notDeclaredVariable === 'undefined') { // 正常运行！
  console.log('变量未定义');
}

// 传统写法
const name = username ? username : '匿名用户';

// 现代写法
const name = username ?? '匿名用户';

// 以前的痛苦写法
const street = user && user.address && user.address.street;

// 现在的优雅写法
const street = user?.address?.street;

const street = user?.address?.street ?? '地址未知';

// 推荐
if (value == null) {
  // 处理空值
}

// 或者
const safeValue = value ?? defaultValue;

if (value === null) {
  console.log('明确设置为空');
}

if (value === undefined) {
  console.log('未定义');
}

// 安全访问深层属性
const phone = order?.customer?.contact?.phone ?? '未填写';

function createUser(name, age = 18) {
  // age参数只在undefined时使用默认值
  return { name, age };
}