ES6 中，如何提取深度嵌套的对象中的指定属性？

示例代码

假设我们有一个深度嵌套的对象，并且我们需要提取其中的某些属性。

const user = {
  id: 1,
  name: 'John Doe',
  address: {
    street: '123 Main St',
    city: 'Anytown',
    country: {
      name: 'USA',
      code: 'US'
    }
  },
  contact: {
    phone: '123-456-7890',
    email: 'john.doe@example.com'
  }
};

// 使用解构赋值提取深度嵌套的属性
const {
  name,
  address: {
    street,
    country: { name: countryName }
  },
  contact: { email }
} = user;

console.log(name);        // 输出: John Doe
console.log(street);      // 输出: 123 Main St
console.log(countryName); // 输出: USA
console.log(email);       // 输出: john.doe@example.com

详细解释

1. 基本解构：在对象结构的同一级别进行解构。

   const { name } = user;
   

2. 嵌套解构：在嵌套的对象层级进行解构。

   const { address: { street } } = user;
   

3. 重命名属性：使用解构赋值时，可以给提取的属性重命名。

   const { address: { country: { name: countryName } } } = user;
   

4. 多层级解构：可以在一个语句中进行多层级的解构赋值。

   const {
     address: {
       street,
       country: { name: countryName }
     }
   } = user;
   

默认值

在解构赋值中，还可以为提取的属性指定默认值，如果该属性在对象中不存在，解构时会使用默认值。

const user = {
  id: 1,
  name: 'John Doe',
  address: {
    street: '123 Main St',
    city: 'Anytown'
  }
};

// 提取不存在的属性并设置默认值
const {
  address: {
    country: { name: countryName = 'Unknown' } = {}
  }
} = user;

console.log(countryName); // 输出: Unknown

总结

ES6 的解构赋值使得从深度嵌套的对象中提取属性变得简单而直观。通过结合基本解构、嵌套解构和默认值，可以轻松提取所需的属性。