ES6阮一峰教程官网：如何正确使用解构赋值避免报错？

Question

在学习ES6解构赋值时，常见问题是当右侧值为`undefined`或`null`时导致报错。例如：`const {a, b} = null` 或 `const {a, b} = undefined`会抛出错误。这是因为解构赋值需要一个对象或数组作为基础数据结构，而`null`和`undefined`无法提供。 如何避免？可以设置默认值，如`const {a = 10, b = 20} = null`，此时`a`和`b`会被正确赋值为默认值10和20。另外，确保右侧表达式总是返回一个有效对象或数组，例如使用逻辑或运算符`||`提供后备值：`const {a, b} = obj || {}`。这样即使`obj`是`null`或`undefined`，也能避免报错并安全解构。这是从ES6阮一峰教程中提炼的重要技巧之一。

Answer 1

1. 基础理解：ES6解构赋值的基本概念

在学习ES6解构赋值时，我们需要明确其核心功能是直接从数组或对象中提取数据并赋值给变量。例如：

const {a, b} = {a: 1, b: 2};

然而，当右侧值为`undefined`或`null`时，会引发错误。这是因为解构赋值需要一个有效的对象或数组作为基础数据结构。

常见问题示例

• `const {a, b} = null;` 抛出错误：无法对null进行解构。
• `const {a, b} = undefined;` 抛出错误：无法对undefined进行解构。

2. 深入分析：为何会出现错误？

JavaScript中的解构赋值本质上是对对象或数组的引用操作。如果右侧值为`null`或`undefined`，则没有合法的对象或数组可供引用，因此会抛出错误。

右侧值	结果
`{a: 1, b: 2}`	成功解构，`a=1`, `b=2`
`null`	抛出错误：无法对null进行解构
`undefined`	抛出错误：无法对undefined进行解构

3. 解决方案：如何避免错误？

为了避免因`null`或`undefined`导致的解构错误，可以采用以下两种方法：

1. 设置默认值：通过在解构赋值中定义默认值，确保即使右侧值无效，也能正确赋值。

2. const {a = 10, b = 20} = null;

   此时，`a`和`b`会被正确赋值为默认值10和20。

3. 使用逻辑或运算符`||`：确保右侧表达式总是返回一个有效对象或数组。

4. const obj = null;
   const {a, b} = obj || {};

   这样即使`obj`是`null`或`undefined`，也能避免报错并安全解构。

4. 实践技巧：结合实际场景应用

在实际开发中，我们可能会遇到更复杂的场景。例如，从API响应中解构数据时，响应可能为空或无效：

function fetchData(response) {
    const {data = {}, status = 'unknown'} = response || {};
    return {data, status};
}

上述代码中，无论`response`是否为`null`或`undefined`，都能安全地解构并提供默认值。

流程图说明

以下是处理解构赋值异常的逻辑流程：