如何利用解构赋值语法优雅提取本地存储出来的深度嵌套 JSON 对象中的核心属性-js教程-PHP中文网

解构赋值从 localstorage 读取深度嵌套 json 字段需先安全解析再精准解构：先用 json.parse() 转对象并设空对象默认值，各嵌套层均用 = {} 防 undefined，数组用 [item = {}] 提取，最后可封装为带兜底的提取函数。

如何利用解构赋值语法优雅提取本地存储出来的深度嵌套 json 对象中的核心属性

直接用解构赋值从 localStorage 读取并提取深度嵌套 JSON 中的字段，关键在于“先安全解析，再精准解构”，避免因数据缺失或格式异常导致运行时错误。

一、先解析 JSON，再做解构

localStorage.getItem() 返回的是字符串，必须先 JSON.parse() 成对象，才能解构。跳过这步会报错或得到意外结果。

正确写法：

const rawData = localStorage.getItem('userProfile');<br>const data = rawData ? JSON.parse(rawData) : {};

不建议直接解构：
const { profile: { name } } = JSON.parse(localStorage.getItem('userProfile')); —— 若 key 不存在或 JSON 格式错误，会直接抛异常

二、用空对象默认值兜底中间层级

嵌套结构中任意一层（比如 profile 或 contact）可能为 undefined，直接解构会报 Cannot destructure property 'xxx' of 'undefined'。解决方法是给每一层中间对象设默认空对象。

dmap-jsapi-skill

DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。

下载

示例数据：
{ "profile": { "name": "李四", "contact": { "email": "li@example.com" } } }

安全解构写法：

const {<br>  profile: {<br>    name = '未知用户',<br>    contact: { email = 'no-email' } = {}<br>  } = {}<br>} = data;

重点：等号右边的 = {} 是给 profile 设的默认值，= {} 在 contact 后是给 contact 设的，默认值只对 undefined 生效

三、处理数组嵌套时混合使用方括号

如果 JSON 里有数组（如 orders: [{ id: 1, status: 'paid' }]），可在解构中用 [firstOrder] 提取首项，再继续解构其属性。

例子：

const {<br>  orders: [firstOrder = {}] = [],<br>  settings: { theme = 'light' } = {}<br>} = data;

orders = [] 防止 orders 本身不存在；firstOrder = {} 防止数组为空；后续再解 firstOrder.status 就不会出错

四、封装成可复用的提取函数

重复写长解构易出错，可封装一个带默认值和容错的提取函数：

function extractUser(data = {}) {<br>  const {<br>    profile: {<br>      name = '',<br>      avatar = '',<br>      address: { city = '', district = '' } = {}<br>    } = {},<br>    stats: { loginCount = 0 } = {}<br>  } = data;<br>  return { name, avatar, city, district, loginCount };<br>}