【高频考点精讲】ES6解构赋值的10个高级用法，提升代码可读性

本文链接：https://blog.csdn.net/liuyun_12138/article/details/147692972

ES6解构赋值的10个高级用法，让你的代码优雅如诗

🧑‍🏫 作者：全栈老李

📅 更新时间：2025 年 5 月

🧑‍💻 适合人群：前端初学者、进阶开发者

🚀 版权：本文由全栈老李原创，转载请注明出处。

大家好，我是全栈老李。今天咱们聊聊ES6解构赋值那些事儿——这玩意儿就像代码界的"拆快递"，只不过拆的是数据包裹。很多同学以为解构赋值就是const {a, b} = obj这种基础操作，其实它的玩法多着呢！

1. 嵌套解构：剥洋葱式取值

const user = {
   
   
  id: 1,
  info: {
   
   
    name: '全栈老李',
    address: {
   
   
      city: '北京',
      district: '海淀区'
    }
  }
};

// 老李教你一步到位取到区级信息
const {
   
    info: {
   
    address: {
   
    district } } } = user;
console.log(district); // 输出：海淀区

这种写法相当于直接把快递盒拆到最里层的小物件，省去了中间各种user.info.address.district的啰嗦写法。在React的props传递中特别实用。

2. 数组解构的骚操作

const rgb = [255, 128, 64];

// 跳过中间值（老李提示：逗号占位很重要）
const [red, , blue] = rgb;
console.log(red, blue); // 255 64

// 配合rest参数收尾
const [first, ...rest] = [1, 2, 3, 4];
console.log(rest); // [2, 3, 4]