当前位置：首页 > news >正文

JavaScript 对象的解构

news 2025/8/14 4:56:06

JavaScript 对象的解构（Destructuring Assignment）是一种从对象中快速提取属性值，并赋值给变量的简洁语法。

1. 基础语法

const obj = { a: 1, b: 2, c: 3 };// 普通写法
const a = obj.a;
const b = obj.b;// 解构写法
const { a, b } = obj;console.log(a); // 1
console.log(b); // 2

2. 解构时变量名和属性名相同

const { a, b } = obj;
变量 a 会被赋值为 obj.a 的值；变量 b 会被赋值为 obj.b 的值。

3. 给解构的变量指定默认值

const obj = { a: 1 };const { a, b = 10 } = obj;console.log(a); // 1
console.log(b); // 10 （obj 没有 b 属性，使用默认值）

4. 变量名与属性名不同时，重命名

const obj = { a: 1, b: 2 };const { a: x, b: y } = obj;console.log(x); // 1
console.log(y); // 2

5. 嵌套对象解构

const obj = {user: {name: 'Tom',age: 18,},
};const {user: { name, age },
} = obj;console.log(name); // Tom
console.log(age);  // 18

6. 函数参数解构

function printUser({ name, age }) {console.log(`姓名: ${name}, 年龄: ${age}`);
}printUser({ name: 'Alice', age: 25 });

总结

对象解构是提取对象属性的简便写法，避免了重复写 obj.xxx。
支持默认值、重命名和嵌套结构。
用得好，可以让代码更简洁、更易读。

import lodash from 'lodash';const dictInfo = [{ type: 'fruit', name: 'apple' },{ type: 'fruit', name: 'banana' },{ type: 'vegetable', name: 'carrot' }
];const grouped = lodash.groupBy(dictInfo, 'type');console.log(grouped);
/*
{fruit: [{ type: 'fruit', name: 'apple' },{ type: 'fruit', name: 'banana' }],vegetable: [{ type: 'vegetable', name: 'carrot' }]
}
*/
const {fruit,vegetable,} = lodash.groupBy(dictInfo, 'type');