一个常见的 JavaScript 解构陷阱

在日常的 JavaScript 编码中，我们经常使用解构语法来提取对象中的属性。假设我们有一个名为 fetchResult 的对象，代表从接口返回的数据，其中包含一个字段名为 data。

const fetchResult = {
  data: null
};

在提取 data 字段时，为了避免接口未返回该字段而导致的问题，我们常常会使用解构语法，并给予该字段一个默认值，比如 []。代码看起来可能会像这样：

const { data: confList = [] } = fetchResult;

这个操作的意图是将 fetchResult 中的 data 字段解构并赋值给变量 confList，同时，若 data 字段未被返回，我们期望将其默认值设置为空数组 []。

然而，这里隐藏了一个容易忽略的陷阱。尽管我们为 confList 指定了默认值为 []，但是当 data 字段的值为 null 时，解构语法并不会触发默认值的赋值，而是保留了 null 的值。这导致了一个潜在的问题：

即使我们尝试使用 confList 作为数组来调用一些数组方法，由于其实际值是 null，这样的操作将会触发错误。

为了解决这个问题，我们需要在解构后手动检查并将 null 值转换为默认的空数组，以确保 confList 始终是一个数组，从而避免可能出现的错误：

const fetchResult = {
  data: null
};
 
const { data } = fetchResult;
const confList = Array.isArray(data) ? data : [];

这种方式通过直接检查 data 字段是否为数组，然后手动设定 confList 变量，确保了即使 data 字段的值为 null 或者未定义，confList 也会被正确地设定为一个空数组，避免了因为 null 值导致的错误。这样我们可以放心地使用 confList 并调用其中的数组方法，而不会触发意外的异常。