JavaScript中的对象解构赋值

对象解构赋值是ES6引入的一项强大特性，它允许我们从对象中提取属性并将它们赋值给变量，语法简洁且可读性强。

基本解构语法

const person = {  name: '张三',  age: 25,  job: '前端工程师'};// 传统方式const name = person.name;const age = person.age;// 解构赋值方式const { name, age, job } = person;console.log(name); // '张三'console.log(age);  // 25console.log(job);  // '前端工程师'

解构赋值的高级用法

1. 重命名变量

const { name: fullName, age: years } = person;console.log(fullName); // '张三'console.log(years);    // 25

2. 设置默认值

const { name, age, country = '中国' } = person;console.log(country); // '中国' (因为person对象中没有country属性)

3. 嵌套对象解构

const employee = {  id: 1001,  info: {    firstName: '李',    lastName: '四',    contact: {      email: 'lisi@example.com',      phone: '13800138000'    }  }};const {  info: {    firstName,    lastName,    contact: { email }  }} = employee;console.log(firstName); // '李'console.log(email);     // 'lisi@example.com'

4. 函数参数解构

function displayPerson({ name, age }) {  console.log(`${name}今年${age}岁`);}displayPerson(person); // "张三今年25岁"

5. 动态属性名解构

const key = 'name';const { [key]: value } = person;console.log(value); // '张三'

实际应用场景

对象解构在React组件props处理中特别有用：

function UserProfile({ username, email, avatar = '/default.png' }) {  return (    <div>      <img src={avatar} alt={username} />      <h3>{username}</h3>      <p>{email}</p>    </div>  );}

对象解构赋值不仅简化了代码，还提高了可读性，是现代JavaScript开发中不可或缺的特性。