一个常见的 JavaScript 解构陷阱

发布时间 2023-11-14 20:46:50作者: azoux

在日常的 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 并调用其中的数组方法,而不会触发意外的异常。