JavaScript中安全解构需先用??{}或??[]将空值转为默认结构，再解构并设默认值；嵌套属性用?.配合??{}截断，函数参数可直接设默认对象防御空值。

JavaScript 中用解构赋值安全获取可能为空的属性，核心是结合默认值（=）和空值合并操作符（??），同时避免对 null 或 undefined 直接解构报错。

用默认对象防止解构报错

当源对象本身可能是 null 或 undefined 时，直接解构会抛出错误。此时可先提供一个空对象作为默认值：

<!-- 错误写法 -->
const { name, age } = user; // 若 user 是 null，TypeError: Cannot destructure property 'name' of 'undefined' or 'null'

<!-- 正确写法：用空对象兜底 -->
const { name, age } = user ?? {}; // user 为 null/undefined 时，解构 {}，不会报错
const { name = '匿名', age = 0 } = user ?? {}; // 再加默认值，更健壮

立即学习“Java免费学习笔记（深入）”；

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

嵌套属性用链式默认值或可选链 + 解构

对于 user.profile.address.city 这类深层属性，不能直接解构 user?.profile?.address?.city（语法错误），但可以组合使用：

• 方法一：用可选链 + 空值合并 + 默认对象

const { city = '未知' } = user?.profile?.address ?? {};

• 方法二：分步解构，提高可读性

const { profile = {} } = user ?? {};<br>
const { address = {} } = profile;<br>
const { city = '未知' } = address;

数组解构中处理空值

数组也可能为 null、undefined 或长度不足。安全做法是先提供默认数组：

const [first = '无', second = '无'] = items ?? [];
// items 为 null/undefined/[]/[1] 时都安全

函数参数中提前防御

在函数入参中直接使用解构，默认值能天然防御空值：

function greet({ name = '访客', level = 'user' } = {}) {<br>
  return `你好，${name}（${level}）`;<br>
}<br>
greet(); // 你好，访客（user）<br>
greet(null); // 你好，访客（user）<br>
greet({ name: '小明' }); // 你好，小明（user）

关键是把“可能为空”的源头（对象/数组）用 ?? {} 或 ?? [] 转成安全结构，再解构；深层路径优先用 ?. 配合 ?? 截断，避免层层判空。不复杂但容易忽略。