如果你写过几年代码应该能明显感觉到 ES5 时代拿变量这件事特别吃力。每次从对象里面取值都得先确认属性是否存在再一层层写a.b.c取到之后还可能面临undefined的尴尬。es6 新标准里给出的“变量结构”官方叫法就是解构赋值是一个相当实用的能力它不是语法层面的花架子而是从 ES5 到 ES6 之后日常写代码方式的一大转变。这篇文章我按自己的实操经验把数组解构、对象解构、函数参数里怎么用、以及最容易踩的坑全部梳理一遍适合正在补 ES6 语法、或者在项目里想重构复杂取值逻辑的开发者参考。1. 解构赋值解决的是哪种痛1.1 ES5 时代拿变量的三种常见姿势在 ES5 的环境下从数组里取数据最常见的写法就是按下标硬拿比如var first arr[0]拿完第一个还要拿第二个就得再写一行var second arr[1]。从对象里取数据更啰嗦var name user.name、var age user.age如果对象嵌套得深就变成var address user.address.city这种一长串的链式读取。更头疼的是ES5 时代如果你不先判断user user.address user.address.city直接读user.address.city一旦中间的属性缺失整行代码直接抛错页面这块逻辑就崩了。还有一种场景是函数返回多个结果。比如一个方法返回了数组[a, b, c]调用方如果不清楚结构通常只能记住下标时间一长下标对应的是哪个值全靠猜。对象作为返回值稍好一点但你依然要写一堆重复的赋值语句。这几种姿势本质上都暴露了同一个问题数据是结构化的但取值代码是扁平重复的。结构变了取值代码就要跟着改而且改的时候特别容易漏。1.2 ES6 解构引入的底层思维变化解构赋值出现之后整个逻辑反过来了。它不是“从数据里单个取出来再赋值”而是“按照和数据结构同样的形状一次性把变量声明好”。数组解构看着是方括号对象解构看着是花括号左右两边的结构一一对应然后 JS 引擎帮你把值自动装进左边的变量里。这个思维的转变本质上是把“取值”从命令式变成了声明式。以前你关心的是“怎么取”现在你关心的是“取什么”。比如从接口返回的数据里拿用户信息你只需要声明const { nickname, avatar } data.user一眼就能看出代码想拿哪几个字段维护成本也低很多。我在实际项目里重构过一批老代码把几十行var xxx obj.xxx的重复赋值改成解构之后代码行数少了将近一半可读性提升非常明显。这也是为什么很多团队在代码规范里直接要求能用解构的就优先用解构减少无意义的中间变量。2. 数组解构从位置到迭代器2.1 数组解构的基本形式数组解构的写法非常直白左边用一对方括号里面放变量名右边放数组按位置一一对应。比如const [first, second, third] [10, 20, 30]; console.log(first); // 10 console.log(second); // 20 console.log(third); // 30如果左边的变量比右边的元素多多出来的那个变量会拿到undefined。而如果右边元素有值你可以直接在左边给某个变量设默认值这样右边值不存在的时候就会落到默认值上。const [x 100, y 200] []; console.log(x); // 100 console.log(y); // 200我建议你把默认值当成“数据兜底”而不是“必填校验”。接口返回的数组可能为空或者某个位置的数据缺失这时候默认值能保证下面的处理逻辑不因为undefined直接崩掉。但要注意数组解构的下标语义很强写代码的人必须清楚右边数组每一位置代表什么。我之前见过有人用解构去拆一个顺序经常变的数组结果前端字段全乱了。这种场景下数组解构反而不合适应该考虑对象解构。2.2 跳过元素、剩余参数与字符串解构平时用数组解构最实用的就是“选择性取值”。如果你只想拿第三个元素前面两个可以用逗号空出来不用定义一堆没用的变量const [, , third] [a, b, c]; console.log(third); // c剩余参数配合解构也很常用它可以帮你把前面几个元素单独取出来剩下的全部归到一个数组里语法就是用...加变量名const [head, ...rest] [1, 2, 3, 4, 5]; console.log(head); // 1 console.log(rest); // [2, 3, 4, 5]这里有个细节需要留意rest拿到的始终是一个新数组即便原数组后面没有元素rest也是空数组[]不会是undefined。所以操作rest.length是安全的不会有运行时错误。字符串也可以应用数组解构因为字符串本身就是可迭代对象。你写const [a, b] hia是hb是i。配合split方法拆解一些简单的文本数据非常方便。不过如果是中文字符或者带有复合字符的字符串解构出来的单位可能和你肉眼看到的字符不一致这种边界情况不多但遇到了心里要有数。2.3 解构背后的可迭代协议数组解构能成立不是因为 JS 给数组开了特权而是因为数组实现了可迭代协议。你只要遇到一个带有[Symbol.iterator]方法的对象理论上都可以放到解构右边。比如Set、Map、函数的arguments对象甚至你自定义的生成器对象。const set new Set([1, 2, 3]); const [a, b] set; console.log(a, b); // 1 2 function demo() { const [first, second] arguments; console.log(first, second); } demo(7, 8); // 7 8这个特性在很多“看起来没用什么复杂技巧”的代码里非常有用。比如一个生成器函数返回若干个分段数据你可以直接解构出来不用再额外Array.from转一次数组。但也要注意解构的过程会从头到尾迭代如果右边是无限生成器你只写两个变量引擎会按需取前两个然后停止这没问题如果你用了剩余参数...那就要小心内存和死循环的风险了。3. 对象解构键名、重命名与默认值3.1 对象解构的匹配规则对象解构的底层逻辑和数组不同它不是按位置而是按属性键名匹配。左边写{ name }右边就在对象里找name这个键找到就把对应的值赋给name变量。const user { name: 老张, age: 30, address: { city: 杭州 } }; const { name, age } user; console.log(name); // 老张 console.log(age); // 30对象解构最舒服的地方在于它可以一次性把多个字段取出来而且取出来的变量名默认就是属性名。对于扁平的数据对象比如接口返回的用户资料、配置信息这类结构用对象解构几乎是零成本上手。需要注意的一点是解构右边必须是对象或者能被转换成对象的值如果你直接解构null或者undefined会直接抛 TypeError后面我会单独说。3.2 重新命名给解构变量换一个名字实际开发中经常遇到这样的场景接口返回的字段名是user_name但前端团队内部规范要求变量名用驼峰userName。这时候就需要对象解构的重命名能力语法是原名: 新名const { user_name: userName, user_age: userAge } { user_name: 张三, user_age: 29 }; console.log(userName); // 张三 console.log(userAge); // 29重命名之后再配默认值优先级顺序容易记混我这里给一个口诀先改名再给新名字设默认值。正确的写法是{ user_name: userName 匿名用户 }别把默认值写到旧名字上。我第一次改写的时候就把默认值写到user_name上了结果等了半天发现变量userName还是undefined排查了很久才发现是语法位置不对。重命名的另一个用处是同一个对象里重复取同一个属性。比如你要同时拿name一个当成原始字段一个加上默认值处理重命名就能让两个变量共存不会互相覆盖。3.3 嵌套对象解构与深层读取嵌套对象解构是对象解构里最考验耐心的一部分因为它需要你在左边写出一层一层对应的花括号结构。拿前面的user对象举例我想拿address.city可以这样写const { address: { city } } user; console.log(city); // 杭州这里有个非常容易犯的错很多人以为写完const { address: { city } } user之后address这个变量也一起存在了。但实际上address被当成了解构路径的一部分真正声明出来的只有city。如果你希望既拿到address这个对象又拿到它里面的city那就得分开写两次解构或者用一句里同时声明const { address, address: { city } } user;这种写法在业务里比较少见但面试题很喜欢考。实际项目中遇到深层嵌套的数据我更推荐配合可选链?.一起用因为深层属性一旦断链解构只会在左边变量上得到undefined不会主动帮你兜底。比如const { address: { city } } user || {}如果address不存在整句照样是错的。正确做法是解构前先判断右边对象的层级或者分步取const { address {} } user; const { city 未知城市 } address;这样每一层都有自己的兜底代码也比一口气写到底更容易排查。4. 函数参数中的解构把“按位置传参”变成“按字段传参”4.1 形参解构的基本用法函数形参解构是对象解构在函数签名上的延伸也是我在项目里最喜欢用的一点。以前写一个创建用户的函数参数一多调用的时候经常分不清第二个参数到底是age还是sex。用对象解构之后函数签名直接拆开function createUser({ name, age, email }) { console.log(name, age, email); } createUser({ name: 李四, age: 28, email: liexample.com });调用的时候每个字段都带着名字代码阅读者不需要去数参数顺序直接对照对象键名就知道传的是什么。这种写法尤其在配置类函数、回调函数里非常好用因为你大概率不会把所有参数全传一遍更多的是挑几个需要的字段传。形参解构同样支持默认值写法很灵活。function createUser({ name 匿名, age 18 } {}) {}这里外层 {}的含义是如果不传参数或传入undefined那么给整个解构一个空对象作为兜底。如果不写这个 {}直接调用createUser()就会抛错因为没法对一个不存在的参数解构。这是新手经常翻车的地方。4.2 传参时的注意点改参数不等于改原对象解构形参拿到的变量只是原对象的字段值如果你在函数内部直接给age 30这样的赋值并不会改掉原本传入的那个对象。这一点和“对象按引用传递”容易混淆。解构相当于帮你创建了一个局部变量你用变量去改值只是改了局部变量但如果你修改的是某个嵌套对象的字段比如形参里的info.address.city xxx还是会影响到原始对象因为嵌套对象的引用还是同一个。我在代码评审的时候经常提醒团队解构只做读取和兜底别指望它做深拷贝。如果真的需要隔离修改效果应该用结构化克隆或者序列化复制。否则你会遇到一个很隐蔽的 bug函数内部改了某个属性外面对象的对应属性也跟着变了排查半天才发现是这个引用问题。4.3 函数返回多个结果时解构是完美的落点函数返回多值在 ES6 之前主要靠返回数组或者返回对象。现在配合解构返回值的设计可以变得更符合直觉。比如一个函数要同时返回处理后的数据和状态function parseInput(raw) { const isValid raw raw.length 0; return { data: isValid ? raw.trim() : , isValid }; } const { data, isValid } parseInput( hello );这样写的好处是调用方只关心自己需要的字段不需要的可以不取。比如有的地方只用isValid直接const { isValid } parseInput(data)代码里不会有多余变量。甚至可以让函数返回数组然后用数组解构比如拆出一个坐标点return [x, y]调用方const [lat, lng] getLocation()语义也很清楚。唯一的建议是返回值结构一旦确定尽量不要中途变化否则所有解构调用的地方都要跟着改这比改动单个返回值更费劲。5. 实操中的常见报错与排查5.1 默认值只在值为 undefined 时才生效默认值的触发条件是“严格等于 undefined”而不是“值为假”。这个规则特别阴。我举个极端例子const { count 10 } { count: 0 }; console.log(count); // 0不会落到 10 const { status unknown } { status: }; console.log(status); // 也不会变成 unknown数字0、空字符串、false、null这几个值在默认值面前全部“有效”所以不会触发兜底。在实际业务里如果后端返回count: 0前端期望的是“没数据时显示默认值”这种 10的写法根本不起作用。正确做法是先解构再显式判断或者用一个自定义取值函数。数组解构也是同一个规则。const [a 默认] [undefined]会落到默认值[null]就不会。你把默认值理解成“处理未定义而不是处理无效值”就顺了。5.2 解构 null 和 undefined 直接抛 TypeError很多初学者在解构对象时碰到的第一个报错就是Cannot destructure property xxx of undefined as it is undefined。原因通常是你解构了一个接口数据但接口返回了null或者字段缺失导致拿到undefined。例如const data null; const { list } data; // TypeError这种问题在异步场景里特别常见。接口请求还没返回时data是undefined你一解构直接炸。我的经验是给接口数据做一个前置兜底比如const { list [] } data || {}。注意这里|| {}解决的是“整体为空”的问题list []解决的是“字段缺失”的问题两者职责不能互换。只要养成解构前先看一眼右侧会不会是undefined/null的习惯这种报错基本能消灭一大半。5.3 嵌套解构和括号“很配”但并不好看嵌套解构写多了左边会堆出很深的花括号和冒号比如const { data: { list: [firstItem] } } response;这种写法一旦出错报错信息往往只会告诉你是undefined不会告诉你具体哪一层断了。我自己的排查经验是遇到这种深度超过三层的解构先拆成几步每步只解构到当前层加上默认值出错时打印一下中间结果定位会快很多。代码多两行但调试省下来的时间远远超过阅读时的优雅感。还有一个格式化相关的实际问题对象解构后面如果跟着函数调用很容易被 IDE 误判成代码块。比如你想取一个函数返回值的属性const { data } getResult()没问题但如果你在箭头函数里直接返回解构对象必须加括号() ({ a, b })漏了括号就是语法错误。这个坑在代码压缩工具或老式构建环境里也常被提及ES6 转码之后尤其容易踩到。5.4 解构在性能与兼容性上的几个疑点不少同学问过我“解构赋值是不是比直接点属性慢”从 V8 引擎的实现来看解构在编译阶段会被优化成类似直接访问属性的指令性能差距基本可以忽略。真正要关注的不是解构本身而是用解构的过程中是否触发了额外对象转化。比如在一个大循环里反复创建临时对象再去解构这个临时对象的开销才是实打实存在的。所以写循环里的解构时尽量让右侧对象提前定义好。兼容性方面ES6 的解构语法在现代浏览器和 Node.js 里完全没问题。但如果团队还在维护一些老旧的运行环境需要靠 Babel 转译建议在转译配置里打开对应插件并确认目标浏览器范围。转译后的代码会生成一些辅助函数横竖都能用但体积会稍微涨一点。只要项目有标准构建流程这个问题基本不会影响到日常开发。6. 我在项目里的扩展玩法与经验沉淀6.1 解构在接口数据处理中的落地场景在我自己的项目里解构用得最频繁的是统一处理接口返回结构。比如公司内部有个统一响应体长这样{ code, message, data }。每个页面拿到响应后先解构出code和data再根据code判断业务流程。这比直接拿整个响应体到处传要清晰很多。const { code, data } response; if (code 0) { const { list, total } data; renderList(list, total); }这种写法配合封装好的请求函数整个数据流非常流畅。我还习惯在封装里同步解构掉一些“业务埋点字段”比如traceId这样调用方永远拿不到不相关的东西从源头降低出错的概率。6.2 解构与工具函数结合可以写出更干净的代码解构不仅能用在取数上配合一些工具函数还能简化数据转换。比如我要把数组里的id和name单独抽出来组成新对象数组const users [ { id: 1, name: a, extra: x }, { id: 2, name: b, extra: y } ]; const briefs users.map(({ id, name }) ({ id, name }));如果换 ES5 写map回调里要先声明变量再赋值最后还要手动构造返回对象。用解构之后整个回调函数体就从几行压缩成一个箭头表达式。这里的核心思想是解构不只是一个取值语法它可以嵌进map、filter、数组去重、对象合并等各个操作环节里让每个环节只保留自己关心的字段。6.3 值得坚持的几条原则做了大量解构相关的代码评审之后我总结出三条原则简单好记一层一层拆不要追求一步到位的深层解构。深度超过三层代码的可读性会断崖式下降调试成本也跟着涨。默认值只防 undefined不防 null更不做校验。业务上的必填校验应该单独走逻辑别想靠解构默认值顺手解决。解构出来的变量要配套清晰命名。如果你习惯用{ data: d }这种简写时间长了连自己都看不懂d是哪一层的数据。最后再补一个我在实际调试中验证过的小技巧写对象解构时最好在代码行尾加一个保留字段来确认结构比如const { list, total, ...rest } data然后在开发环境打印一次rest你能立刻看到接口数据里有哪些没被声明出来的字段。这种做法在对接外部接口时特别好用等于是给数据加了一个“临时探查器”。解构这件事看着简单用好了能大大减少代码里的噪音也多了一层对数据的掌控感。