JavaScript解构赋值是按模式从数组或对象中提取值并赋给变量的语法糖，基于位置顺序（数组）或属性名匹配（对象），支持跳过、默认值、剩余元素收集及重命名，但不深拷贝、不改变原结构，且对null/undefined解构会报错。
什么是 JavaScript 解构赋值？
解构赋值是 JavaScript 中一种语法糖，允许你从数组或对象中「按模式提取值」并直接赋给变量，省去手动索引或属性访问的冗余写法。它不是深拷贝，也不改变原数据结构，只是读取和绑定。
如何从数组中用解构提取值？
数组解构基于「位置顺序」，左侧用方括号 [] 描述要取哪些位置的元素，支持跳过、默认值、剩余元素收集。
- 基础用法：
const [a, b] = [1, 2];→a得1，b得2 - 跳过某项：用逗号占位，
const [first, , third] = ['a', 'b', 'c'];→first是'a'，third是'c' - 设置默认值：当对应位置为
undefined时生效，const [x = 10, y = 20] = [5];→x是5，y是20 - 获取剩余元素：用扩展运算符
...收集，const [head, ...tail] = [1, 2, 3, 4];→tail是[2, 3, 4]
const colors = ['red', 'green', 'blue']; const [r, g, b] = colors; console.log(r); // 'red' console.log(g); // 'green'
如何从对象中用解构提取属性？
对象解构基于「属性名匹配」，左侧用花括号 {} 列出要提取的键名；变量名默认与键同名，也可重命名或设默认值。
shopify-app-react-router
下载
构建 Shopify 嵌入式应用（Embedded App）的开发技能：基于 @shopify/shopify-app-react-router + React Router v7 + Admin API 2026-04。覆盖 shopifyApp 配置、authenticate.admin 的 GraphQL/REST 调用、Webhook 校验、Session 存储、订阅计费、App Bridge 导航、部署，并新增：适用场景判断、安全最佳实践、错误处理与容错、最佳实践、常见问题 FAQ、高级场景。G
- 基础匹配：
const { name, age } = { name: 'Alice', age: 30 }; - 重命名变量：
const { title: bookTitle } = { title: 'JS Guide' };→ 变量叫bookTitle，不是title - 嵌套解构：
const { user: { id, profile: { city } } } = { user: { id: 123, profile: { city: 'Beijing' } } }; - 默认值只在属性值为
undefined时触发，null或0不会触发：const { count = 1 } = { count: 0 };→count是0，不是1
const person = { name: 'Bob', role: 'developer', tags: ['js', 'react'] };
const { name, role, tags } = person;
console.log(name); // 'Bob'
console.log(tags); // ['js', 'react']
常见错误和容易忽略的细节
解构看着简单，但几个边界情况常导致运行时错误或意外行为。
立即学习“Java免费学习笔记（深入）”；
-
undefined或null解构会报错：const [a] = null;→TypeError: Cannot destructure property '0' of 'null' as it is null. - 函数参数解构时，若传入非对象/数组，同样报错；建议加默认参数兜底，如
function fn({ x = 0 } = {}) { ... } - 解构不支持「动态键名」：不能写
const { [key]: val } = obj;（这是计算属性，属于对象字面量定义语法，不是解构） - 循环中解构需注意变量作用域：用
for...of配合数组解构很自然，但for...in遍历对象键名时不能直接解构值
最常被忽略的是：解构只是语法便利，背后仍依赖原始值的可迭代性或属性可访问性；别把它当成万能取值工具，尤其处理不确定结构的数据时，先做存在性检查更稳妥。
