一、什么是解构赋值？
解构赋值（Destructuring Assignment） 是 ES6 中新增的一种语法，允许我们从数组或对象中提取数据，并赋值给对应的变量。
它让代码更简洁、可读性更强。
二、数组解构
✅ 基本用法
let [a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20
🔁 顺序决定值
数组解构是按 位置顺序 匹配的：
let [x, y] = ['苹果', '香蕉'];
// x -> 苹果，y -> 香蕉
💡 默认值
如果某个位置没有值（即 undefined），可以设置默认值：
let [x = 1] = []; // x = 1
let [y = 2] = [undefined]; // y = 2
let [z = 3] = [null]; // z = null（不会使用默认值）
⚠️ 只有当值严格等于
undefined时才会使用默认值（使用===判断）。
📌 惰性求值
默认值是一个表达式时，只有在需要的时候才会执行（惰性求值）：
function f() {
console.log('aaa');
}
let [x = f()] = [1]; // 不会执行 f()
三、对象解构
✅ 基本用法
对象解构是按 属性名匹配 的：
let { name, age } = { name: 'Alice', age: 25 };
console.log(name); // Alice
console.log(age); // 25
🔄 变量名必须和属性名一致
否则拿不到值：
let { username } = { name: 'Alice' };
console.log(username); // undefined
💡 重命名：给变量取不同的名字
使用冒号 : 来重命名变量：
let { name: fullName } = { name: 'Bob' };
console.log(fullName); // Bob
📌 默认值
也可以为对象属性设置默认值：
let { x = 3 } = {}; // x = 3
let { y = 5 } = { y: 10 }; // y = 10
🔗 可以引用已声明的变量
默认值可以引用前面已经声明的变量：
let { x = 1, y = x } = {};
console.log(y); // 1
🧱 嵌套结构
对象也可以嵌套解构：
let obj = {
p: [
'Hello',
{ y: 'World' }
]
};
let { p: [x, { y }] } = obj;
console.log(x); // Hello
console.log(y); // World
四、特殊技巧 & 注意事项
🚫 已声明变量用于解构时要加括号
let x;
({x} = {x: 1}); // 正确写法
如果不加括号，会被当作代码块报错。
🧩 解构赋值可以不绑定任何变量
虽然没什么实际意义，但语法上合法：
({} = [1, 2, 3]);
({} = 'abc');
🧮 对数组进行对象解构
数组本质也是对象，所以可以对它进行对象属性解构：
let arr = [10, 20, 30];
let { 0: first, [arr.length - 1]: last } = arr;
console.log(first); // 10
console.log(last); // 30
五、实用场景
🎯 提取模块方法
const { log } = console;
log('Hello'); // 等价于 console.log
🧮 数学函数简化
let { sin, cos } = Math;
console.log(sin(0)); // 0
📦 函数参数解构
function greet({ name, age }) {
console.log(`你好，${name}，今年${age}岁`);
}
greet({ name: 'Tom', age: 18 }); // 输出：你好，Tom，今年18岁
六、顶层对象与全局变量
在浏览器中，顶层对象是
window；在 Node.js 中是global。
ES5 中：
- 全局变量和
window属性是一回事。
var a = 1;
console.log(window.a); // 1
ES6 中：
var和function声明的变量仍是顶层对象的属性；let、const、class声明的变量不再是顶层对象的属性。
let x = 10;
console.log(window.x); // undefined（浏览器环境）
七、继承属性也能被解构到
const obj1 = {};
const obj2 = { foo: 'bar' };
Object.setPrototypeOf(obj1, obj2);
const { foo } = obj1;
console.log(foo); // "bar"（来自原型链）
✅ 总结一句话：
解构赋值是一种从数组或对象中“拆出”数据并赋值给变量的语法糖，它可以让你更优雅地操作数据结构，写出更清晰、更现代的 JavaScript 代码。
