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

在 ES6 及后续版本中，提取深度嵌套对象中的属性，最常用和推荐的方法是使用 解构赋值 (Destructuring Assignment)，并结合 可选链操作符 (Optional Chaining, ES2020) 来安全地处理可能为 null 或 undefined 的中间层级。

以下是几种主要方法：

1. 解构赋值 (Destructuring Assignment) – 核心方法

这是 ES6 引入的核心特性，允许你从对象（或数组）中提取数据并赋值给变量，语法简洁直观。

基本用法：

const user = {
  id: 1,
  profile: {
    personal: {
      name: 'Alice',
      age: 30,
      contact: {
        email: 'alice@example.com',
        phone: '123-456-7890'
      }
    },
    preferences: {
      theme: 'dark'
    }
  }
};

// 提取深度嵌套的属性
const {
  id,
  profile: {
    personal: {
      name,
      contact: { email }
    },
    preferences: { theme }
  }
} = user;

console.log(id);    // 1
console.log(name);  // 'Alice'
console.log(email); // 'alice@example.com'
console.log(theme); // 'dark'

优点：

• 代码非常简洁、可读性强。
• 可以在一次操作中提取多个不同层级的属性。
• 支持设置默认值（当属性不存在时）。

设置默认值：

// 如果 user 或 user.profile 不存在，profile 将是 {}
// 如果 user.profile.preferences 不存在，theme 将是 'light'
const {
  profile: {
    preferences: { theme = 'light' } = {}
  } = {}
} = user;

console.log(theme); // 'dark' (因为存在)

---

2. 可选链操作符 (Optional Chaining) – 安全访问 (ES2020)

解构赋值有一个潜在问题：如果中间的某个对象层级为 null 或 undefined，解构会抛出错误。

// 如果 user.profile 为 null 或 undefined，这行代码会报错！
const { profile: { personal: { name } } } = user; // TypeError: Cannot destructure property 'personal' of 'undefined' or 'null'.

解决方案：使用可选链 (?.)

虽然可选链本身不是 ES6 的特性（它是 ES2020），但在现代 JavaScript 开发中，它与解构结合使用是处理深度嵌套对象的最佳实践。

// 方法一：先用可选链安全访问，再解构（推荐）
const personalInfo = user?.profile?.personal;
if (personalInfo) {
  const { name, contact: { email } } = personalInfo;
  console.log(name, email);
} else {
  console.log('Personal info not available');
}

// 方法二：结合默认值和可选链（更简洁）
const {
  profile: {
    personal: {
      name = 'Unknown',
      contact: { email = 'no-email@example.com' } = {}
    } = {}
  } = {}
} = user || {}; // 确保 user 不是 null/undefined

console.log(name);  // 'Alice'
console.log(email); // 'alice@example.com'

可选链的优势：

• obj?.prop：如果 obj 存在，则返回 obj.prop，否则返回 undefined。
• obj?.[expr]：可选的动态属性访问。
• obj?.func()：可选的函数调用。
• 避免了因访问 null 或 undefined 的属性而引发的 TypeError。

---

3. 传统方法（不推荐用于新代码）

虽然 ES6 之前的方法仍然有效，但相比解构和可选链，它们更冗长且易出错。

• 直接点号访问 (容易出错)：

  const email = user.profile.personal.contact.email; // 如果任何中间层级不存在，会报错
  

• 手动检查 (冗长)：

  const email = user && user.profile && user.profile.personal && 
                user.profile.personal.contact && user.profile.personal.contact.email;
  

• 使用 try-catch (性能差)：
  

  let email;
  try {
    email = user.profile.personal.contact.email;
  } catch (e) {
    email = 'default@example.com';
  }

---

4. 使用 Lodash 等工具库

对于复杂的场景或需要兼容老环境，可以使用像 Lodash 这样的工具库。

const _ = require('lodash');

// get 方法可以安全地获取嵌套属性
const email = _.get(user, 'profile.personal.contact.email', 'default@example.com');
// 第三个参数是默认值

---

总结

在现代 JavaScript（ES6+）中，提取深度嵌套对象属性的最佳实践是：

1. 首选：解构赋值 + 可选链 + 默认值
   • 使用 解构赋值 来清晰、简洁地提取所需属性。
   • 使用 可选链 (?.) 来安全地访问对象，防止 TypeError。
   • 在解构时使用 默认值 (= defaultValue) 来处理属性不存在的情况。
2. 避免 直接访问或冗长的手动检查。

示例（推荐写法）：

const user = { /* ... */ };

// 安全地提取多个深度嵌套属性
const {
  id,
  profile: {
    personal: {
      name = 'Anonymous',
      contact: { email = 'no-reply@example.com' } = {}
    } = {},
    preferences: { theme = 'light' } = {}
  } = {}
} = user || {};

console.log(id, name, email, theme);

这种方法结合了 ES6 解构的简洁性和现代 JS 安全特性的健壮性，是面试和实际开发中的标准答案。