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