JS对象解构核心是用{key1,key2}语法直接提取属性，支持同名提取、重命名（原名:新名）、默认值（=fallback）和嵌套解构（一层括号对应一层结构）。

JS 中用对象解构提取属性值，核心是用 { key1, key2 } 的语法直接从对象中“拎出”需要的字段，一行代码就能替代多次点号访问。

基础写法：按名提取同名属性

只要属性名和变量名一致，直接写在大括号里即可：

const user = { name: '张三', age: 28, city: '北京' };
const { name, age } = user;

console.log(name); // '张三'
console.log(age);  // 28

重命名变量：用 原属性名: 新变量名 语法

当变量名和属性名冲突，或想起更清晰的名字时，可以重命名：

chartjs-reporter

此技能用于在用户需要将结构化数据（查询结果、CSV 摘要、JSON 记录或 Python 字典/列表）转换为独立的 HTML 页面时使用。

下载

const { name: userName, city: location } = user;
console.log(userName); // '张三'
console.log(location); // '北京'

设置默认值：用 = 指定缺失时的 fallback

对象里没有该属性时，变量不会是 undefined，而是你设的默认值：

const { hobby = '读书', age = 18 } = user;
console.log(hobby); // '读书'（user 里没有 hobby）
console.log(age);   // 28（有值，不走默认）

嵌套解构：一层括号对应一层对象结构

面对深层嵌套对象，解构也能一层层展开，避免反复写点号：

const data = {
  profile: {
    contact: { email: 'a@b.com', phone: '138...' }
  }
};

const { profile: { contact: { email } } } = data;
console.log(email); // 'a@b.com'