js实现解构
解构赋值的基本概念
解构赋值是ES6引入的语法，允许从数组或对象中提取值，并直接赋值给变量。这种方式简化了变量声明和赋值的操作，使代码更简洁。
数组解构
数组解构通过位置匹配提取值。左侧的变量名与右侧数组的元素按顺序一一对应。
const arr = [1, 2, 3];
const [a, b, c] = arr; // a=1, b=2, c=3跳过某些元素时，可用逗号占位：
const [x, , z] = [10, 20, 30]; // x=10, z=30支持默认值，当解构的值为undefined时生效：
const [p = 5, q = 6] = [1]; // p=1, q=6对象解构
对象解构通过属性名匹配提取值。变量名需与对象属性名一致，或通过别名指定。
基础用法：
const obj = { name: 'Alice', age: 25 };
const { name, age } = obj; // name='Alice', age=25属性名与变量名不同时，使用别名：
const { name: userName, age: userAge } = obj; // userName='Alice'默认值同样适用：
const { role = 'guest' } = {}; // role='guest'嵌套解构
支持嵌套结构的解构，适用于多层数组或对象。
数组嵌套：
const nestedArr = [1, [2, 3], 4];
const [m, [n, o], p] = nestedArr; // m=1, n=2, o=3, p=4对象嵌套：
const nestedObj = { info: { id: 1, status: 'active' } };
const { info: { id, status } } = nestedObj; // id=1, status='active'函数参数解构
直接在函数参数中使用解构，简化传参逻辑。
数组参数：
function sum([a, b]) {
return a + b;
}
sum([1, 2]); // 3对象参数：
function greet({ name, age }) {
return `Hello, ${name}! You are ${age} years old.`;
}
greet({ name: 'Bob', age: 30 }); // "Hello, Bob!"注意事项
- 解构失败时变量值为
undefined。 - 右侧值为
null或undefined会报错（无法解构）。 - 默认值仅在解构值为
undefined时生效。
通过合理使用解构赋值，可以显著提升代码的可读性和简洁性。
