js实现解构
解构赋值的基本概念
解构赋值(Destructuring Assignment)是ES6引入的语法,允许从数组或对象中提取值,并直接赋给变量。这种方式简化了代码,提高了可读性。
数组解构
通过方括号 [] 匹配数组结构,按顺序提取值:
const arr = [1, 2, 3];
const [a, b, c] = arr; // a=1, b=2, c=3
跳过某些元素时使用逗号占位:
const [x, , z] = arr; // x=1, z=3
默认值在解构值为 undefined 时生效:

const [p = 10, q = 20] = [1]; // p=1, q=20
对象解构
通过花括号 {} 匹配对象属性,变量名需与属性名一致:
const obj = { name: 'Alice', age: 25 };
const { name, age } = obj; // name='Alice', age=25
重命名变量使用冒号 ::

const { name: userName, age: userAge } = obj; // userName='Alice'
默认值同样适用:
const { role = 'user' } = obj; // role='user'
嵌套解构
支持嵌套结构的解构:
const data = { user: { id: 1, profile: { name: 'Bob' } } };
const { user: { profile: { name } } } = data; // name='Bob'
函数参数解构
直接解构传入的参数对象或数组:
function greet({ name, age }) {
return `Hello, ${name}! You are ${age} years old.`;
}
greet({ name: 'Charlie', age: 30 });
解构的常见应用场景
- 交换变量值:
let m = 1, n = 2; [m, n] = [n, m]; // m=2, n=1 - 提取函数返回的多个值:
function getData() { return [1, 2]; } const [val1, val2] = getData(); - 处理API响应数据时快速提取字段。
注意事项
- 解构失败时变量值为
undefined。 - 右侧值不可为
null或undefined,否则会报错。 - 对象解构时若属性名不存在,需通过默认值避免
undefined。






